CSS Important Points

There is a lot to be said about CSS. I am not here to give a complete tutorial on CSS, that could be obtained by searching the net. What I am doing here is give some points that a reader might not comprehend while reading through these other resources.

Note: It is essential that one is familiar with all basic CSS concepts and some advanced ones before reading on.

Follows are the main points I am gonna clarify and also is included a chat session on IRC between me and an experienced guy in css that made some things clearer and by using my mind I figured the rest out.

First, alas IE6 does not support CSS 2, and it is about time since w3c is working on CSS 3 already, so wakeup and smell the coffee, FireFox rules and this is one of the most important reasons to go for Firefox. Yet, I am not coding for FF users alone so alas...
Another reason why FF is my favourite, _although a bit off topic_ is DOM Inspector. It is a tool installed if you specify so while installing FF, under Development Tools. What it does is marvilous, in a fast glance I can tell you that by a simple click on any HTML document displayed in FF one can directly jump to the line of code that renders the element. The element blinks and you can also do it the other way around by clicknig in the DOM Inspector the rendered document blinks the part corresponding to the source you clicked. Ofcourse, DOM elements, js objects , and especially _since it is related to the topic of this article_ CSS styles for every element are displayed.
Back to topic, some things you might come across while reading about CSS is Contextual Selectors or Descendant Selectors, Class Selectors _ 2 types_, and ID Selectors
The comma "," plays an important role in the meaning of styles. For example: .FancyButton, .ElegentButton {background-color: Gray; Color: Navy} means that the previous style will split into 2 serperate styles with same body but different names, also ex: .TableStyle td, span {color: Green;} will affect any td inside the tables that have class="TableStyle" and all span elements and display their text color in green
Now, Specificity: It is how specific a style is, the more specific means the more powerful, meaning if 2 style selectors match the same element and each has a style that conflicts with the other, the more specific selector will win!! How do we calculate specificity??? OK, I read a bit about this, did not get it completely at first, then in the chat below, it became clear. There are 2 views I found out there .First there is a very good site that mentions that there is an order in which specificity ranks, meaning: ID selectors most powerful, then Class, then HTML and Contextual or AKA Descendant Selectors, and other mutiple element selectors. It also mentions that the more elements a Selector has, the more specfic it gets, and here is where i got lost. Here comes the reason for me mentioning that point on commas, I thought that styles like: .tableStyle td, span, a{...} are stronger and more specific than ones like this .tableStyle td, span {...} _less commas. Obviously, I was wrong, what was meant is that styles with more descendants are stronger than those with less descendants...
The Real Deal: To calculate the specificity follow this simple rule by example: .tableStyle td span a{...} that matches all anchors in all spans that are in all tds of the element having class="tableStyle", has a specificity of 0013. How? 0 (inline styles) 0 (ids) 1 (classes) 3 (elements) forming one composite selector of specificity 13. Another example: .class1.class2.class3 input will have specificity of 31 if we follow same rule. So we notice that Classes have a greater order than elements as explained in the follwing point
In the site I mentioned previously and remention here the following rule is mentioned: Class selectors are more specific than HTML element selectors, and other selectors such as contextual... this can be explained by refering to the previous point where classes are more important. So Class Selectors _since they depend on class.class.class thus more classes_ are more specific than Contextual Selectors AKA Descendant Selectors _ since they depend on element element element (element containing element containing element)thus more elements. The only exception to this rule is when we calculate specificties like 11, 22, 33, and so one. In that case same number of elements and classes is found so neither type of previously mentioned 2 selectors is stronger, so to the order in which the styles appeared in the css file determines the dominating style.
A way to force a style to be stronger or in other words more specific _avoiding dependence on order of appearance_ is to nest more elements, so let us say I have this:
.DataEntry input{ width:100%;} Input.fancyButton{ width:10px;}
where the first style is applied to a <table> and the second to a button in a <td> in that table, there will be the button affected by both styles since it is an input inside _not necessarly a direct child_ an element having DataEntry for a class, and in the same time the button is an input tag of class fancyButton. Both styles are 11 specificity, so to resolve the issue and avoid dependence on order of appearance we ned to strengthen one style more than the other, here it is a matter of choice: I chose to make the first stronger, so the new style is:
.DataEntry td input{ width:100%;} Input.fancyButton{ width:10px;}Adding the td in the style keeps matching the button since it is _naturally_ inside a td in the table, and makes the style's specificity 12 > 11 of the 2nd style...
It might be said that we wanted to make things more fair so:
.DataEntry td input{ width:100%;} td.tdstyle .fancyButton{ color: Blue; width:10px;}
here we added a tdstyle and it is the class of the td containing the button for example, so the specificity is what?? it is 12 for first vs. 21 for second, so we notice how Contextual Selectors are weaker than Selectors containing more classes in them

The Chat:

<Infinite_Recursion> hi
<Infinite_Recursion> anyone into css?
<Absolute0> i got version 6 and i cant find that feature
<Infinite_Recursion> what feature?
<Absolute0> save to image?
<Infinite_Recursion> i don't understand
<Absolute0> how do i do it with nero?
<Infinite_Recursion> Recorder-->Chose Recorder
<Absolute0> isnt there like a good stable free program that does of what i want to do?
<cromlech> nero
<Infinite_Recursion> i told u
<cromlech> haha
<Absolute0> like nero is best for burning, daemon tools for loading images
<Absolute0> i can do it on nere
<Absolute0> nero
<cromlech> anyway, that's far beyond the topic of this channel, Infinite_Recursion 
<Infinite_Recursion> what is?
<Infinite_Recursion> I am talkin css
<Infinite_Recursion> is that off topic?
 no
<cromlech> sorry
<Infinite_Recursion> last time I checked 2 were related
<cromlech> hehe
<cromlech> wrong nick
<Infinite_Recursion> :)
 he was referring to Absolute0
