5.5 Cascading Style Sheets


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 Need

HTML 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 Cascading

CSS 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 Style

An 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 Style

An 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 Style

An 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 Cascading

Once 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 Types

The @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

Media Type

Description

all

Used for all media type devices

aural

Used for speech and sound synthesizers

braille

Used for braille tactile feedback devices

embossed

Used for paged braille printers

handheld

Used for small or handheld devices

print

Used for printers

projection

Used for projected presentations, like slides

screen

Used for computer screens

tty

Used for media using a fixed-pitch character grid, like teletypes and terminals

tv

Used for television-type devices (lower resolution, not relying on pointer device)

5.5.5 Inheritance

Some 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 Value

Each 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 rule

The @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 Cascade

Style 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 Selectors

CSS 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-Classes

Pseudo-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-Elements

Pseudo-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 Order

To find the value for a specific combination of an element and property, browsers apply the following sort order:

  • Find all declarations that apply to the element and property in question, for the target media type. Declarations apply if the associated selector matches the element in question.

  • The primary sort of the declarations is by weight and origin: For normal declarations, author style sheets override user style sheets which override the default style sheet. For !important declarations, user style sheets override author style sheets that override the default style sheet. !important declaration override normal declarations. An imported style sheet has the same origin as the style sheet that imported it.

  • The secondary sort is by specificity of selector: more specific selectors will override more general ones. Pseudo-elements and pseudo-classes are counted as normal elements and classes, respectively.

  • Finally, sort by order specified: If two rules have the same weight, origin, and specificity, the latter specified wins. Rules in imported style sheets are considered to override any rules in the style sheet itself.

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 Preferences

CSS 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 Hints

The 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 Model

The 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 Dimensions

Each 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.

graphics/05fig12.gif

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.

  • Content edge or inner edge : The content edge surrounds the element's rendered content.

  • Padding edge : The padding edge surrounds the box padding. If the padding has 0 width, the padding edge is the same as the content edge. The padding edge of a box defines the edges of the containing block established by the box.

  • Border edge : The border edge surrounds the box's border. If the border has 0 width, the border edge is the same as the padding edge.

  • Margin edge or outer edge : The margin edge surrounds the box margin. If the margin has 0 width, the margin edge is the same as the border 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 :

  • Content area : The 'background' property of the generating element.

  • Padding area : The 'background' property of the generating element.

  • Border area : The border properties of the generating element.

  • Margin area : Margins are always transparent.

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 CSS

The 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:

  • CSS defines different conformance rules for HTML and XML documents. The HTML rules apply to XHTML documents delivered as HTML and the XML rules apply to XHTML documents delivered as XML.

  • CSS for XHTML should use lowercase element and attribute names.

  • In tables, the < tbody /> element must always be explicitly specified if it is referred to in a CSS selector.

  • Within the XHTML namespace, the id attribute is always of type ID, and therefore style sheets should be able to continue using the shorthand # selector syntax even if the DTD is missing or inaccessible.

  • Within the XHTML namespace, the class attribute is always present. Therefore, style sheets should be able to continue using the shorthand "." selector syntax even if the DTD is missing or inaccessible.

5.5.10 Properties Reference

5.5.10.1 Background Properties

The 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

Property

Description

Values

background

A shorthand property for setting all background properties in one declaration

background-color , background-image, background-repeat , background-attachment , background-position

background-attachment

Sets whether a background image is fixed or scrolls with the rest of the page

scroll, fixed

background-color

Sets the background color of an element

color-rgb, color-hex, color- name , transparent

background-image

Sets an image as the background

url, none

background-position

Sets the starting position of a background image

top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right, x-% y-%, x-pos y-pos

background-repeat

Sets if/how a background image will be repeated

repeat, repeat-x, repeat-y, no-repeat

5.5.10.2 Border Properties

The 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

Property

Description

Values

border

A shorthand property for setting all of the properties for the four borders in one declaration

border-width, border-style, border-color

border-bottom

A shorthand property for setting all of the properties for the bottom border in one declaration

border-bottom-width, border-style, border-color

border-bottom-color

Sets the color of the bottom border

border-color

border-bottom-style

Sets the style of the bottom border

border-style

border-bottom-width

Sets the width of the bottom border

thin, medium, thick, length

border-color

Sets the color of the four borders, can have from one to four colors

color

border-left

A shorthand property for setting all of the properties for the left border in one declaration

border-left-width, border-style, border-color

border-left-color

Sets the color of the left border

border-color

border-left-style

Sets the style of the left border

border-style

border-left-width

Sets the width of the left border

thin, medium, thick, length

border-right

A shorthand property for setting all of the properties for the right border in one declaration

border-right-width, border-style, border-color

border-right-color

Sets the color of the right border

border-color

border-right-style

Sets the style of the right border

border-style

border-right-width

Sets the width of the right border

thin, medium, thick, length

border-style

Sets the style of the four borders, which can have from one to four styles

none, hidden, dotted , dashed, solid, double, groove, ridge, inset, outset

border-top

A shorthand property for setting all of the properties for the top border in one declaration

border-top-width, border-style, border-color

border-top-color

Sets the color of the top border

border-color

border-top-style

Sets the style of the top border

border-style

border-top-width

Sets the width of the top border

thin, medium, thick, length

border-width

A shorthand property for setting the width of the four borders in one declaration, which can have from one to four values

thin, medium, thick, length

5.5.10.3 Classification Properties

The 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

Property

Description

Values

clear

Sets the sides of an element where other floating elements are not allowed

left, right, both, none

cursor

Specifies the type of cursor to be displayed

url, auto, crosshair, default, pointer, move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize, text, wait, help

display

Sets how and if an element is displayed

