about the order of rules when override

[tonyjoh...@gmail.com]

Hello!

I read a book and the book says
"The order in which rules appear within the style sheet,
however, does not matter"

This can be understood in two different ways.
The example that the book has is the following and this works in the way that h3
override font-weight to normal
<style>
h1,h2,h3
{
color:#000000;
background-color:#FFFFFF;
font-family:Arial, verdena, sans-sarif;
font-weight:bold;
}

h3
{
font-weight:normal;
}
</style>

Just for testing what the book says "The order in which rules appear within the style sheet, however, does not matter"
I change the order of the two rules in the internal style declarations just to verify the effect and now the override h3 font-weight:normal does not apply.

So I think what the book want to say it that it doesn't matter in what order you write the rules within a style rule.

//Tony

[Jukka K. Korpela]

2013-04-28 14:34, tonyjoh...@gmail.com wrote:

> I read a book and the book says
> "The order in which rules appear within the style sheet,
> however, does not matter"

You should cite the book by name and page. The odds are that the book
is just poor, and you would help others to avoid it. But you may have
misread, or you may have failed to note a constraint in the statement
from which you quoted a part.

> This can be understood in two different ways.

I don't see how. What it says is simple and wrong, as a general
statement. Of course, there are some (actually, many) situations where
the order cane be changed without affecting the meaning and result, the
obvious intent of the statement is to present a general rule. It would
be equally wrong to say that in English, the order of words in a
sentence does not matter.

> The example that the book has is the following and this works in the way that h3
> override font-weight to normal
> <style>
> h1,h2,h3
> {
> color:#000000;
> background-color:#FFFFFF;
> font-family:Arial, verdena, sans-sarif;
> font-weight:bold;
> }
>
> h3
> {
> font-weight:normal;
> }
> </style>

Does the book really have this example in the context of the statement

"The order in which rules appear within the style sheet, however, does

not matter"?

> Just for testing what the book says "The order in which rules appear
> within the style sheet, however, does not matter" I change the order
> of the two rules in the internal style declarations just to verify
> the effect and now the override h3 font-weight:normal does not apply.

Right, because other things being equal, the latter declaration wins,
and here other things are equal (the same selector h3, the same style
sheet).

> So I think what the book want to say it that it doesn't matter
> in what order you write the rules within a style rule.

I would not make guesses of this without seeing the book, but the
wording clearly says "rules", not "declarations".

Besides, even within a rule, the order of declarations may matter:

h1 {
font-weight: bold;
font-weight: normal;
}

Changing the order here surely changes the meaning.

Within a rule, the mutual order of declarations that apply to *different
properties* does not matter. (There's a pitfall here: shorthand
notations may confuse here, too. For example, in the rule p {
line-height: 1.3; font: 100% Arial } the order is significant, since the
font shorthand sets line-height, too.)

But I don't see much reason to state this. Can there be serious doubt
about it? Maybe if we have

div.doo { margin-left: 2em; font-size: 24pt }

(using the pt unit just to make point [no pun intended] simpler). Then
it is relevant to know is that the meaning of "em" is determined by the
font-size declaration (assuming it is not overridden in the cascade),
even though that declaration appears later in the rule. But this follows
from general principles, and the font-size declaration could even be in
a later rule, or in another style sheet.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

[Jonathan N. Little]

The book is either wrong or you are misunderstanding what it says. Rule
order in a stylesheet does if the rules have the same specificity.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Order does matter</title>
<style type="text/css">
h2.special {color: green}
h1,h2,h3 { color: red; }
h2 { color: blue; }
</style>
</head>
<body>
<h1>Will be red</h1>
<h2>Will be blue because rule follows the red rule</h2>
<h2 class="special">Will be green because rule has higher specificity
with "class" attribute</h2>
<h3>Will be red, because general rule applies</h3>
</body>
</html>


--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com

[Danny]

To Tony

check on CSS Specificity

http://css-tricks.com/specifics-on-css-specificity/