CSS ‘id’ vs. ‘class’

This is a fairily standard interview question for someone that claims to understand CSS, but you’d be amazed at the number of developers that just don’t get it.

Assuming

<style type=”text/css”>
div#error { color:red; }
div.error { color:red; }
</style>
<div id=”error”>This is error text shown in red.</div>
<div class=”error”>This is also error text</div>

Notice that an ID’s CSS is an HTML element, followed by a “#”, and finally ID’s name – “element#idname”.

Also, be sure to absorb the fact that when an id is used in HTML we must use ‘id=”name”‘ instead of ‘class=”name”‘ to reference it!

A simple way to remember this is to refer back to how you think of page anchors. Those URL’s must also be unique and use the “#”.

Why Did They Choose Those Names??

  • ID = A person’s Identification (ID) is unique to one person.
  • Class = There are many people in a class.

NOTE: You can also use inline styling (with no id or class), or style the HTML elements themselves, but those will be covered in a later posts.

Leave a Reply