Classes, ID's and selectors. Rocket Science or Common Sense

Hi everybody,

Today I would like to underline the importance of the very basics of CSS. For some reason people tend to just skim through online tutorials and expect to know what they are doing. Articles (just like this one) are limited to a certain subject and quite often assume certain knowledge. Books (good ones) on the other-hand start at the starting-point and work their way up in a more organized matter. But for some reason people still think a book takes more time while it doesn't. I see this almost every day and I hope that this article can at-least prevent one person from messing up his or her code, even if he or she didn't read a book about css. But first things first.

My definition of css:  

CSS is all about targeting elements by using Selectors ID's and Classes, and setting style to those elements.
If you can repeat this line and understand what it says you are already half way.

Pretty much 99 times out of 100, people that excessively use inline style do not seem to get the above definition. Inline style as you could have read in an article I wrote earlier, is way of coding that puts the style inside the element by using a style attribute. Not only is it quite often a redundant and slower way of coding it also ignores the power of an external style sheet. An external style-sheet can contribute to a faster page load, but the real power is in the use of Selectors Id's and classes, by doing so we separate concerns and your team members will love you for it :)

By using these selectors id's or classes we can target very specific to which element(s) we want to set a certain style. Before you do that you need to ask yourself the following question:
Which elements do i want to set style to?

• Is it a unique element? if so, use an #id
• Is it a group of elements but more specific than all of a certain kind? If so, use a .Class
• Is it every element of a certain kind? for instance all div's?if so, use Selector

 So in other words, 
#id's are unique, and thus can there only be 1 element with that id:

#header{

   width:960px;

   height:120px;

}


.classes are a group of elements that share something a like for instance you make a class of .error and make the font-color:red;

.error{

   color:red;

}

Selectors on the other hand target all elements that have the same tag. for instance all div's

div{

  padding:5px;

} 

Something that might be good to know that might seem to be weird at first:
if we target a div with an #id of  #header like:

<div id="header"></div>

we could do the following:

#header{

    width:960px;

    height:120px;

}

or

div#header{

    width:960px;

    height:120px;

}

But if we would have done this:

#header div{

    width:960px;

    height:120px;

}

It doesn't target the div with the id for header, but the div inside of the div with the id of header.
In that case the mark up should have looked like this:
<div id="header">

    <div>this this is now targeted</div>

</div>
Pay attention to this, because this is done wrong a lot!

Now to get back to the title, do you know more people with your passport (aka #id)?...... No, you don't! It makes sense doesn't it, you are unique! :)

Hope the above helps you guys,
as always if you have questions leave them in the comments.

Happy coding!

Cssfreakie