Build Your Own Business Website header image

What is the difference between ID and Class in CSS

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

In this session, a member asks what is difference between the hash mark and period in CSS. We explain the difference is in the type of element it is, whether Class or ID element. An ID element is supposed to be used only once on any given page while a Class element can be used over and over again or as many times as you want on a page.

Video Transcript

Rick: Let’s see, Cynthia. Cynthia, I’ll let you know. Good morning Cynthia. I know we’re going late but I’m just going to answer your question anyway.

Cynthia: Okay, thank you.

Rick: So you asked the question about what’s the difference between the hash mark and the period in CSS.

Cynthia: Right.

Rick: Okay so the difference is the type of element it is, whether it is a class element or an ID element. An ID element is an element that is theoretically used only once in any given page and a class element is an element that is reused over and over and over again or can be used over and over and over again, as many times as you want on a page.

So for example, you only have one header on a page. So you’ve got a div id header and it’s the pound sign or the hash mark header and that’s an ID level element whereas you may have more than one menu. So you could have several UL .menus or UL class menus. So this is… it’s an important element of specificity and inheritance and you probably will get a better sense of it if you watch some of the videos. First, the section of the video that talks about the cascade under Customize Thesis Like a Pro and secondly, the Lesson 6 videos that talk about specificity and I heritance and the role of ID elements versus class elements. And all of this is a way of making a CSS definition specific and therefore, applying it to a specific thing and then also giving the opportunity for that specific definition to be inherited by the children of that specific thing.

And so you know, if you make the text color red in div id header, unless you come along and change it for an element that’s contained inside of div id header, every… all the text inside of div id header is going to be red. Now… and that’s the principle of inheritance that is, the children of a given element will retain the properties of their parent unless otherwise instructed to do so. And s… it’s probably something that you will have to sit and think about a while and I hope that my videos explain it reasonably well.

But that’s the difference between them is an ID element is an element that should exist only once on a page and a class element or class definition is something that can exist as many times as you want on a page. And that’s why some things have the hash mark and some things have the period.

Cynthia: Okay, I’ll watch the video.

Rick: Okay.

Cynthia: Thank you.

Rick: Great. You’re welcome.

0 Comments… add one

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 comments… add one

Leave a Comment