Ordering css styling within a given class

[ElMiko]

Honestly, this seems like the first question I should have asked when I started doing this...

But does it matter what order styles appear within a given class?

Specifically I'm thinking about things like font-size and margins, but i'm sure there are other similar examples. If you're using em units, the height of a margin will scale based on the font size. But I thought that html is read top to bottom, so in theory the code

p {
font-size: 2em;
margin-top: 1em;
}

should look diffierent than

p {
margin-top: 1em;
font-size: 2em;
}

since the first case has a margin that is equal to one line of 2em text (as font-size has been previously established), whereas I would think that the second has a margin that equal to 1em text as it hasn't "read" that the text is supposed to be 2em yet, and by the time it does it's already defined the height of the margin.

But it appears that NOT what happens; they both tend to look the same. Am I misuderstanding the way top-to-bottom works in HTML?

[DNSB]

As far as I understand, classes are evaluated top to bottom in the stylesheet but within a class, they are evaluated as a group. You may to take a look at how specificity is calculated.

[JSWolf]

Originally Posted by ElMiko

Honestly, this seems like the first question I should have asked when I started doing this...

But does it matter what order styles appear within a given class?

Specifically I'm thinking about things like font-size and margins, but i'm sure there are other similar examples. If you're using em units, the height of a margin will scale based on the font size. But I thought that html is read top to bottom, so in theory the code

p {
font-size: 2em;
margin-top: 1em;
}

should look diffierent than

p {
margin-top: 1em;
font-size: 2em;
}

since the first case has a margin that is equal to one line of 2em text (as font-size has been previously established), whereas I would think that the second has a margin that equal to 1em text as it hasn't "read" that the text is supposed to be 2em yet, and by the time it does it's already defined the height of the margin.

But it appears that NOT what happens; they both tend to look the same. Am I misuderstanding the way top-to-bottom works in HTML?

Both CSS are identical in what they do. CSS classes are read from top to bottom but in each class what's there is taken as a group.

[slm]

Changing font-size doesn't change the size of 1em. So your margin:1em line always has the same meaning, no matter what you do to font-size and no matter when it is read.

[ElMiko]

@slm - Either I'm misunderstanding the intent of your post, or you are mistaken. Font-size does affect the size of the margin. The 1em of the margin will be in the context of the font-size. So, for example,

the margin in

p{
font-size: 2em;
margin-top: 1em;
}

will be twice as tall as the margin in

p{
font-size: 1em;
margin-top: 1em;
}

despite the margin value staying nominally the same.

@JSWolf, DNSB - Gotcha. So, witihin a class, margins and padding will always be derived from the font-size, even if the font size isn't technically declared until the "end" of the style list for that class? I'll see if i can unpack the specificity rules, but they may be over my head.

[DNSB]

Also remember if you nest font sizes, unless you specify them in rem (CSS3), the effect may not be quite what you are expecting.

That is if you have something like the following:

<h3 class="chapnum">Chapter number<br/><br/><span class="smallc">The End of All Dreams</span></h3>

.chapnum {
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1.5em;
  page-break-after: avoid;
  text-align: center;
  font-weight: bold;
}


.smallc {
  font-size: 0.75em;
}

The first part will be have a font size of 2em and the second part in the span will have a font size of 2 x .75em or 1.5em.