{"id":9,"date":"2008-01-21T15:25:45","date_gmt":"2008-01-21T21:25:45","guid":{"rendered":"http:\/\/cssnewbie.com\/2008\/01\/when-to-use-css-ids-and-classes\/"},"modified":"2022-08-05T09:37:07","modified_gmt":"2022-08-05T09:37:07","slug":"when-to-use-css-ids-and-classes","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/when-to-use-css-ids-and-classes\/","title":{"rendered":"When to Use CSS IDs and Classes"},"content":{"rendered":"

\"Trogdor<\/a><\/p>\n

There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading<\/em> power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class.<\/p>\n

First and most obviously, you can style all of an entire subset of elements by styling a specific tag. For instance, take the following code (please!):<\/p>\n

p { color: red; }<\/pre>\n
This states that all text within a paragraph <p> tag anywhere in your document should be colored bright red, like so. As with most of my code examples, this practice is ill-advised but hopefully illuminating nonetheless. This technique is most useful when you want to change a large number of elements on your page at once.<\/p>\n
However, you can also describe elements according to their IDs and their classes. Both IDs and classes are ways of further clarifying which elements you\u2019re planning to alter. So consider the following snippet of HTML:<\/p>\n
<p id=\u201dintrotext\u201d>This is a snappy introduction.<\/p>\n<p class=\u201daside\u201d>Okay, so the intro isn\u2019t that great.<\/p><\/pre>\n
Here we have two paragraphs, one of which has an id assigned, and the other which has a class. You could manipulate these two paragraphs independently of one another (and the other regular paragraphs in your document) with code such as this:<\/p>\n
p#introtext { font-size: 150%; }\np.aside { font-style: italic; }<\/pre>\n
IDs are unique and beautiful snowflakes. Classes are not.<\/p>\n
The first rule affects our \u201cintrotext\u201d paragraph. We select that specific element with \u201cp#introtext,\u201d with a pound sign between the two elements, which means \u201cparagraph tags with an id of introtext.\u201d We\u2019ve set its font size to be 1.5 times the size of a normal paragraph tag.<\/p>\n
Our aside, on the other hand, uses a period between the element and the class, which lets the browser know we\u2019re talking about classes instead of IDs. And you don\u2019t even technically need the \u201cp\u201d identifier before the ID or class: styling simply \u201c#introtext\u201d or \u201c.aside\u201d would have worked just as well in this example, but the more specific you are, the less danger you\u2019re in of accidentally styling things you didn\u2019t mean to.<\/p>\n
So what\u2019s the difference between an ID and a class, then? It\u2019s pretty simple: IDs are unique and beautiful snowflakes (just like you!). Classes are not.<\/p>\n
Think of an ID something like the license plate<\/a> on your car. It\u2019s an identifier that, presuming you haven\u2019t been a victim of theft, is unique to your vehicle. Similarly, an ID can only be used once per HTML document. So if you have something on your page that you need to be different from everything else, that is a good time to set an ID.<\/p>\n
A class, on the other hand, can be applied to multiple elements on the same page. So, going back to our CSS example above, we\u2019re saying that our page will have only one introduction, but can or will have multiple asides. Sort of like this<\/em> article, when you get right down to it.<\/p>\n
Another important distinction between the two is that each element on your page can have only one ID, but can have multiple classes. So you could have HTML like this:<\/p>\n
<p class=\u201daside right\u201d>Was this example really necessary?<\/p><\/pre>\n
You could then have two classes defined in your CSS: one that does something specifically to asides, and another that does something to elements with a class of \u201cright\u201d (for example, it could float them to the right side of the page). Elements with just an \u201caside\u201d class would only have the \u201caside\u201d attributes applied, while elements with just the \u201cright\u201d class would just be floated right. But by applying both to one element as we have above, we can create a unique type of element without having to write a lot of extra code. And that\u2019s what CSS is all about.<\/p>\n
Share and Enjoy !<\/h3>
0<\/span><\/span>Shares<\/small><\/div>
<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i>0<\/span><\/span><\/a><\/span>\n<\/i><\/a><\/span>\n<\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"
There are three different ways in CSS you can dictate which elements you want to style. Each way is useful for a specific set of purposes, but by using all three together, you can really harness the cascading<\/em> power of style sheets. The three methods of describing objects on a page are by their tag name, their ID, or their class. […]<\/p>\n
Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173,182],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/9"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=9"}],"version-history":[{"count":1,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions"}],"predecessor-version":[{"id":3516,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/9\/revisions\/3516"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=9"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=9"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=9"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}