The term style sheets has become overloaded, with the two common interpretations being XML style sheets (XSL) and CSS. XSLs are essentially a language for transforming an XML file into another XML file; their development was driven by the need for transforming XML data files into XHTML documents that could be laid out and rendered. In contrast, CSS is a language for specifying the visual or otherwise rendering properties of an element, without specifying any transformations. Note, however, XSL has a different functionality than CSS. To understand the relationships and distinctions, note that an XSL document could specify a transformation of an XML data file into another XML file; the input and output of an XSL file could be an XHTML file which contains CSS elements and attributes, but does not contain XSL elements. Whereas the XSL is interpreted and processed at the time the XHTML file is generated, the CSS is interpreted and processed when the resulting XHTML file is selected for viewing in (i.e., rendered by) a browser. For more details on the use of XSL(T) see www.w3.org/Style/XSL [XSL]. CSS specify how to display HTML elements. They were added to HTML 4.0 to treat the look and feel of the page in what turned out to be an extensible and scalable approach. CSS information could be embedded in the HTML code or residing in external files. CSS allows multiple style sheets to cascade into one. In summary, although the words style sheets are common component of the names of both XSLT and CSS, with XSLT the focus is on the transform (prior to rendering) whereas with CSS the focus is on rendering (possibly following a transform). 5.5.1 The Driving NeedHTML tags were originally designed to define the content of a document. They were supposed to say "This is a header," "This is a paragraph," "This is a table," by using tags like <h1/> , <p/> , <table/> , and so on. The layout of the document was supposed to be taken care of by the browser, without using any formatting tags. As the two major browsers, Netscape and Microsoft Internet Explorer, continued to add new HTML tags and attributes (like the <font/> tag and the color attribute) to the original HTML specification, it became more and more difficult to create Web sites where the content of HTML documents was clearly separated from the document's presentation layout. To solve this problem, the W3C created the CSS, which is supported by both Netscape and Microsoft Internet Explorer. The information conveyed by the CSS define how elements are displayed, just like the now deprecated font tag and the color attribute. Styles are normally saved in files external to HTML documents. External style sheets enable changing the appearance and layout of a group of pages by editing a single shared CSS document. CSS was a breakthrough in Web design because it allowed developers to control the style and layout of multiple pages at once. Before the advent of CSS, changing the font or color would require editing the entire set of documents, one by one, modifying each document in multiple locations. Using a single CSS file, one can define a style for each HTML element and apply it to as many pages as needed by creating a reference from each of the pages to the shared CSS file. Implementing a global change requires simply changing the shared CSS file, and all elements in all documents referring to this style sheet are rendered using the modified style, as if they were updated automatically. 5.5.2 Style Insertion and CascadingCSS allow style information to be specified in many ways. Styles can be specified inside a single HTML element (in-line style) inside the <head/> element of an HTML page (Internal) or in an external CSS file. Further, multiple external style sheets can be referenced inside a single HTML document. Which style will be used when there is more than one style specified for an HTML element? Generally speaking, all the styles will cascade into a new virtual style sheet by the following rules: In-line style inside <html/> element are of the highest priority. The next priority are the internal style sheets specified within the <head /> element. The next priority is the external style sheet, and finally, for those cases which none of these three resolve to a specific style the browsers default style sheet applies. In other words, an in-line style will override every style declared inside the <head /> element, which in turn will override any external style sheet, which in turn overrides the browser default style attributes. 5.5.2.1 In-line StyleAn in-line style loses many of the advantages of style sheets by mixing content with presentation. This method should only be used when a style is to be applied to a specific occurrence of an element. The style attribute of that element is used to specify the in-line style. The style attribute can contain any CSS property. The following example below shows how to change the color and the left margin of a paragraph: <p style="color:sienna; margin-left:20px">A paragraph.</p> 5.5.2.2 Internal StyleAn internal style sheet should be used in documents that have style which is different from other styles in a group of pages or an iTV application. It is specified explicitly in the head section by using the <style/> element as depicted in Example 5.17. Example 5.17 An internal style.<head> <style type="text/css"> hr {color: sienna} p {margin-left: 20px} body {background-image: url(/books/3/41/1/html/2/images/back40.gif)} </style> </head> Browsers are typically designed to ignore unknown namespaces, tags, elements within them, as well as their unsupported attributes. This means that if <style/> is unsupported then it is ignored. Similarly, any unsupported attributes of the CSS specifications are ignored. 5.5.2.3 External StyleAn external style sheet, typically selected from a library of external styles, is ideal when the style is applied to numerous pages. To apply an external style sheet, each page must link to the style sheet using the <link/> element, which must be placed inside the head section: In Example 5.18, upon rendering, the browser will read the style definitions from the file mystyle.css, and format the document according to it. Example 5.18 A reference to an external style sheet.<head> <link rel="stylesheet" type="text/css" href="mystyle.css" /> </head> An external style sheet can be written in any text editor, but it should be saved with a .css extension. The file should not contain any HTML tags. An example of an external style sheet file is shown in Example 5.19. Example 5.19 An external style sheet.hr {color: sienna} p {margin-left: 20px} body {background-image: url(/books/3/41/1/html/2/images/back40.gif)} 5.5.3 CascadingOnce a browser has parsed a document and constructed a document tree, e.g., DOM, it must assign, for every element in the tree, a value to every property that applies to the target media type. The final value of a property is the result of a three-step calculation: In the first step, the value is determined through specification (the specified value ). Next, it is resolved into an absolute value if necessary (the computed value ). Finally, it is transformed according to the limitations of the local environment (the actual value ). 5.5.4 Media TypesThe @media rule allows different style rules for different media in the same style sheet. For example, the style in Example 5.20 specifies to display a 14 pixels Verdana font on the screen, but upon printing, it uses a 10 pixels Times font. The font-weight is set to bold, both on screen and on paper: The list of all media types supported by CSS2 is given in Table 5.5. Example 5.20 Media based conditioning.<html> <head> <style> @media screen { p.test {font-family:verdana,sans-serif; font-size:14px} } @media print { p.test {font-family:times,serif; font-size:10px} } @media screen,print { p.test {font-weight:bold} } </style> </head> <body> .... </body> </html> Table 5.5. The List of Media Types Specified by CSS2
5.5.5 InheritanceSome values are inherited by the children of an element in the document tree. Each property defines whether it is inherited or not. Suppose there is an H1 element with an emphasizing element ( EM ) inside: <H1>The headline <EM>is</EM> important!</H1> If no color has been assigned to the EM element, the emphasized is will inherit the color of the parent element, so if H1 has the color blue, the EM element will likewise be in blue. To set a default style property for a document, authors may set the property on the root of the document tree. In XHTML, for example, the <html/> or <body/> elements can serve this function. For example, because the color property is inherited, with the code <body /> { color: black; } all descendants of the <body/> element will inherit the color black . Specified percentage values are not inherited; computed values are. Example 5.21 illustrates specifying percentage values, and Example 5.22 applies them. Example 5.21 Specifying percentage values.body { font-size: 10pt } h1 { font-size: 120% } Example 5.22 Applying those percentages.<body> <h1>A <em>large</em> heading</h1> </body> The font-size property for the <h1/> element will have the computed value 12pt (120% times 10pt, the parent's value). Because the computed value of font-size is inherited, the <em/> element will have the computed value 12pt as well. If the browser does not have the 12pt font available, the actual value of font-size for both <h1/> and <em/> might be, for example, 11pt . 5.5.5.1 The Inherit ValueEach property may also have a specified value of inherit , which means that, for a given element, the property takes the same computed value as the property for the element's parent. The inherited value, which is normally only used as a fallback value, can be strengthened by setting inherit explicitly. In Example 5.23 the color and background properties are set on the <body/> element. On all other elements, the color value will be inherited and the background will be transparent. If these rules are part of the user 's style sheet, black text on a white background will be enforced throughout the document. Example 5.23 Setting the 'color' and 'background' properties on the <body/> element.body { color: black !important; background: white !important; } * { color: inherit !important; background: transparent; } 5.5.6 The @import ruleThe @import rule allows users to import style rules from other style sheets. Any @import rules must precede all rule sets in a style sheet. The @import keyword is followed by the URI of the style sheet to include. A string is also allowed; it will be interpreted as if it had url(...) around it. The following lines are equivalent in meaning and illustrate both @import syntaxes (one with url() and one with a bare string): @import "mystyle.css"; @import url("mystyle.css"); To allow browsers to avoid retrieving resources for unsupported media types, authors may specify media-dependent @import rules. These conditional imports specify comma-separated media types after the URI. 5.5.7 The CascadeStyle sheets may have three different origins: author, user, and browser. The author specifies style sheets for a source document according to the conventions of the document language. For instance, in HTML, style sheets may be included in the document or linked externally. The designer may be able to specify style information for a particular document. For example, the user may specify a file that contains a style sheet or the browser may provide an interface that generates a user (i.e., a developer or a designer) style sheet (or behave as if it did). Conforming browsers apply a default style sheet (or behave as if they do) prior to all other style sheets for a document. A browser's default style sheet should present the elements of the document language in ways that satisfy general presentation expectations for the document language (e.g., for visual browsers, the <em/> element in HTML is presented using an italic font). See "A Sample Style Sheet for HTML 4.0" for a recommended default style sheet for HTML 4.0 documents. The default style sheet may change if system settings are modified by the user (e.g., system colors). However, due to limitations in a browser's internal implementation, it may be impossible to change the values in the default style sheet. Style sheets from these three origins will overlap in scope, and they interact according to the cascade. The CSS cascade assigns a weight to each style rule. When several rules apply, the one with the greatest weight takes precedence. By default, rules in author style sheets have more weight than rules in user style sheets. Precedence is reversed , however, for !important rules. All user and author rules have more weight than rules in the browser's default style sheet. Imported style sheets also cascade and their weight depends on their import order. Rules specified in a given style sheet override rules imported from other style sheets. Imported style sheets can themselves import and override other style sheets, recursively, and the same precedence rules apply. 5.5.7.1 SelectorsCSS uses selectors, which are patterns that match one or more elements (see [CSS-SEL] for CSS2 and CSS3 selectors). A Selector represents a structure. This structure can be used as a condition (e.g., in a CSS rule) that determines which elements a selector matches in the document tree, or as a flat description of the HTML or XML fragment corresponding to that structure. Selectors may range from simple element names to rich contextual representations. Pseudo-ClassesPseudo-classes are used in CSS to add different effects to some selectors, or to a part of some selectors. For example, a link that is active, visited, or unvisited may be displayed in different ways in a CSS-supporting browser, using the example code fragment in Example 5.24. Pseudo-class names are not case-sensitive. In the above example, the a:active code must come after the a:hover code, and the a:hover code must come after a:link and a:visited in the CSS definition in order to be effective. Example 5.24 Pseudo class for the anchor element.a:link {color: #FF0000} /* unvisited link */ a:visited {color: #00FF00} /* visited link */ a:hover {color: #FF00FF} /* mouse over link */ a:active {color: #0000FF} /* selected link */ Pseudo-ElementsPseudo-elements are used in CSS to add different effects to some selectors, or to a part of some selectors. For example, the first-line pseudo-element is used to add special styles to the first line of the text in a selector. The first-line pseudo-element has the properties of font, color, properties, word-spacing, letter-spacing , text-decoration, vertical-align , text-transform, line-height, and clear (see Example 5.25). Example 5.25 The first-line pseudo element.p {font-size: 12pt} p:first-line {color: #0000FF; font-variant: small-caps}<p>Some text that ends up on two or more lines</p> In this example, the browser displays the first line formatted according to the first-line pseudo element. Where the browser breaks the line, depends on the size of the browser window. 5.5.7.2 CSS Selectors and Cascading OrderTo find the value for a specific combination of an element and property, browsers apply the following sort order:
Apart from the !important setting on individual declarations, this strategy gives author style sheets higher weight than those of the reader. It is therefore important that the browser give the user the ability to turn off the influence of a certain style sheet, e.g., through a pull-down menu. 5.5.7.3 !important Rules and Receiver's PreferencesCSS attempts to create a balance of power between content author and receiver (on behalf of the TV viewer) style sheets. By default, rules in an author's style sheet override those in a receiver's style sheet. However, for balance, an !important declaration takes precedence over a normal declaration. Both content author and receiver style sheets may contain !important declarations, and receiver !important rules override content author !important rules. Declaring a shorthand property (e.g., background ) to be !important is equivalent to declaring all of its sub-properties to be !important . The !important CSS feature improves the viewer's experience by enabling receivers to customize the rendering according to the receiver specific requirements (large fonts, color combinations, etc.) for presentation. As an example, consider the two style sheet fragments in Example 5.26. The first rule in the receiver's style sheet in the following example contains an !important declaration, which overrides the corresponding declaration in the content author's styles sheet. The second declaration in the receiver's style sheet will prevail due to being marked !important . However, the third rule in the receiver's style sheet is not !important and will therefore be overridden by the second rule in the author's style sheet. Similarly, the second rule in the author's style sheet will override the third rule in the same style sheet because the second rule is marked !important . 5.5.7.4 Precedence of Non-CSS Presentational HintsThe browser may choose to honor presentational hints from sources other than style sheets, for example the <font/> element or the align attribute in HTML. If so, the non-CSS presentational hints must be translated to the corresponding CSS rules with specificity equal to zero. The rules are assumed to be at the start of the author style sheet and may be overridden by subsequent style sheet rules. Example 5.26 Using !important to override style preferences./* From the receiver's style sheet */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* From the author's style sheet */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt } 5.5.8 The Box ModelThe CSS box model describes the rectangular boxes that are generated for elements in the document tree and laid out according to the visual formatting model. The page box is a special kind of box that is described in detail in the section on paged media. 5.5.8.1 Box DimensionsEach box has a content area (e.g., text, an image, etc.) and optional surrounding padding, border, and margin areas; the size of each area is specified by properties defined next. Figure 5.12 shows how these areas relate and the terminology used to refer to pieces of margin, border, and padding: The margin, border, and padding can be broken down into left, right, top, and bottom segments (e.g., in the diagram, LM for left margin, RP for right padding, TB for top border, etc.). Figure 5.12. The content area box model.
The perimeter of each of the four areas (content, padding, border, and margin) is called an edge , so each box has four edges, each of which may be broken down into a left, right, top, and bottom edge.
The width and height of the content area of a box depend on several factors: whether the element generating the box has the width or height property set, whether the box contains text or other boxes, whether the box is a table, and so on. The box width is given by the sum of the left and right margins, border and padding, and the content width. The height is given by the sum of the top and bottom margins, border and padding, and the content height. Example 5.27 illustrates how margins, padding, and borders interact. The background style of the various areas of a box are determined as follows :
Example 5.27 The interaction between margins and padding.<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Examples of margins, padding, and borders</TITLE> <STYLE type="text/css"> UL { background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* No borders set */ } LI { color: black; /* text color is black */ background: gray; /* Content, padding will be gray */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Note 0px padding right */ list-style: none /* no glyphs before a list item */ /* No borders set */ } LI.withborder { border-style: dashed; border-width: medium; /* sets border width on all sides */ border-color: black; } </STYLE> </HEAD> <BODY> <UL> <LI>First element of list <LI class="withborder">Second element of list is longer to illustrate wrapping. </UL> </BODY> </HTML> 5.5.9 Transforming HTML CSS to XHTML CSSThe CSS Level 2 Recommendation defines style properties that are applied to the parse tree of the HTML or XML document. The following should be addressed on transition from HTML CSS to XHTML CSS:
5.5.10 Properties Reference5.5.10.1 Background PropertiesThe background properties (see Table 5.6) are used for controlling the background color of an element, setting an image as the background, controlling the behavior of that image, repeating a background image vertically or horizontally, and positioning an image on a page. Table 5.6. CSS Background Properties
5.5.10.2 Border PropertiesThe border properties (see Table 5.7) are used for specifying the style, color, and width of an element's border. Prior to the introduction of CSS, tables were used to create borders around a text. The CSS border properties not only avoid the unnecessary use of tables, but introduces the capability to create borders with effects that can be applied to any element. Table 5.7. CSS Border Properties
5.5.10.3 Classification PropertiesThe classification properties (see Table 5.8) are used to control the method by which elements are displayed, set where an image will appear in another element, position an element relative to its normal position, position an element using an absolute value, and control the visibility of an element. Table 5.8. CSS Classification Properties
5.5.10.4 Dimension PropertiesThe dimension properties (see Table 5.9) are used to control the height and width of an element, as well as control line spacing. Table 5.9. CSS Dimension Properties
5.5.10.5 Font PropertiesThe font properties (see Table 5.10) are used for controlling the font used, character spacing, and stretching. Care must be taken to use fonts that are likely to be supported by the target iTV receiver. Table 5.10. CSS Font Properties
5.5.10.6 List PropertiesThe list properties (see Table 5.11) enable controlling the position, image, and marker type for each list item. Table 5.11. CSS List Properties
5.5.10.7 Margin PropertiesThe margin properties (see Table 5.12) define the space around elements. It is possible to use negative values to overlap content. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used to change all of the margins at once. Table 5.12. CSS Margin Properties
5.5.10.8 Padding PropertiesThe padding properties (see Table 5.13) define the space between the element border and the element content. Negative values are not allowed. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property is also created to control multiple sides at once. Table 5.13. CSS Padding Properties
5.5.10.9 Positioning PropertiesThe positioning properties (see Table 5.14) are used to specify the position of an element, possibly floating on top of the main 'root' page. It is also used to specify the shape of an element, place an element behind another, and to specify what should happen when an element's content is too big to fit in a specified area. Table 5.14. CSS Positioning Properties
5.5.10.10 Text PropertiesText properties enable control of the appearance of the text (see Table 5.15). It is possible to change the color of the text, control the space between characters or words, align text, and decorate a text. Table 5.15. CSS Text Properties
5.5.10.11 CSS UnitsCSS support nine different units. With the exception of % , em , and ex which are context sensitive, all are different distance units (see Table 5.16). Table 5.16. A List of CSS Units
5.5.10.12 CSS ColorsColor properties (see Table 5.17) may be assigned a color value using one of four different methods . Table 5.17. Specifying CSS Colors
|