External/internal styles

[Christopher Benson-Manica]

Just FMI, if an external stylesheet is linked to a page (with <link>),
will subsequent <style> tags override the values in the external
stylesheet?

--
Christopher Benson-Manica | I *should* know what I'm talking about - if I
ataru(at)cyberspace.org | don't, I need to know. Flames welcome.

[Peter Foti]

"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in message
news:bq**********@chessie.cirr.com...

Just FMI, if an external stylesheet is linked to a page (with <link>),
will subsequent <style> tags override the values in the external
stylesheet?

They will add to the styles, and if you have conflicting styles between the
external and internal style definitions, whichever is defined last will get
priority. So if your external file includes:

span { font-weight: 600; }

and your internal styles include:

span { font-weight: 100; }

then if you linked stylesheet was included before the internal style
definition, the span font-weight will be 100. If the linked stylesheet was
included after the internal style definition, the span font-weight will be
600.

Regards,
Peter Foti

[Stan Brown]

In article <bq**********@chessie.cirr.com> in
comp.infosystems.www.authoring.stylesheets, Christopher Benson-
Manica <at***@nospam.cyberspace.org> wrote:

Just FMI, if an external stylesheet is linked to a page (with <link>),
will subsequent <style> tags override the values in the external
stylesheet?

All else being equal, yes.

http://www.w3.org/TR/REC-CSS2/cascade.html#cascade

--
Stan Brown, Oak Road Systems, Cortland County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2 spec: http://www.w3.org/TR/REC-CSS2/
2.1 changes: http://www.w3.org/TR/CSS21/changes.html
validator: http://jigsaw.w3.org/css-validator/

[Bonnie Granat]

"Peter Foti" <pe****@systolicnetworks.com> wrote in message
news:vs************@corp.supernews.com...

"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in message
news:bq**********@chessie.cirr.com...

Just FMI, if an external stylesheet is linked to a page (with <link>),
will subsequent <style> tags override the values in the external
stylesheet?
They will add to the styles, and if you have conflicting styles between

the external and internal style definitions, whichever is defined last will get priority. So if your external file includes:

span { font-weight: 600; }

and your internal styles include:

span { font-weight: 100; }

then if you linked stylesheet was included before the internal style
definition, the span font-weight will be 100. If the linked stylesheet was included after the internal style definition, the span font-weight will be
600.

Could you please explain what you mean by "before the internal style
definition" and "after ...."? And what do you mean by "included"?

Thanks.

I thought I understood that the answer to the poster's question was in the
name, "Cascading Style Sheets," and that the lowest style (from external
style sheet to inline style) was the one that governed the display of a
particular item. But I really don't understand your reference to before and
after.

--

Bonnie Granat
http://www.granatedit.com

[Christoph Paeper]

*Bonnie Granat* <bg*****@granatedit.com>:

Could you please explain what you mean by "before the internal style
definition" and "after ...."?
Just that, physical order. If you can call it "physical" in code.
You can either have

<link rel="stylesheet" type="text/css" href="external.file">
<style type="text/css">...</style>,

i.e. 'link' _before_ internal style, or

<style type="text/css">...</style>
<link rel="stylesheet" type="text/css" href="external.file">,

i.e. 'link' _after_ internal style. Of course you can have multiple 'style'
and/or 'link' elements in whatever order you want.

For many selectors it won't matter, but if you've got two with equal
specifity--they don't need to be exactly the same--the latter specified
wins, no matter where it was defined. You can even throw @import stylesheets
in, the principle doesn't change.

The algorithm in <http://www.w3.org/TR/CSS21/cascade.html#cascading-order>
is pretty clear in my opinion, even a little bit cleare than the CSS 2.0
version. Specifity calculation rules are in 6.4.3.
And what do you mean by "included"?
In the (HTML) code.
I thought I understood that the answer to the poster's question was in the
name, "Cascading Style Sheets," and that the lowest style (from external
style sheet to inline style) was the one that governed the display of a
particular item.

Only the 'style' attribute is special the rest of the author styles is
thrown together, keeping code appearance order unchanged. The rest is weight
('!important' or not?) and specifity (what selector?).

--
"Right way turning, Listen we are learning.
Head's full of noise, Chicken's got no choice.
Heads are rollin', Chicken blood is stolen.
The rest of the chicken wants a picke-nicken" Guano Apes - We use the Pain

[Peter Foti]

"Bonnie Granat" <bg*****@granatedit.com> wrote in message
news:3f******@andromeda.5sc.net...

"Peter Foti" <pe****@systolicnetworks.com> wrote in message
news:vs************@corp.supernews.com...

"Christopher Benson-Manica" <at***@nospam.cyberspace.org> wrote in message news:bq**********@chessie.cirr.com...

Just FMI, if an external stylesheet is linked to a page (with <link>),
will subsequent <style> tags override the values in the external
stylesheet?
They will add to the styles, and if you have conflicting styles between

the

external and internal style definitions, whichever is defined last will

get

priority. So if your external file includes:

span { font-weight: 600; }

and your internal styles include:

span { font-weight: 100; }

then if you linked stylesheet was included before the internal style
definition, the span font-weight will be 100. If the linked stylesheet

was

included after the internal style definition, the span font-weight will be 600.

Could you please explain what you mean by "before the internal style
definition" and "after ...."? And what do you mean by "included"?

Sure... by "internal", I meant style definitions that are defined in the
head of the document within <style></style>. By "external", I meant styles
that are linked in using <link> (or the @import directive). By "included",
I meant whether the linked in stylesheet came before the internal style
definitions in the document, or after them. Stan Brown's post in this
thread has a good link.
I thought I understood that the answer to the poster's question was in the
name, "Cascading Style Sheets," and that the lowest style (from external
style sheet to inline style) was the one that governed the display of a
particular item. But I really don't understand your reference to before and after.

Your understanding was incorrect. Each style definition gets a weight,
which depends on the import order. For example:

..myclass{ color: red; }
..myclass{ color: green; }

<p class="myclass">This text is green because the last rule had greater
weight</p>

Now, suppose that I put the first definition in an external file
(mystyle.css) and imported it:

@import url(mystyle.css)
..myclass{ color: green; }

The text would still be green because the last definition still has the most
weight. But now if I swap the order:

..myclass{ color: green; }
@import url(mystyle.css)

Now the text would be red, because the last definition is now the one in the
external file.

Hope this helps.
Peter

[Christoph Paeper]

*Peter Foti* <pe****@systolicnetworks.com>:

.myclass{ color: green; }
@import url(mystyle.css)

Although it explains the principle well, this would be invalid syntax if
inside the same 'style' element or CSS file, because @import has to be at
the top.

That means

<style type="text/css">.myclass{ color: green; }
@import url(mystyle.css)</style>

is illegal, while

<style type="text/css">.myclass{ color: green; }</style>
<style type="text/css">@import url(mystyle.css)</style>

and of course

<style type="text/css">@import url(mystyle.css)
.myclass{ color: green; }</style>

are not. IIRC.

--
Arthur: "I really wish I'd listened to what my mother told me when I was young."
Ford: "Why, what did she tell you?"
Arthur: "I don't know, I didn't listen."