I have been wondering about CSS and which way is better to program in. 
I have learned to write it were the page references the CSS such as below:

.class{attributes: value;}

.class element{attributes: value;}

but I have seen a lot of it like this, were the CSS references the page:

element.class{attributes: value;}

Is there really any difference since the both do validate according to W3C?  If so, what is the difference?

acrode wrote:

I have been wondering about CSS and which way is better to program in. 
I have learned to write it were the page references the CSS such as below:

Code: css

.class{attributes: value;}

.class element{attributes: value;}

but I have seen a lot of it like this, were the CSS references the page:

Code: css

element.class{attributes: value;}

Is there really any difference since the both do validate according to W3C?  If so, what is the difference?

.class element means apply these styles to elements in that class (so you could give a div a class of my_class and then style the images in it by doing .my_class img and the bold tags by .my_class b and so on)

element.class means apply these styles to elements with this class.

these should both look the same

<css>

.myclass img{

border:....

}

.myclass b{

margin:....

}

</css>

<div class=myclass>

  <img src=...>

  <br>

  <b>Winner!</b>

</div>

vs

<css>

img.myclass{

border:....

}

b.myclass{

margin:....

}

</css>

<div>

  <img class=myclass src=...>

  <br>

  <b class=myclass>Winner!</b>

</div>

In other words they are two valid and completely different things.

There's also differences in priority based on how it's identified.  In the case of the following:

.class{attributes: value;}

element.class{attributes: value;}

Priority is going to go to the more specific, in this case, if the attributes were in conflict, element.class would take precedence even if .class was read after element.class. 

It's just a matter of what you want each rule to affect.  Take this code for instance:

<p>This is paragraph 1</p>

<p class="important">This is paragraph 2</p>

<div class="special">

    <p>This is paragraph 3</p>

    <p class="important">This is paragraph 4 </p>

</div>

and this CSS:

p { color:#000000; font-weight:normal; }  // affects all paragraphs

p.important { font-weight:bold; }         // affects paragraphs 2 and 4

.special p { color:#ff0000; }                 // affects paragraphs 3 and 4

The actual effects would be:
This is paragraph 1
This is paragraph 2
This is paragraph 3
This is paragraph 4

Well that is what I thought.  Basically there is no display difference between the two and the work the same.  This has just been a little nit in my years of design.  Thanks for your help.

Arcode, I think you have misunderstood.  They are completely different things, as vita10gy mentioned.

Let me try explain...


.class element
eg: .frog p{
font-color: #000000;
}

This style ONLY applies to a paragraph within, for example, a div called 'frog' like...

<div class="frog">
<p></p>
</div>


element.class
eg: p.frog{
font-color: #000000;
}

This could have been written as .frog, but because the 'p' is in front it will only work on paragraphs, like...

<p class="frog"></p>

Thanks for clearing that up.   Now I feel like an idiot.

acrode wrote:

Now I feel like an idiot.

I wouldn't worry too much, I think the idiot award still belongs to me when I posted..."what  is 'PM' and how do I do it" as a reply to a guy who said I should PM him.