css styling

[ricmetal]

so, i've just learned that an element receives it's styling not in the order of the classes in it's class attribute, but in the order in which the classes are listed in the css file (or in-page stylesheet).

let me demonstrate:

.red { background-color:red; }
.black { background-color:black; }

<div class="black red">i am black</div>

is it just me, or does anybody else find this completely retarded?
am i missing something?

[chrishirst]

Originally Posted by ricmetal

so, i've just learned that an element receives it's styling not in the order of the classes in it's class attribute, but in the order in which the classes are listed in the css file (or in-page stylesheet).

let me demonstrate:

.red { background-color:red; }
.black { background-color:black; }

<div class="black red">i am black</div>

is it just me, or does anybody else find this completely retarded?
am i missing something?

No and Yes in that order.

The bit you are missing is how HTML/CSS rendering engines work.

The first operation is to create the document STRUCTURE in the client user agent memory, that is torender the HTML into a memory model, the DOM.

Then the styling is applied as the rules are loaded/read so the last rule to be loaded (top down) takes priority. That is one of the reasons it is called cascading style sheets.

http://www.w3.org/TR/CSS21/cascade.html#cascade

For your case, when you are creating the cascade and you want "red" to take precedence over "black" add the !important modifier to the "red" ruleset.

While it may seem "anally retentive" to read the W3c documentation and specifications on HTML and CSS, it WILL mean that you have a better understanding of how things in HTML and CSS DIFFER from what you may expect when compared to a "real world" analogue, such as the W3c Box model

[ricmetal]

hi chris

i do read the specifications, just haven't gone through all of it nor do i read it from top to bottom.

thanks for the link

regards

[chrishirst]

just haven't gone through all of it nor do i read it from top to bottom.

You should

It can save you many problems when you understand the concepts, rather than trying to figure why it doesn't quite work as expected.

That's where Microsoft go wrong (IE6 & IE7) by using their own real world interpretation rather than applying the W3c concepts exactly as they are specified.

[ricmetal]

it's not that i don't understand the concepts, i figured the concept out (although reading the specifications would save me a whole lot of trouble).

my problem is with the lack of logic behid this concept regarding the class usage. css should aid html, not the other way round. if im typing in html and place a few classes in an element's attribute, it seems more logical that the html element uses the last class added.

either way, i've submitted a post to the w3.org board, see if i can change the way css works not likely, but i'll be the first (probably) to question the inner workings of css.

regards

[Phreaddee]

yeah good luck getting them to change it from "cascading" to not.

its not a problem with the specification, but your implementation of it.

[chrishirst]

my problem is with the lack of logic behid this concept regarding the class usage. css should aid html, not the other way round.

No, no that is not the case

CSS does not "aid" HTML nor is the intention of CSS to do so.
To use a "house" analogue, HTML is the STRUCTURE, the walls, floor and roof.
CSS is merely the paint and wallpaper used to colour or cover up the bare plaster and brickwork.

[ricmetal]

you proved me right, chris.

Originally Posted by chrishirst

HTML is the STRUCTURE, the walls, floor and roof.
CSS is merely the paint and wallpaper used to colour or cover up the bare plaster and brickwork.

CSS makes HTML look good just like paint does with a house. how is that not called aiding?

i know i should implement CSS like it works, but that's just my beef. it's counter-intuitive.


anyway, here's a CSS joke lol

HTML: no, no, i want white walls.
CSS: sorry, the latest paint cans we received were green, so we have to paint the walls green.



regards

[Phreaddee]

HTML: tell the person who bought the green cans he's an idiot. we already had white.
CSS: I know, and I'd be happy to paint the walls white for you, but he seems to think you can have 2 different versions of the same selector and I'm going to be able to guess which one he actually want to use. I assume the latest one he added, what else can I do???
HTML: sounds logical to me.

[ricmetal]

that's my point, CSS should not assume.

CSS: he bought two colors. as i don't know which one to use let's look at the blueprint, instead of being a douche and assuming that the last color i bought is the one to be used.

...

regards