Section 14: Style Sheets

--- tags: HTML4 SPEC --- # Section 14: Style Sheets - [document link](https://www.w3.org/TR/html401/present/styles.html) ## 14.1 Introduction to style sheets - Style sheets represent a major breakthrough for Web page designers, expanding their ability to improve the appearance of their pages. - Style sheets make it easy to specify the amount of white space between text lines, the amount lines are indented, the colors used for the text and the backgrounds, the font size and style, and a host of other details. ## 14.2 Adding style to HTML ### 14.2.1 Setting the default style sheet language - Authors must specify the style sheet language of style information associated with an HTML document. ```htmlembedded= <META http-equiv="Content-Style-Type" content="text/css"> ``` => The above META declaration is equivalent to the HTTP header: **Content-Style-Type: text/css** ### 14.2.2 Inline style information #### style = *style* [CN] - This attribute specifies style information for the current element. - CSS example: ```htmlembedded= <P style="font-size: 12pt; color: fuchsia">Aren't style sheets wonderful? ``` <P style="font-size: 12pt; color: brown;">Aren't style sheets wonderful? ### 14.2.3 Header style information: the `STYLE` element ``` <!ELEMENT STYLE - - %StyleSheet -- style info --> <!ATTLIST STYLE %i18n; -- lang, dir, for use with title -- type %ContentType; #REQUIRED -- content type of style language -- media %MediaDesc; #IMPLIED -- designed for use with these media -- title %Text; #IMPLIED -- advisory title -- > ``` Start tag: **required**, End tag: **required** *Attribute definitions*: - type = *content-type* [CI] This attribute specifies the style sheet language of the element's contents and overrides the default style sheet language. The style sheet language is specified as a content type (e.g., "text/css"). Authors must supply a value for this attribute; there is no default value for this attribute. - media = *media-descriptors* [CI] This attribute specifies the intended destination medium for style information. It may be a single media descriptor or a comma-separated list. The default value for this attribute is "screen". *Attributes defined elsewhere:* - lang (language information), dir (text direction) title (element title) - The `STYLE` element allows authors to put style sheet rules in the head of the document. HTML permits any number of `STYLE` elements in the `HEAD` section of a document. #### Examples 1. puts a border around every `H1` element in the document and centers it on the page. ```htmlembedded= <HEAD> <STYLE type="text/css"> H1 {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> ``` 2. only apply to `H1` elements of a specific class. ```htmlembedded= <HEAD> <STYLE type="text/css"> H1.myclass {border-width: 1; border: solid; text-align: center} </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is affected by our style </H1> <H1> This one is not affected by our style </H1> </BODY> ``` 3. to a single instance of H1, set the id attribute. ```htmlembedded= <HEAD> <STYLE type="text/css"> #myid {border-width: 1; border: solid; text-align: center;} </STYLE> </HEAD> <BODY> <H1 class="myclass"> This H1 is not affected </H1> <H1 id="myid"> This H1 is affected by style </H1> <H1> This H1 is not affected </H1> </BODY> ``` ### 14.2.4 Media types - HTML allows authors to design documents with different the characteristics of the media. (e.g., graphical displays, television screens, handheld devices, speech-based browsers, braille-based tactile devices, etc.). By specifying the media attribute, authors allow user agents to load and apply style sheets selectively. ```htmlembedded= <HEAD> <STYLE type="text/css" media="projection"> H1 { color: blue} </STYLE> <STYLE type="text/css" media="print"> H1 { text-align: center } </STYLE> ``` - Media control takes advantage that user agents can save time by retrieving from the network only those style sheets that apply to the current device. ## 14.3 External style sheets - This offers several benefits: 1. Authors and Web site managers may share style sheets across a number of documents (and sites). 2. Authors may change the style sheet without requiring modifications to the document. 3. User agents may load style sheets selectively (based on media descriptions). ### 14.3.1 Preferred and alternate style sheets - HTML allows authors to associate any number of external style sheets with a document. The style sheet language defines how multiple external style sheets interact (for example, the CSS "cascade" rules). - Authors may specify a number of mutually exclusive style sheets called **alternate style sheets**. Users may select their favorite among these depending on their preferences. User agents should allow users to select from alternate style sheets. - The author may specify that one of the alternates is a **preferred style sheet**. User agents should apply the author's preferred style sheet unless the user has selected a different alternate. - Authors may also specify **persistent style sheets** that user agents **must apply** in addition to any alternate style sheet. ### 14.3.2 Specifying external style sheets 1. use `LINK` element - a persistent style sheet ```htmlembedded=  <LINK href="mystyle.css" rel="stylesheet" type="text/css"> ``` - a preferred style sheet ```htmlembedded=  <LINK href="mystyle.css" title="compact" rel="stylesheet" type="text/css"> ``` - an alternate style sheet ```htmlembedded=  <LINK href="mystyle.css" title="Medium" rel="alternate stylesheet" type="text/css"> ``` 2. use `META` element to set the document's preferred style sheet. ```htmlembedded=  <META http-equiv="Default-Style" content="compact"> ``` the example above is equivalent to HTTP headers: `Default-Style: "compact"` - **NOTE**: 1. If two or more `META` declarations or HTTP headers specify the preferred style sheet, **the last one takes precedence.** 2. If two or more `LINK` elements specify a preferred style sheet, **the first one takes precedence**. 3. **Preferred** style sheets specified with `META` or HTTP headers have precedence over those specified with the `LINK` element. ## 14.4 Cascading style sheets - **Cascading style sheet languages** such as CSS allow style information from several sources to be blended together. ### 14.4.1 Media-dependent cascades - Both `LINK` and `STYLE` may be used with the media attribute. The user agent is then responsible for filtering out those style sheets that do not apply to the current medium. ```htmlembedded= <LINK rel="stylesheet" media="aural" href="corporate-aural.css" type="text/css"> <LINK rel="stylesheet" media="screen" href="corporate-screen.css" type="text/css"> <LINK rel="stylesheet" media="print" href="corporate-print.css" type="text/css"> <LINK rel="stylesheet" href="techreport.css" type="text/css"> <STYLE media="screen, print" type="text/css"> p.special { color: rgb(230, 100, 180) } </STYLE> ``` ### 14.4.2 Inheritance and cascading - The **cascading mechanism** is used when a number of style rules all apply directly to an element. The mechanism allows the user agent to sort the rules by specificity, to determine which rule to apply. - If no rule can be found, the next step depends on whether the style property can be inherited or not. Not all properties can be inherited. ## 14.5 Hiding style data from user agents ```htmlembedded= <STYLE type="text/css">  </STYLE> ``` ### 14.6 Linking to style sheets with HTTP headers - **This section only applies to user agents conforming to versions of HTTP that define a Link header field**. Note that HTTP 1.1 does not include a Link header field (refer to section 19.6.3). - The HTTP *Link* header has the same effect as a `LINK` element with the same attributes and values. In HTTP header: `Link: <http://www.acme.com/corporate.css>; REL=stylesheet ` corresponds to `<LINK rel="stylesheet" href="http://www.acme.com/corporate.css">`