Style Works in Mysterious Ways - An Inquiry Into Values - HTML with Style

An Inquiry Into Values

Style Works in Mysterious Ways

We have already seen several ways to specify CSS rules that apply to elements: We can stick them in a STYLE attribute attached to the element, bunch them into a ruleset and make a style sheet embedded in the document using the STYLE element, or shove the style sheet in an external file and link to it using the LINK element. Here's a demonstration to refresh your memory:

<HEAD>
<TITLE>An HTML Document</TITLE>
<!-- Links to external style sheets -->
<LINK REL="stylesheet" HREF="/global.css" 
      TITLE="Site-wide Style Sheet">
<LINK REL="stylesheet" HREF="layout.css" 
      TITLE="Page Layout">
<!-- Embedded Style Sheet -->
<STYLE TYPE="text/css" TITLE="Special Declarations">
<!--
P.special {
 font: bold italic 16pt Arial, Helvetica, sans-serif;
 text-indent: 0.5cm;
}
H1#crazy {
 text-align: right;
}
-->
</STYLE>
</HEAD>
<BODY>
<H1 ID="crazy">This is a crazy heading</H1>
<!-- Inline style declaration -->
<P CLASS="special" STYLE="text-indent: -1cm">A special 
paragraph with hanging indent.A special paragraph with 
hanging indent.A special paragraph with hanging indent.A 
special paragraph with hanging indent.A special paragraph 
with hanging indent.A special paragraph with hanging 
indent.A special paragraph with hanging indent.</P>

The above document is linked to two external style sheets, contains an embedded style sheet and even has an inline style declaration. The first thing you'll notice is that thare are at least two rules setting the text-indent property that apply to the P element. One, in the embedded style sheet, says that the indent should be half a centimeter; the other one, in the inline declaration, says it should be -1 centimeter. There might even be more such rules in the external style sheets. What should the user agent pick when rendering the paragraph?

User Style Sheets

All of the methods used above can be used by document authors to specify styles that apply to elements. As if that wasn't enough of a mess, the browser might (and should) offer a way for the user to specify his own style sheet that applies to all documents. Why would the user want to do this? For one thing, he might be very fond of magenta text on a teal background. On a more realistic note, maybe he likes headings to be centered. Or maybe he's vision-impaired and wants huge fonts in order to be able to read the text clearly. All of these and more are possible.

At this time, only Internet Explorer allows users to specify a user style sheet, but the capability is part of the specification. As more browsers begin to support CSS correctly, everyone could have his own style sheet. This is both a good and a bad thing. It is a good thing because it gives the user a lot of control over the appearance of the documents he views. It is bad because it is prone to abuse; if a user decides that he wants to lay out documents from bottom to top, it could probably wreak havoc on an author's plans for a columnar layout when user and author style sheets are combined. How will they be combined? Before we go into that, let me tell you of a few more ways a style sheet can creep into your document....

User Agent Style Sheets

The User Agent style sheet is a style sheet defined by the user agent (i.e. browser). This is the default rendering for this user agent, and depends entirely on the greater wisdom of the people who made the user agent. It represents the default rendering of a document; what it will look like if no author or user styles are specified. This rendering might also be affected by outside factors, such as the availability of fonts (obviously, the user agent style sheet can't specify using Garamond font for headings if a Garamond font doesn't exist in the operating system!) or the capabilities of the display (unfortunately, even 16-color displays can display teal).

Neither Explorer nor Navigator have a user agent style sheet per se, but their default rendering can be considered to be a user agent style sheet. This rendering can also be slightly altered in both browsers by changing certain preferences (for fonts, colors, link underlining etc.), which makes it more of a user style sheet as well.

`@import` rules

In Tutorial 6, when I analyzed CSS syntax, I mentioned at-rules. The most important type of at-rule is the @import at-rule. This at-rule is used like this:

@import url("https://www.foo.org/bar.css");
@import "https://www.bar.com/style/baz.css");

The two types of syntax (with the url() bit or without) are equivalent and are used to import another CSS style sheet. As you probably have already noticed, the stuff inside the quotes is a URL pointing to this style sheet; it can be an absolute or relative URL. @import rules must be placed at the beginning of a style sheet, preceeded only by comments.

Why use the @import rule when you can use multiple LINK elements instead? Well, that's because style sheets imported using @import cascade differently.

URL: https://www.webreference.com/html/tutorial8/
Created: Oct 30, 1998
Revised: Nov 4, 1998