Markup | JavaScript | Java | Home & Links
html logo JR's HomePage | Markup | Site Map | Page Bottom
Advantages | Cautions | Cascade Effect | Basic Syntax
Adding Style | Neat Tricks | Editors | References

CSS Style Sheets

Style sheets are an important development in webpage design methodology that offer many advantages. This page outlines the basic Cascading Style Sheet (CSS) syntax necessary for creating a style sheet and ways to include style on your pages. Check my references article for styling rules. Use the CSS Quick Reference Guide for information on selectors, properties and values. Refer to W3.org for the complete specification of CSS. Always verify your style sheets with the W3 CSS Validator.

Advantages of Style Sheets

Cautions

The Cascading Effect

Several style sheets may be referred to using link elements. And more stylesheets can be referred to within style rules using the @import file_anme. Also there are implied external stylesheets for both browser defaults (first file read) and a user defined one (last read).

The concept of cascading stylesheets means that there is an order of precedence if style instructions conflict. For example the most important are inline style instructions, then embedded instructions, then external files (the last one read is the most important!). This allows a general style to be set up for the whole site but an individual document can override that format. And in a localized need, the inline style will override anything else.

The cascade principal also gives greater weight to the author's stylesheets over the browser default stylesheet. This can be overridden with the !important clause on a style (for example to force the use of particular colors and fonts to enable a low-vision user).

Cascading Style Sheet Syntax

A cascading style sheet document contains a list of rules of the format:

    /* this is a single line comment */
    HTML_element { style_rule }
    HTML_element:pseudo { style_rule }
    HTML_element.class { style_rule }
    HTML_element#id { style_rule }
    ...

The syntax of a style element embedded in a document would be similar to:

    <style type="text/css">
    /*
    This is a multi-line documenting comment.
    These are sometimes needed to explain complex stylesheets.
    The following are examples of SELECTORS
    */
    HTML_element { style_rule }
    HTML_element:pseudo { style_rule }
    HTML_element.class { style_rule }
    HTML_element#id { style_rule }
    ...
    </style>

style_rule is a set of property:value pairs joined by semi-colons and surrounded by a single set of curly brackets.

property:value pairs include a diverse number of settings. Refer to my CSS Quick Reference Guide for some of the more commonly used settings as well as a description of selectors.

A specific example that would allow you indicate important paragraphs in red or blue would be:

<!DOCTYPE ......>
<html>
<head>
<style type="text/css">
    body { background: white }
    p { text-indent: 5% }
    p.red { color: red }
    p.blue { color: blue }
</style>
</head>
<body>
<p>Just an ordinary paragraph but indented.</p>
<p class="red">This paragraph is in red.</p>
<p class="blue">This paragraph is in blue.</p>
<p>Just an ordinary paragraph but indented.</p>
</body>
</html>

Adding CSS style to your HTML document

The three main methods of using CSS stylesheets in your document are:

In-line attribute
If the style is to be applied to only a few places within a document it can be done as an element attribute at specific points such as:
<li style="list-style:none">suppress bullet on this list item!</li>
Directly embedded in document
If this is a one-off document or experimental design then it is convenient to have the style near the content. Use a style element in the head element of the HTML document.
    <style type="text/css">
    body { background: white }
    p.blue_helv { font-family: Helvetica, sans-serif; color: blue }
</style>
As a separate resource file or 'stylesheet'
This method allows several documents to reuse the same style template for a consistent presentation. Use a link element in the head element of the HTML document. The CSS style file does NOT have any HTML codes. It normally uses the file extension .css 
[in each HTML document]
<link href="common.css" type="text/css" rel="stylesheet">

[in common.css]
    body { background: white }
    p.blue_helv { font-family: Helvetica, sans-serif; color: blue }

Neat Tricks With CSS

Pure CSS dropdown menus (ie no JavaScript) can be created based on the :hover action. Sites that discuss this technique are Meyers and Pure CSS Menus. Unfortunately this style of menu does not offer the ability to isolate menu content to a single file which is very easy to do with JavaScript dropdowns.

Sidebar menu structures are better positioned using CSS styling instead of the older table method. CSS allows the menus and the page content to easily adapt to various screen widths and font sizes. Styling also allows better accessibility as content can appear in the file prior to the repetitive menu information. Use either floated divs or absolute positioning.

Fixed width pages with sidebars of contrasting colors can keep documents looking similar on varying screen widths. CSS style makes this effect easy. Create a div id="main" that surrounds the contents of the page. Set the margin property to auto (for centering), the width property to 770 pixels or less (to allow for the scroll bar) and the background property to a (document) color that contrasts with your body color which now forms the left/right sidebars. On a 800x600 screen you will see a touch of margin. Wider displays exhibit more margin. If you want to have less margin on narrow screens increase the width setting.

Pastel shaded backgrounds placed on every heading are now an attractive and common practice. This effect is easy to do by styling the relevant heading element with a width property of 100% and a background property associated to a pastel color.

An accordion effect displays only one of a group at a time. CSSNewbie shows how a CSS-only accordion can be built with divs and :hover in a style element.

The @media rule can be used to change the look of a printed page from one that is visible on screen. Elements positioned as screen footers can be repositioned to page footers or hidden entirely. For example, the following rules hide the menu bar and table of contents when printing tutorials:

@media print {
div.zone {position:absolute;top:5px;visibility:hidden}
table.toc {position:relative;top:5px;visibility:hidden}
             }

 

CSS Editors

CSS editors help you construct a correct stylesheet by constraining the property/value selections that may be entered. Many use dropdown lists to guide you through appropriate selections. Some indicate browser support (ie flags style rules that are not implemented correctly by specific browsers.

References

You may want to consult other author's web sites on how to incorporate CSS stylesheets on your own web pages. Here are a few of the many available reference guides:

JR's HomePage | Comments [htmlstyl.htm:2013 04 21]