"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
