Why is the same property defined twice here?!

[Gary]

Hi i'm exploring a tutorial stylesheet which uses the following code

#header ul li a {

....
line-height: 0.8em !important;
line-height: 1em;
....
}

Can someone tell me why there are two entries for the same property
(line-height) please?

Thankyou

Gary

[Jukka K. Korpela]

Scripsit Gary:

Hi i'm exploring a tutorial stylesheet

Which one? Does it have a URL, or an ISBN?

which uses the following code

#header ul li a {

...
line-height: 0.8em !important;
line-height: 1em;
...
}

Rather strange. Even the first setting is odd - making line height smaller
than font size, and with !important at that. Setting it to the font size, as
in the second declaration, is generally a bad idea, too.

Can someone tell me why there are two entries for the same property
(line-height) please?

What did the author of the tutorial answer when you asked him?

My guess would be that the declarations are as such irrelevant, just
examples (but shouldn't you avoid _idiotic_ examples when writing a
tutorial?), and you, the reader, are supposed to figure out which
declaration "wins" by the cascade rules.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Gary]

On Feb 8, 12:58 pm, "Jukka K. Korpela" <[e-mail]:

Scripsit Gary:

Hi i'm exploring a tutorial stylesheet

Which one? Does it have a URL, or an ISBN?

which uses the following code

#header ul li a {

...
line-height: 0.8em !important;
line-height: 1em;
...
}

Rather strange. Even the first setting is odd - making line height smaller
than font size, and with !important at that. Setting it to the font size, as
in the second declaration, is generally a bad idea, too.

Hi it's an open source tutorial style sheet called Nautica05, but has
little commentary... I've used the css tutorial on html.net and am now
exploring live designs that I like to get a feel for them. Perhaps if
you can spare 5 minutes you would take a look at it for me and tell me
if you are any wiser about why he's done that?

Here is the link to it...http://www.opensourcetemplates.org/templates/
nautica05/Nautica05.zip

Thanks very much,

Gary

Can someone tell me why there are two entries for the same property
(line-height) please?

What did the author of the tutorial answer when you asked him?

My guess would be that the declarations are as such irrelevant, just
examples (but shouldn't you avoid _idiotic_ examples when writing a
tutorial?), and you, the reader, are supposed to figure out which
declaration "wins" by the cascade rules.

--
Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/

[Andy Dingley]

On 8 Feb, 12:41, "Gary" <[e-mail]:

line-height: 0.8em !important;
line-height: 1em;

Can someone tell me why there are two entries for the same property
(line-height) please?

They're different rules. Same property, same block (which obviously
implies the same selector). However they have two differences: firstly
one has the "important" keyword added to it, secondly one comes after
the other.

In general, CSS has complicated rules for the cascade and the
"specificity" of the various selectors.
You need to read (and carefully!) the CSS spec for this
http://www.w3.org/TR/CSS21/cascade.html

This case is a bit simpler though, because specificity and origin is
identical for these two rule as they're the same selector in the same
stylesheet. That just leaves the importance and the order to worry
about.

Usually the last rule specified (by order) wins and duplicate rules
simply over-write their predecessors. However this is the very last
CSS ordering step and is of low priority. The important declaration is
of much higher priority (even beating selector specificity) and is of
comparable priority to its origin from either the user or author
stylesheets (the relative prioritisation of these has varied over the
history of CSS). In this case, the first rule simply trumps the later
rule in all cases.

So the 2nd rule is demonstrably superfluous. Hopefully the purpose of
the "tutorial" was to encourage you to spot this, otherwise it's not a
good tutorial to be leaving such dross lying around in it. I _hope_
that the author didn't misunderstand things and thought that the 2nd
rule could _ever_ win, just because it came later?
Line-height should have an initial default of about 1.2. Setting it to
less than 1 is certainly perverse. Although some logos do it
justifiably, I can't imagine it being a good idea in a list of links.
In practice, just leave the damned thing alone, you'll only break
stuff!

It's also a good idea to set line-height as a number (e.g. 1.2) rather
than in a length unit such as ems. This avoids some problems that
might arise if the now-fixed line-height gets inherited by an element
with a different.font size.

[Gary]

Thankyou im just starting out with css and it's a steep learning
curve. I will re read the advice and digest it slowly.

One question however is your comment relating to ems - i have read on
this (as i hadn't encountered them before this stylesheet) and wrongly
or rightly concluded that they were very powerful for just the fact
you mentioned as being there weakness - i.e. their inheritance of
parant element font size.

I thought that by using ems the designer had ensured a 'fluid' design,
is this a bad practice? or have i mis understood this?

Thanks,

Gary.

On Feb 8, 3:25 pm, "Andy Dingley" <[e-mail]:

On 8 Feb, 12:41, "Gary" <[e-mail]:

line-height: 0.8em !important;
line-height: 1em;
Can someone tell me why there are two entries for the same property
(line-height) please?

They're different rules. Same property, same block (which obviously
implies the same selector). However they have two differences: firstly
one has the "important" keyword added to it, secondly one comes after
the other.

