CSS Compliance and Convention...

[kabrenica]

In a stylesheet, what is the difference in writing:

div.class
{
styles:styles;
}

VS.

.class
{
styles:styles;
}


Is it just compliant to use the div.class, or span.class, or div#id, etc. when marking up your CSS? I want to a good argument for my teammates as to what convention we should use in our CSS.

Thanks,
kabrenica

[sashi]

Hi Kabrenica,

In a very simple way let me put it as "HTML is used to structure content. CSS is used for formatting structured content".

Kindly refer to links below to get a better understanding of what is CSS all about and how CSS can be married to HTML. Happy coding.

http://www.w3schools.com/css/
http://www.html.net/tutorials/css/

[kabrenica]

Hi Kabrenica,

In a very simple way let me put it as "HTML is used to structure content. CSS is used for formatting structured content".

Kindly refer to links below to get a better understanding of what is CSS all about and how CSS can be married to HTML. Happy coding.

http://www.w3schools.com/css/
http://www.html.net/tutorials/css/

Thanks for these great links!

But I was wondering more about the necessity of stating the selector that you plan to use the class with.

For instance, let's say the html is:

<div class="header">Header Text</div>

AND the CSS is:

.header
{
font-size:12px;
color:#333;
}

OR I see it written as:

div.header
{
font-size:12px;
color:#333;
}

Both css declarations work, but which one is more compliant? What's the difference between explicitly stating the selector that is going to use the class declared and not stating it? This is of course assuming that the header class will also be reference with a div tag.

Does that make more sense?

[drhowarddrfine]

There is no difference and it's a matter of personal preference.

[kabrenica]

There is no difference and it's a matter of personal preference.

Ah, ok, thanks a bunch!

[David Laakso]

Both css declarations work, but which one is more compliant? What's the difference between explicitly stating the selector that is going to use the class declared and not stating it?

Both are valid and both are compliant.
There is a difference between them.

The difference is:
div.whatever {...}
has higher specificity than
.whatever {...}

The same is true if it were an id:
div#whatever {...}
has higher specificity than
#whatever {...}

[kabrenica]

Both are valid and both are compliant.
There is a difference between them.

The difference is:
div.whatever {...}
has higher specificity than
.whatever {...}

The same is true if it were an id:
div#whatever {...}
has higher specificity than
#whatever {...}

YES, that exactly the answer I was looking for!! Thanks for your great knowledge transfer..
-K