Source Code in This Chapter

Note: right-click or shift-click on the links to download the associated file. All code is freely available for unrestricted use.

Order now

• Cascading Style Sheet Example - Fizzics
  • Fizzics1.html Simple HTML document. No style sheet.
  • Fizzics2.html Same HTML document as above but uses the style sheet, Fizzics.css, to specify the font for H1 and H2 elements, as well as the background for the BODY element. Also, requires confetti-background.jpg to be in the images subdirectory of the directory in which you install Fizzics2.html.
• Sitestyle.css A example of an external style sheet, referenced through a LINK element, for example,
  <LINK REL=STYLESHEET HREF="Site-style.css" TYPE="text/css">, located in the HEAD section of the HTML document. Note: if your styles are defined in an external file, then the STYLE tags and comment deliminators are not required.
• Cascading Style Sheet Example - Camp Bear Claw
  • CampBearClaw1.html Describes Camp Bear Claw without using a style sheet (standard look).
  • CampBearClaw2.html An improved Camp Bear Claw using CampBearClaw.css to specify the font-family for each of the activities.
• Cabinets.html Uses style sheet Cabinets.css to repeat horizontally a “wooden“ boards background image in the title banner. Requires boards.jpg to be in the images subdirectory from where you install Cabinets.html.
• Bates.html Presents the basic look of a business letter by specifying the alignment and margins for different sections (paragraphs, <P>) of the document through style-sheet text properties as defined in the style sheet Bates.css. Requires the document background, bond-paper.jpg, to be in the images subdirectory from where you install Bates.html.
• Bounding-Box.html. Illustrates the "bounding box" (margin, border, and padding) associated with all elements. Requires the background images, bond-paper.jpg and bricks.jpg, to be located in the images subdirectory from where you install Bounding-Box.html.
• Floating Elements
  • Psalm23.html Illustrates a float style to implement a "drop caps" - the first letter of the paragraph floats to the left margin and the remaining text in the paragraph wraps around the letter.
  • Psalm23-Clear1.html Illustrates the default behavior of a paragraph break, <P>, near a floating element - the next paragraph continues to wrap around the floating element.
  • Psalm23-Clear2.html Adds a clear style to the paragraph break, <P STYLE="clear: left">, forcing the next paragraph to start after the floating element.
• Layers
  • AboveAndBelow.html Demonstrates how a LAYER can create a region that has an absolute position with respect to the window or parent layer. In this example, two layers are defined where the z-ordering (which layer is on top) is specified through the ABOVE attribute. Supported in Netscape 4 only.
  • Row.html Uses the ILAYER element, along with the TOP attribute, to move each of the words in the line "Gently down the stream" 10 pixels down from the previous word. Requires Rowboat.gif to be located in the images subdirectory from where you install Row.html. Supported in Netscape 4 only.
  • Visibility.html Demonstrates creating layers through a style sheet (supported by both Netscape and Internet Explorer). Also, demonstrates changing a layer's visibility through JavaScript.

• World Wide Web Consortium (W3C) Specifications:
  • Cascading Style Sheets, Level 1
  • Cascading Style Sheets, Level 2
  • Extensible Stylesheet Language
• Style Sheet News and Proposed Extensions
• Dynamic Fonts
  • CSS, Level 2 fontface style
  • True Doc
  • BitStream
  • Microsoft Dynamic Fonts