In general, CSS has complicated rules for the cascade and the
"specificity" of the various selectors.
You need to read (and carefully!) the CSS spec for thishttp://www.w3.org/TR/CSS21/cascade.html

This case is a bit simpler though, because specificity and origin is
identical for these two rule as they're the same selector in the same
stylesheet. That just leaves the importance and the order to worry
about.

Usually the last rule specified (by order) wins and duplicate rules
simply over-write their predecessors. However this is the very last
CSS ordering step and is of low priority. The important declaration is
of much higher priority (even beating selector specificity) and is of
comparable priority to its origin from either the user or author
stylesheets (the relative prioritisation of these has varied over the
history of CSS). In this case, the first rule simply trumps the later
rule in all cases.

So the 2nd rule is demonstrably superfluous. Hopefully the purpose of
the "tutorial" was to encourage you to spot this, otherwise it's not a
good tutorial to be leaving such dross lying around in it. I _hope_
that the author didn't misunderstand things and thought that the 2nd
rule could _ever_ win, just because it came later?

Line-height should have an initial default of about 1.2. Setting it to
less than 1 is certainly perverse. Although some logos do it
justifiably, I can't imagine it being a good idea in a list of links.
In practice, just leave the damned thing alone, you'll only break
stuff!

It's also a good idea to set line-height as a number (e.g. 1.2) rather
than in a length unit such as ems. This avoids some problems that
might arise if the now-fixed line-height gets inherited by an element
with a different.font size.

[Jukka K. Korpela]

Scripsit Gary:

Thankyou im just starting out with css and it's a steep learning
curve. I will re read the advice and digest it slowly.

Please google for "how do I quote correctly in Usenet" and fix your posting
habits accordingly.

One question however is your comment relating to ems -

Which comment? You should have quoted that very comment, and only it, to
establish context for what you are writing about.

i have read on
this (as i hadn't encountered them before this stylesheet) and wrongly
or rightly concluded that they were very powerful for just the fact
you mentioned as being there weakness - i.e. their inheritance of
parant element font size.

You're wrong. Inheritance is not the issue in using em. As a rule of thumb,
_everyone_ gets inheritance all wrong when starting to learn CSS and gets
more and more confused with it. The only cure is to get a decent textbook
and read it.

The reason for using line-height: 1.2 rather than line-height: 1.2em is that
for this specific property, 1.2 _means_ by definition the same as 1.2em
_but_ so that if the value is inherited, it is the declared value and not
the computed value that gets inherited. This matters if inner elements have
a different font size.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

[Andy Dingley]

On 8 Feb, 15:37, "Gary" <[e-mail]:

I thought that by using ems the designer had ensured a 'fluid' design,

It's a good and fluid practice on almost everything except line-
height !

If you set line-height to ems (maybe 1.2em), then it works fine for
the element where you set it and has the same effect as using 1.2
However on a child element with a different font size (and line-height
not set again) then it will keep the same computed value as before --
which is now inappropriate for the new font-size. Setting it with a
number ratio causes it to be re-calculated from the box's height (i.e.
font size) each time, so it stays in proportion.

http://www.w3.org/TR/CSS21/visudet.h...ef-line-height
As to ems in general though, then yes, it's a good practice to use
them. The only thing better is to not have to set a size (or
especially a position at all) and simply let the renderer work it
out. Give two things a margin if needs be and let them flow, don't
try to set absolute positions on everything through some wrong-headed
notion of "control".

There are also good reasons why you'd use horizontal sizes in pixels
(to work with fixed image sizes) or in percentages (to apportion
columns). In general though, vetical dimensions are better in ems.
Even around images, you can usually work by not setting the height at
all and just letting the renderer work it out. Mixing two length
units for the same direction amongst sibling elemnts can be powerful,
but gets very hard to debug.

[Jukka K. Korpela]

Scripsit Gary:

Hi it's an open source tutorial style sheet called Nautica05,

Sounds confusing - tutorial or template?

Here is the link to it...http://www.opensourcetemplates.org/templates/
nautica05/Nautica05.zip

I'm not that interested in opening zip packages to access something as
simple as a web page template, but this time I did. Their visual design has
nice ideas, but their CSS implementation for them is rather awkward. The
following should ring some bells:

body {
- -
font: 400 0.7em verdana, arial, sans-serif;
line-height: 170%;
- -
}

Just stay away from them, especially if you are a novice in CSS matters. At
least don't copy their CSS code, even if you decide to try some ideas of
theirs.

The issue with setting the same property twice that you noticed was probably
_unintentional_ mess, caused by sloppy CSS coding (not removing an old
setting when adding a new one to override it) or mixing different people's
CSS code.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/