index_C

CSS Methods

The Wired News site places all style information into CSS. Such information includes:

  • Column structure

  • Font faces, colors, and sizing

  • Background colors

  • Element colors

  • Element width and height

  • Margins, borders, and padding

Style information on Wired News has been broken up into multiple CSS files to accommodate a range of media types.

There are six external master CSS files in use, as follows:

Screen Media This is the master CSS file for use on screen for the specific color scheme.

Alternate Media This CSS file combines styles for other media including aural, Braille, and embossed media.

Print Media A separate set of styles for print is available.

Small Text Size This is an alternate style sheet that, when used with scripting, drives the text sizing feature, managing the small text size.

Large Text Size This sheet defines the large text size option.

Larger Text Size This style sheet defines the larger text size option.

Listing 9.1 shows the link scheme for the different CSS files in use.

Listing 9.1:  WWW.   Linking to External CSS files on Wired News

start example
<link rel="stylesheet" type="text/css" media="screen"
href="/v/20020914/css/cs1/wnScreen.css" />
<link rel="stylesheet" type="text/css"
media="aural,braille,embossed" href="/v/20020914/css/wnOther.css" />
<link rel="stylesheet" type="text/css" media="print"
href="/v/20020914/css/wnPrint.css" />
<link rel="alternate stylesheet" type="text/css"
media="screen,print" href="/v/20020914/css/wnSm.css" title="Small Text" />
<link rel="alternate stylesheet" type="text/css" media="screen,print"
href="/v/20020914/css/wnLg.css" title="Large Text" />
<link rel="alternate stylesheet" type="text/css"
media="screen,print" href="/v/20020914/css/wnLg2.css" title="Larger Text" />
end example

Within the linked files, Bowman created multiple @import rules to bring in style sheets specific to color and other style features. This was largely done to remove specific style information from older or nonsupporting browsers.

Figure 9.6 shows Bowman's style schematic.

click to expand
Figure 9.6: Examining the style schematic for Wired News

Note 

 An excellent article about working with alternate style sheets is available at www.alistapart.com/stories/alternate/.



Cascading Style Sheets(c) The Designer's Edge
ASP.NET 2.0 Illustrated
ISBN: 0321418344
EAN: 2147483647
Year: 2005
Pages: 86

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