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

CSS Style Sheets

Style sheets offer many advantages when designing a visually pleasing webpage. This page outlines the basic Cascading Style Sheet (CSS) syntax necessary for creating a style sheet and ways to add style to your pages. Refer to W3.org for the current specification. Use my CSS Quick Notes Guide for information on selectors, properties and values. Always verify your style sheets. Check the references article for styling tutorials.

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

Neat Tricks With CSS

Rollovers are easier in CSS compared to JavaScript.

Pure CSS (ie no JavaScript) dropdown, slide and push menus can be created based on the :hover action and lists. SitePoint, Meyers and Pure CSS Menus show how to build them. Unfortunately this technique does not offer the ability to isolate menu content to a single file which is very easy to do with JavaScript methods.

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. Use overflow:auto with a set height to add scrollbars.

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 an attractive and common practice. This effect is easy to do by styling the relevant heading element with a width property of 100% and an appropriate background color property.

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}
            }

 

References

Here are a few of the many available CSS style reference guides:

CSS editors help 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). Examples are: TopStyle and StyleMaster [$$$].


JR's HomePage | Comments [htmlstyl.htm:2016 01 28]