The Difference Between ID and Class in CSS/HTML

In software engineering, most developers want to know EVERYTHING about a specific component of the programming language or technology before taking any action. Their endless quest for knowledge and “deeper” truth leads to new profound insight, and often contributes to the overall improvement of the system. Often than not, developers try their best to find the most efficient way to achieve their vision or goals. In HTML and CSS, the ID and Class is used to define the different components of a page that is separated by either <div> or other HTML elements. Since the last decade, programmers have started emphasizing the code design rather than the smaller code base. As HTML and CSS are considered modern languages, there had to be a way to support code organization in the core language, and thus ID and Class was born in the CSS.

In HTML, Class and ID are used to label the different sections of a page (which are divided by HTML elements), which is then used by the CSS to stylize the sections as per the needs, such as, changing the color text font, etc. For instance, an HTML might have two sections: content and sidebar. The content section would have an ID/Class of “content” and it will hold the text of the website, whereas the sidebar section would have an ID/Class of “sidebar” and it will hold all the sidebars that normally resides on the left side of the page (like in this blog), both of these sections can be stylized by the CSS to make it appear on the desired position of the page. If we didn’t have the way to separate section, your browser would end up moving everything to right, which will look terrible!

In this article, I am going to show you the different Between ID and Class in CSS/HTML, and which should be used in different places. Let’s get started!

ID…

In HTML, ID is used to assign a unique name to the elements. The label is given in the opening tag of the HTML element, and the label should be a string. You should give such labels which describe the functionality or purpose of the element; so it’s better to give “highlight” label to the ID of the paragraph in your HTML page which needs to be highlighted in some way, as it would be insanity to label it “not-highlighted”. In the following code, we would use ID “highlight” and “red-section”:

Once the ID is assigned, you can create the ID in the <style> tag to stylize the section through CSS. You need to add “#” before the label name (which should be the same that you’ve given to HTML elements) in order to stylize the section:

Apart from that, you can use the ID label in <href> link to move directly to the position of the element when you click the <href> element:

Here, clicking the “Move to the bottom” will move the view to the HTML element that is labeled with “bottom”.

You can also use the element in Javascript, which requires ID attribute for certain operations, but this is beyond the scope of this article.

Class…

While the ID is used in CSS to stylize an HTML element, Class is used to stylize group of elements. For instance, you might need to create a sidebar in your HTML page. Now, a typical sidebar contains several headings, i.e., About Me, Website, Contact, etc., wherein some elements (i.e., <a>, <h2>, etc.) can differ in style in some ways or another. With ID attribute, we would need to assign a different ID to every part of the section, which would be cumbersome to do so. Worry not, the class attribute can be used to stylize group of elements:

Here, the whole sidebar section is wrapper in a <div> to apply the CSS effects on the whole section. Now, in order to stylize them:

Here, we have applied the stylizing “sidebar” class, and the descendant element “h2”, which is nested in the sidebar class, meaning we can change the stylizing of nested elements that add more effects to the parent element.

So, which should I use?

The major difference is that the Class is used for stylizing the group of items, while the ID is used to stylize the individual item. You might ask: Which should I use? Well, the answer lies in your requirements. If you simply want to highlight or stylize simple things, then ID is recommended, but if you want some elements to be nested inside elements and stylize nested elements, then Class is recommended. A Class attribute can be used in the place of ID, however, ID cannot be used in the place of Class.

Conclusion

In this article, I’ve showed you how you can use the Class and ID in their maximum potential while building HTML pages and designing them through the use of CSS.

If you have any question, then please ask in the comments section below!

How To Add A Drop Down Menu On Tumblr

Click here to get to the step by step guide.

When I started designing / developing one of my Tumblr blogs, the very first thing that I wanted to do is to add a drop down menu that would list the pages on my projects, services, etc.

I’m one of those programmers who first search the solution of a problem on the internet before finding the solution myself. So, I googled “drop down menus in Tumblr” and found an excellent site, namely CSS MenuMaker, which provides the HTML/CSS/Javascript code of already created customizable menus! It is also a good basis for learning HTML/CSS/Javascript as you can play with the values to change the look of your menu.

In this post, I’m going to show you how easy it is to add a drop down menu on Tumblr blog. Let’s get started!

How To Add A Drop Down Menu On Tumblr

1) Getting the HTML/CSS/Javascript code

Go to the site, and select the menu that you like the most. I chose this for my blog, because its color is compatible with the theme of my blog, but you can choose any design you want.

2) Downloading the source code

Under the “Download Source” section, download the “source.zip” in your computer and extract the files in it. You will find three different files: styles.css, index.html and script.js for CSS, HTML and Javascript code respectively.

3) Copying the code to your customization section

Copy the CSS code from styles.css and paste it to your “Custom CSS” section in your Tumblr blog, and copy the HTML code from index.html (only copy <div id=’cssmenu’> section!) and paste it to your “Edit HTML” section, just after the title and description of your blog (this should be in the beginning of <body> tag). You need to change the name of pages and the references to them (Hint: <li class=’active’> is for drop down menu). Following is an example of how your code should look like:

