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

Quote:

Originally Posted by 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/

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

Quote:

Originally Posted by drhowarddrfine

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

Ah, ok, thanks a bunch!

David Laakso

Quote:

Originally Posted by kabrenica

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

Quote:

Originally Posted by David Laakso

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

CSS Compliance and Convention...

re: CSS Compliance and Convention...

re: CSS Compliance and Convention...

re: CSS Compliance and Convention...

re: CSS Compliance and Convention...

re: CSS Compliance and Convention...

re: CSS Compliance and Convention...

Similar HTML / CSS bytes

/bytes/development

/bytes/it

/bytes/about