Notes from 45th International STC Conference
Anaheim, California, May 17-20, 1998

An Introduction to Cascading Style Sheets: Page Layout for HTML

WandaJane Phillips
Write Livelihood, Kingston, ON, Canada

Abstract: Enhance the presentation of your HTML documents using the Cascading Style Sheets (CSS-1). Learn what the CSS-1 standard has to offer and how to integrate the style properties into your documents.

• HTML is a structural language. It provides "containers" to hold content (e.g., <H1> to house the main head).
• HTML is not intrinsically graphics-friendly.
• CSS lets you take an element within your Web page and assign properties to it (e.g., font, colors).
• The idea is to create a separate document that contains the style and then associate it with your Web page(s).
• "Cascading": The browser looks for all the stylistic commands, weighs them (<IMPORTANT> vs. <UNIMPORTANT>). Order of succession on stylistic interpretation is reader-browser-designer style commands. When there is more than one style for a given attribute, the more thorough files (most values specified) and most specific files (e.g., <H4>-specific commands Vs commands that apply to all levels of heads) tend to "win" and get rendered/displayed. The process is, in essence, a "cascade" of stylistic preferences working from the reader's commands through the browser's commands through the designer's specific commands.
• Class = global or secondary. For attributes that are to be applied throughout the document or certain parts of the document.
• Nuts and bolts
   
• Statements
• Inheritance
• Fonts
• Measurements
• Categories
• Identifying elements
   
• What is the property?
• What is it applied to?
• What is the weight?
• BODY is the outermost container; therefore, it should contain the specs for the properties that are to default to the entire page (e.g., background color.)
• The final style sheet can combine and stack the element identifiers.
• Rules: You encase them in braces { }; separate rules with a semicolon; separate property names and values with a colon.
• Weighting rules: For critical stylistic elements, you can improve the chances of "winning" the cascade by slugging these <IMPORTANT>.
• Inheritance: Properties that are inherited from the top-level specs in the heading (color, font family, etc), not amenable to stylistic change by user.
• Measurements
   
• Absolute
   
• Millimeters... mm
• Centimeters... cm
• Inches... in
• Points... pt
• Picas... pi
• Proportional... directs browser to take a certain percentage of line weight, cell padding, etc.
• Four basic elements: box, color, contents, fonts
   
• Box
   
• Border: width, color, style
• Margin: between the border and the inside edge of the parent
• Padding: inside and outside box
• Color
   
• Colors vary from machine to machine; the page developer does not have total control over that feature
• CSS has 16 basic colors; beyond that, go with RGB
• Percentages govern the amount of R, G, and B
• Numbers between 0 and 256
• Hexidecimal numbers
• Foreground color: not inherited (background, not text paragraphs)
• Background color: not inherited, even if set in the BODY... but if the browser's default for background is transparent, this value will appear to be transparent.
• Content
   
• Width
• Height
• Float
• Clear
• Display
• Text-indent
• Text-align
• Letter-spacing
• Word-spacing
• Line-height
• White-space (eliminates need for an invisible GIF to achieve white space)
• Fonts
   
• Font (property name)
• Font-family
• Font-style
• Font-variant
• Font-weight
• Font-size
• Association: You can associate styles with your document using these methods:
   
• Inline styles
• Embedded styles
• Linked and imported styles
• Embedded: The style container is embedded within the HEAD, with the commands bracketed.
• Linked and imported styles
   
• Linking: To link a style sheet document to your Web document, simply replace the style section in the head with a style link. You can also assign a type and a title (the latter is beneficial if you are going to link multiple style sheets).
• Imported styles: Document-specific styles that override the inherited styles
• Q & A's
   
• Where can you find standards? Two useful sources are:
   
• "Cascading Style Sheets and Dynamic HTML", by Jeff Kozoris, Information Analysis and Standards, National Library of Canada.
• Presenter's CSS home page.
• Reader's style takes precedence over the browser style, which takes precedence over the designer's style, except where marked <IMPORTANT>.