<cromlech> Absolute0: anyway, that's far beyond the topic of this channel
 what was your css prob
<Infinite_Recursion> yeah
<Infinite_Recursion> i have this simple css
<Infinite_Recursion> and i wanna know the specificity 
<Infinite_Recursion> and which style will eventually prevail
<Infinite_Recursion> but i read things that are different from what is happenning
<Infinite_Recursion> :(
<cromlech> what are your styles?
<Infinite_Recursion> paste them here?
<cromlech> eh, how much is it?
<Infinite_Recursion> a couple of line
<Infinite_Recursion> wait
<cromlech> url?
<Infinite_Recursion> .DataEntry input{    width:100%;} Input.fancyButton{       width:10px;}
<Absolute0> now i remember its CLONECD!!!
<Infinite_Recursion> they both apply to a button inside a table
<Infinite_Recursion> table has class="DataEntry"
<Infinite_Recursion> and button has class = "fancyButton"
<cromlech> ok
<Infinite_Recursion> so I have a descendant selector and a class selector
<Infinite_Recursion> which prevails?
<cromlech> I think they will have the same specificity, so the one appearing last in your stylesheet will prevail
<Infinite_Recursion> that is what is happenning but i cannot explain it
<Infinite_Recursion> how do u get the specificity?
<Infinite_Recursion> I read that the specificity of descndant selectors are less specific than class selectors
<cromlech> Infinite_Recursion: kinda
<Infinite_Recursion> what do u mean kinda
<cromlech> element selectors have less specificity than classes
<cromlech> but both your selectors include one element and one class
<cromlech> this gives you specificity on both selectors: 0,0,1,1
<Infinite_Recursion> yeah
<Infinite_Recursion> 11 for both
<cromlech> 0 (not inline style), 0 (no id's), 1 (one class), 1 (one element)
<Infinite_Recursion> i read that
<cromlech> ok
<Infinite_Recursion> but u think if i add another element will it make a diff?
<cromlech> it sure will
<cromlech> form input.fancyButton will always prevail over .DataEntry input for instance
<cromlech> since form input.fancyButton has 0,0,1,2 and .DataEntry input has 0,0,1,1
<Infinite_Recursion> ok check this
<Infinite_Recursion> .DataEntry input, select{    width:100%;} Input.fancyButton{       width:10px;} 
<Ro--> hELLO
<Infinite_Recursion> who wins?
<Ro--> er...
<cromlech> Ro--: hi!
<cromlech> Infinite_Recursion: for the input.fancyButton? Whichever comes last in your stylesheet
<Infinite_Recursion> why
<Infinite_Recursion> u just said that if i add an element then specificity increases
<Infinite_Recursion> i added select
<Infinite_Recursion> so dataentry wins
<Infinite_Recursion> right?
<cromlech> because they both have the same specificity. adding ", select" is just adding another selector, not adding to the current selectors 
  specificity
<Infinite_Recursion> how then i can add to the same selector
<cromlech> Infinite_Recursion: you have listed a set of rools for two distinct selectors in your example
<Infinite_Recursion> ?
<Ro--> {width:10px !important} takes all.
<cromlech> well, yeah, that too
<cromlech> Infinite_Recursion: .DataEntry form input will solve your problem as well
<Infinite_Recursion> u mean no comma
<Infinite_Recursion> ?
<cromlech> this way you're adding an element to your selector (thus increasing it's specificity). The way you did it was just to add another 
  selector
<cromlech> no comma, yes
<Infinite_Recursion> ok how abt this
<Infinite_Recursion> .DataEntry input select{    width:100%;} Input.fancyButton{       width:10px;} 
<cromlech> why would you stick a select box inside an input?
<Infinite_Recursion> does what i wrote mean inside?
<Infinite_Recursion> oooooooooooooooooh
<Infinite_Recursion> ok
<Infinite_Recursion> it is a bit clearer now
<cromlech> form input  mens (find all  that resides inside an input that again resides inside a form
<Infinite_Recursion> oook
<Infinite_Recursion> that explains alot
<Infinite_Recursion> just one more thing
<cromlech> form input,  {color: red;} breakes up to this: form input { color: red; }  {color: red} (ie TWO 
  distinct selectors)
<Infinite_Recursion> we agreed before that contextual selectors are less specific than any class selector
<Infinite_Recursion> right?
<cromlech> right
<Infinite_Recursion> so where does that rule come into play?
<cromlech> how do you mean?
<Infinite_Recursion> i mean we used the 1 0 rule to calc spec
<Infinite_Recursion> not this rule
<Infinite_Recursion> where does that rule play a role
<Infinite_Recursion> ?
<cromlech> I don't understand...
<Ro--> what exactly was the question?
<Infinite_Recursion> i mean what difference does it make if contextual < class if we use the  1 0 rule?
<cromlech> ah
<cromlech> it makes the selectors specificity 0,0,1,2 - that will prevail over 0,0,1,1
<cromlech> they originally had the same specificity, so anything you add to one of them will make that one the prevailing one
<cromlech> Infinite_Recursion: was that a good enough answer to your question?
<cromlech> I need a cigarette, be back soon
<Infinite_Recursion> where did the 2 come from
<Infinite_Recursion> i am sorry i was away
<Infinite_Recursion> i mean .DataEntry input is 1 1
<Infinite_Recursion> not 1 2
<Infinite_Recursion> 0, 0, 1, 2 where did it come from?
<Infinite_Recursion> and also if we say input.fancyButton that will make 0 0 2 1 which seems to me even more specific than 0 0 1 2
<Infinite_Recursion> so except for the very specific case of 0 0 1 1  class is > context is this a correct conclusion?

References:

Till next time...