Style Inclusion Methods

 <  Day Day Up  >  


Style Inclusion Methods

This section defines the basic methods to associate CSS-based style information with HTML or XHTML documents.

Embedded Styles

Document-wide styles can be embedded in a document's head element using the <style> tag. Note that styles should be commented out to avoid interpretation by nonstyle-aware browsers. However, be aware that comment masking is frowned upon in XHTML and linked styles should be used or a CDATA section employed.

Example

  <style type="text/css">  <!-- p  {font-size: 14pt; font-face: Times; color: blue;      background-color: yellow;} em {font-size: 16pt; color: green;} -->  </style>  

Inline Styles

You can apply styles directly to elements in a document using the core attribute style . As the closest style inclusion method to a tag, inline styles will take precedence over document wide or linked styles.

Example

  <h1 style="font-size: 48pt; font-family: Arial;   color: green;">  CSS1 Test  </h1>  

Linked Styles

Styles can be contained in an external style sheet linked to a document or a set of documents (see Chapter 10), as shown in the following example. Linked information should be placed inside the <head> tag.

Example

  <link rel="stylesheet" type="text/css" href="newstyle.css" />  

The rel attribute is generally set to the value stylesheet but may also have a value of alternate stylesheet with an associated title value to provide different looks for the same page.

Examples

  <link rel="stylesheet" href="standard.css" title="standard" />   <link rel="alternate stylesheet" href="bigred.css" title="Red Sheet" />  

Chapter 11 has examples and more information on using alternative style sheets.

The media attribute may also be used to define the media to which a style sheet is applied. The keyword values screen or print are commonly used. The default value of all is applied when media is not specified.

Examples

  <link rel="stylesheet" href="screenstyle.css" media="screen"   type="text/css" />   <link rel="stylesheet" href="printstyle.css" media="print"   type="text/css" />  

CSS2 does define a rich set of media values as shown in Table B-1, but practice shows few are supported.

Table B-1: Media Types Defined Under CSS2

Media Type

Definition

all

For use with all devices

aural

For use with speech synthesizers

Braille

For use with tactile Braille devices

embossed

For use with Braille printers

handheld

For use with handheld devices

print

For use with printed material and documents viewed onscreen in print preview mode

projection

For use with projected media (direct computer-to-projector presentations), or printing transparencies for projection

screen

For use with color computer screens

tty

For use with low-resolution teletypes, terminals, or other devices with limited display capabilities

tv

For use with television-type devices

Imported Styles

Styles can be imported from an external file and expanded in place, similar to a macro. Importing can be used to include multiple style sheets. An imported style is defined within a <style> tag using @import followed optionally by a type attribute and a URL for the style sheet.

Example

  <style type="text/css">  @import url(newstyle.css)  </style>  

The @import directive allows style sheets to be grouped and joined together. While this was the design of the feature, unfortunately most CSS developers use it to perform a weak form of browser selection because many older CSS implementations do not support the directive. The basic idea of the trick is to put sophisticated style rules in an @import style sheet and leave basic styles in the style block. This trick should be avoided, particularly given that some browsers, notably versions of Internet Explorer, will cause a disturbing flash effect when loading imported styles.



 <  Day Day Up  >  


HTML & XHTML
HTML & XHTML: The Complete Reference (Osborne Complete Reference Series)
ISBN: 007222942X
EAN: 2147483647
Year: 2003
Pages: 252
Authors: Thomas Powell

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