none, in-line, block, list-item, run-in , compact, marker, table, in-line-table, table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table- cell , table-caption

float

Sets where an image or a text will appear in another element

left, right, none

position

Places an element in a static, relative, absolute, or fixed position

static, relative, absolute, fixed

visibility

Sets if an element should be visible or invisible

visible, hidden, collapse

5.5.10.4 Dimension Properties

The 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

Property

Description

Values

height

Sets the height of an element

auto, length, %

line-height

Sets the distance between lines

normal, number, length, %

max-height

Sets the maximum height of an element

none, length, %

max-width

Sets the maximum width of an element

none, length, %

min-height

Sets the minimum height of an element

length, %

min-width

Sets the minimum width of an element

length, %

width

Sets the width of an element

auto, %, length

5.5.10.5 Font Properties

The 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

Property

Description

Values

font

A shorthand property for setting all of the properties for a font in one declaration

font-style, font-variant, font-weight, font-size/line-height, font-family, caption, icon, menu, message-box, small-caption, status-bar

font-family

A prioritized list of font family names or generic family names for an element

family-name, generic-family

font-size

Sets the size of a font

xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, length, %

font-size-adjust

Specifies an aspect value for an element that will preserve the x-height of the first-choice font

none, number

font-stretch

Condenses or expands the current font-family

normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra -expanded

font-style

Sets the style of the font

normal, italic, oblique

font-variant

Displays text in a small-caps font or a normal font

normal, small-caps

font-weight

Sets the weight of a font

normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900

5.5.10.6 List Properties

The list properties (see Table 5.11) enable controlling the position, image, and marker type for each list item.

Table 5.11. CSS List Properties

Property

Description

Values

list-style

A shorthand property for setting all of the properties for a list in one declaration

list-style-type, list-style-position, list-style-image

list-style-image

Sets an image as the list-item marker

none, url

list-style-position

Places the list-item marker in the list

none, url

list-style-position

Places the list-item marker in the list

inside, outside

list-style-type

Sets the type of the list-item marker

none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, lower-latin, upper-latin, hebrew, armenian, georgian, cjk-ideographic, hiragana, katakana , hiragana -iroha, katakana-iroha

marker-offset

Sets the minimum width of an element

auto, length

5.5.10.7 Margin Properties

The 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

Property

Description

Values

margin

A shorthand property for setting the margin properties in one declaration

margin-top, margin-right, margin-bottom, margin-left

margin-bottom

Sets the bottom margin of an element

auto, length, %

margin-left

Sets the left margin of an element

auto, length, %

margin-right

Sets the right margin of an element

auto, length,%

margin-top

Sets the top margin of an element

auto, length, %

5.5.10.8 Padding Properties

The 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

Property

Description

Values

padding

A shorthand property for setting all of the padding properties in one declaration

padding-top, padding-right, padding-bottom, padding-left

padding-bottom

Sets the bottom padding of an element

length, %

padding-left

Sets the left padding of an element

length, %

padding-right

Sets the right padding of an element

length, %

padding-top

Sets the top padding of an element

length, %

5.5.10.9 Positioning Properties

The 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

Property

Description

Values

bottom

Sets how far the bottom edge of an element is above/below the bottom edge of the parent element

auto, %, length

clip

Sets the shape of an element. The element is clipped into this shape, and displayed

shape, auto

left

Sets how far the left edge of an element is to the right/left of the left edge of the parent element

auto, %, length

overflow

Sets what happens if the content of an element overflows its area

visible, hidden, scroll, auto

right

Sets how far the right edge of an element is to the left/right of the right edge of the parent element

auto, %, length

top

Sets how far the top edge of an element is above/below the top edge of the parent element

auto, %, length

vertical-align

Sets the vertical alignment of an element

baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, %

z-index

Sets the stack order of an element

auto, number

5.5.10.10 Text Properties

Text 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

Property

Description

Values

color

Sets the color of a text

color

direction

Sets the text direction

ltr, rtl

letter-spacing

Increase or decrease the space between characters

normal, length

text-align

Aligns the text in an element

left, right, center, justify

text-decoration

Adds decoration to text

none, underline, overline, line-through, blink

text-indent

Indents the first line of text in an element

length, %

text-shadow

 

none, color, length

text-transform

Controls the letters in an element

none, capitalize, uppercase, lowercase

unicode-bidi

 

normal, embed, bidi-override

white-space

Sets how white space inside an element is handled

normal, pre, nowrap

word-spacing

Increase or decrease the space between words

normal, length

5.5.10.11 CSS Units

CSS 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

Unit

Description

%

a percentage of some distance (context sensitive)

em

one em is equal to the font size of the current element (context sensitive)

ex

one ex is the x-height of a font, the x-height is usually about half the font-size (context sensitive)

in

inch

cm

centimeter

mm

millimeter

pt

point (1 pt is the same as 1/72 inch)

pc

pica (1 pc is the same as 12 points)

px

pixels (a dot on the computer screen)

5.5.10.12 CSS Colors

Color properties (see Table 5.17) may be assigned a color value using one of four different methods .

Table 5.17. Specifying CSS Colors

Color Specification

Description

color_name

A color name, e.g., 'red'

rgb(r,g,b)

Specifying absolute component values, each between 0 and 255, using the rgb function, e.g., rgb(255,0,16)

rgb(r%,g%,b%)

Specifying component values, each in terms of % where 100% is the maximum value supported by the platform (may not be 255), e.g., rgb(100%,0%,6%)

#rrggbb

A 6 digit hex number, e.g., #ff0010



ITV Handbook. Technologies and Standards
ITV Handbook: Technologies and Standards
ISBN: 0131003127
EAN: 2147483647
Year: 2003
Pages: 170

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net