Lastly, copy the Javascript code from script.js and paste it just before the </body> tag in “Edit HTML” section. Save the theme and open your blog in a different tab to test the drop down menu.

Do you use a different way to add a drop down menu on Tumblr blog? Tell me in the comments section below!

How to use Google’s Prettify to add syntax highlighting to code snippets

Click here to learn the faster way.

As this blog was going to have posts on programming (as obvious from the name of this blog and About page), I would most likely need to use code snippets as examples, because it isn’t fun to discuss about programming without any mention of source code. Despite the fact that not all programming blogs have syntax highlighting enabled for their code snippets, it is quite ugly in look to see the code without proper formatting and syntax highlighting.

With the use of Google’s JavaScript module called Prettify, you can easily highlight your code. The following is an example of how your code will look like when using this module:

The above example is the famous Hello, World program in C++. You can see that the code is highlighted in the fashion of vim text editor (more on that later).

So how can I use this awesome feature in my programming blog?

You simply need to copy the HTML/CSS/JavaScript code from the trunk of Prettify to your HTML page. To make sure you don’t end up copying the wrong code, I copied and pasted the required code (thanks to this post):

Paste the following before </header>:

Paste the following in the <style> tag:

Note: If you are using the Tumblr platform for your blog/site, then just copy the CSS code in your “Custom CSS”. Do not mess with the <style> tag in HTML customization page!

Once the library is properly installed, you can pre-format and highlight your code by simply writing the code snippets in <pre> and <code> blocks as follows:

You don’t need to specify the programming language; Google’s Prettify figures it out itself! The <pre> tag is for pre-formatting the code and <code> is for highlighting it, so make sure to use both <pre> and <code> tag when adding a source snippet in your post.

HTML Encoding

One thing that you need to keep in mind is that you must change all the angle brackets in your code to &lt; and &gt; which means you need to change all of your < to &lt; and > to &gt; in the code. I use this online encoder to encode my code to the proper HTML.

Themes

I use the Sunburst style, so the CSS code that I posted will give you the Sunburst style as well. I prefer this style because its look is similar to vim text editor, which I use as my default text editor on Linux, but you can use different themes for your own taste.

This procedure for adding syntax highlighting can be used anywhere the customization of HTML is available such as Tumblr. See this stand-alone HTML page example.

Faster way to load Google’s Prettify

Previously we hard coded the whole JavaScript and CSS for styling. The quickest way to add Google’s Prettify is to simply load run_prettify.js via one URL.

You need to specify the parameters; I specified lang parameter and skin parameter. Note that to use syntax highlighting with this method, you need use prettypink class.

See this stand-alone HTML page example.

Did this post teach you something you didn’t know before? Please let me know in the comments section below!

div vs span (HTML) – What’s the difference?

Beginners learning the HTML and web designing / development often ask the difference between these two HTML tags, especially if they are learning by looking at the HTML code, as they both seem to do the same job of defining a section of HTML code as a class or an ID, which can later be styled using CSS (Hint: CSS is used for the presentation of HTML code).

Here, in this tutrorial, I will tell you the differences between them and which is appropriate for different cases.

div vs span (HTML) – What’s the difference?

div – Document Division Element

<div> tag is used for defining a division or a section in an HTML page as a class or an ID, which then can be formatted / styled with CSS. It divides the page into a section! Consider the following example:

Here, we have defined a class “green-section” with <div> tag. The defined class “green-section” was earlier styled within <style> tag to change the text color to green. Thus, you can see that we used <div> tag to define a paragraph as the one with green text.

Through it, we can separate different sections of a website. For instance, you can define left / right widgets section in your blog with <div>, change the size of widgets, etc. It is generally used with block-level content.

Note that <div> creates a line around the section, so you don’t need to use <p> for the text. Following is its default CSS value:

span – Inline Element

It is used for defining an inline element within a section (i.e., <div> enclosed text, etc.) as a class or an ID. It is used for spanning the element!

Continuing from the previous example, we will now add a <span> tag to define a new element within the <div> defined section to change our text color to blue:

Here you can see that I’ve added a <span> tag to define a new class “blue-text” for changing the text color to blue through CSS. <span> doesn’t create a line around the element, so it is suitable for defining a sub-section of a section. It is normally used to change the property of some text in a paragraph to make it prominent. Infolinks script changes the contextual text to ads through span element.

Note that both <div> and <span> should be used in the places where normal tags (<em>, <strong>, etc.) are not enough. Overusing them can result in an ugly and hard-to-manage code.

Following is the stand-alone example of HTML which you can copy / paste into your text editor, save it to index.html and then open the file in your browser to see its usage:

Conclusion

In this tutorial, I have showed you the difference between these two tags and its appropriate use.
If you have any question regarding these tags or HTML, then why not leave comments in the comments section below so that I can make you happy?