How to Use Class and ID Attributes

• Introduction
• What is class and ID in HTML
• How do you specify a class and ID
• Difference between ID and class
• Conclusion

Introduction

  HTML class and id attributes can be used optionally for each tag. The two important HTML attributes are class and ID. These two tags also apply to the all tag in the body tag. Also in this article we will see what is class and ID and what is the difference between these two.

What is class and ID in HTML

Class:

  It is used to specify a single or multiple class names for an HTML element. The class name can be used by CSS and java script to do some takes for the HTML elements. An attribute is class and class is mainly used only for styling. You can also use this class in the CSS with a specific class with a period character followed by the name of the class first selecting element. Class is a many items can share the same class for easy way of styling . Only one ID can be assigned to each tag but only one class can be assigned to multiple tags in a class.

  One particular tag styling how to want Can be used via this class. If you use the class attribute, use the (.) dot symbol to select the style. After putting the dot symbol in the style, you can type the class name for your tag and give the style. And put open and close bracket between these bracket you will style a tag. And one thing you should note that these class may must be separated by the space. There are a few points you should know while working with the class.

  So the first one will be the class attribute can be used on any HTML element like any HTML element can have a class name. The second point will be the class name is the case sensitive. In the class name of head1 keep this h as kept to capital, this will be wrong the style won’t be implemented on the page. So this was all about HTML classes.

ID:

 It is specify the unique ID for an element of the HTML document. ID means we can do a lot of our work by accessing the tag through the program. In cascading stylesheet that is CSS we mention an element with a specific ID. We assign a variable in a programming language, so that each tag in the HTML can be accessed through our coding. To make a tag into variable you need to assign an ID attribute in the tag. Both coding and styling can be done easily using this ID. Now suppose that HTML has three div tags. With this div tags, we are going to create The first div is the website header section, the second div is the website menu bar and the third is the website footer section.

  It’s all unique because a header on a website is a menu bar and a footer. ID is the attribute to identify a unique element like this. The ID name can be anything we want. ID name Can keep whatever our select and Keep it in a way that reminds you. If you use the ID attribute, use the # hash symbol to select the style. After putting the hash symbol in the style, you can type the ID name for your tag on the page and give the style. Let’s work on an example to understand the ID better.

How do you specify a class and ID

Class Specification:

  If you use whatever text editor you want to put the coding on, but I suggest sublime is best. Add the standard boilerplate of HTML and give the title as Class. Let’s start with the basic example we’ll see how to define an HTML class. So inside the body tag we’ll add one H1 tag and we’ll give this class name of ‘head one’. We will add some text in H1 tag and add H2, H3, H4 tags. You can used the same class name in all our H1, H2, H3 and H4. Save the file and go to see the page, you’ll see the headings are there on the page this is the heading 1, heading 2, heading 3 and heading 4.

  Now let’s learn how we can use class name for styling purpose. We’ll open the style tag in the head tag mention the class name by period followed by the class name. So type .head1 and open the parenthesis. Let’s set the color to red and we’ll set the font family to cursive keep the background color to black. You can see we have mentioned the class name dot head 1 for styling purposes and we have given the color of font family and background color for it. So just save the file and see we have designed this Headings tag using our class tag. You set the class name for the heading tag differently, each heading tag can be formatted individually. This is useful example of using the classes on the code.

Syntax:

<!DOCTYPE html>
<html>
<head>
<title>HTML class</title>
<style type=”text/css”>

.head1{
color: red;
font-family: cursive;
background-color: black;}
</style>
</head>

<body>
<h1 class=”head1″> This is the heading 1 </h1>
<h2 class=”head1″> This is the heading 2 </h2>
<h3 class=”head1″> This is the heading 3 </h3>
<h4 class=”head1″> This is the heading 4 </h4>
</body>
</html>

ID Specification :

So we’ll use the same previous example. We’ll mention the H1 and this time we’ll use the ID. So ID and we’ll name it has head1. Type something in H1 tag I will type “This is the first heading”. For H2 also we’ll mention the ID name as head1. Now to style the heading we’ll go back here we’ll open the style tag inside the head tag. We use the hash number to mention the Id, so type hash (#) head1 and open the parentheses. Set the color to light green, set the font family to cursive and we’ll background color to black.

  Now save the file and refresh, so you can see this works in a similar manner to the class apart from it that we use the hash symbol to mention the ID name. So now let’s change the example and use the different ID names for the different Heading. I will change the id name of head1 to h1 and head2 to h2. We’ll style the head2 set the color to red. Now you can see we have the different style for different ID’s. So in this way you can use the different ID’s to design your HTML page.

Syntax:

<!DOCTYPE html>
<html>
<head>
<title>HTML ID</title>
<style type=”text/css”>
#head1{

color: lightgreen;
font-family: cursive;
background-color: black;
}

#head2{

color: red;
}
</style>
</head>

<body>
<h1 id=”head1″>This is the first heading</h1>
<h2 id=”head2″>This is the second heading</h2>
</body>
</html>

Difference Between ID and Class:

Conclusion

That’s it for this tutorial, I hope you liked this article. The HTML class and id are important for attractive look for clients.