Intro

CSS (Cascading Style Sheets) deals primarily with templates that define how different HTML elements (such as all paragraphs or specific paragraphs) are displayed in browsers. The style sheets are said to "cascading" because an HTML page can accept multiple overlaying styles sheets. DHTML (Dynamic HTML) is essentially the use of script to dynamically modify elements with CSS.

CSS should be used instead of the older HTML methods of changing the appearance of web pages. Doing this gives your pages greater programmable potential, especially since it separates the appearance from the content. You can also easily change the appearance of your entire site by modifying a CSS File instead of the many web pages in the site.

CSS was developed by the W3C and is utilized many browsers (Microsoft Internet Explorer 3+ and Netscape Navigator 4+). CSS1 became a W3C Recommendation in 1996 Dec. CSS2 became a W3C Recommendation in 1998 May. CSS2 adds support for CSS Positioning (CSSP, i.e. element positioning), tables, downloadable fonts, and media-specific style sheets (eg printers and aural devices).

The source of the style to particular elements are applied with this order of precendence:

  1. Inline. The STYLE attribute on an individual element tag
  2. Embedded or Linked. The STYLE element in the HEAD element or the style sheet specified by a LINK element in the HEAD element.
  3. Imported. A style sheet referenced by the CSS @import in the STYLE element in the HEAD element.
  4. User Specified. Style attributes specified by the user for their browser.
  5. Browser Default. The default style sheet assumed by the browser.

See also the W3C Cascading Style Sheets (CSS1) Level 1 Specification [§] and Cascading Style Sheets, level 2 (CSS2) Specification [§].

Basic Process

  1. Define desired CSS Declarations (Property and Value pairs). EG: color:red;, color is the property, red is the value, and the whole thing is a CSS Declaration.
    • CSS Declarations may be applied inline directly to HTML elements with a style attribute. EG: <p style="color:red; text-align:right;">hi</p>.
    • Inline styling can also be applied to blocks of HTML with the <div> tag, or sections within blocks with the <span> tag.
  2. A group of CSS Declarations may be assigned to elements via a CSS Selector to form a CSS Rule. EG: p{color:red; text-align:right;}, the p is the CSS Selector and the whole thing is a CSS Rule.
  3. One or more CSS Rules form a CSS Style. EG: p{color:red; text-align:right;} h1{color:blue; text-align:center;}.
  4. A CSS Style may be applied in two ways:
    • To a particular web page by embedding the CSS Style in a <style> tag in the <head> element of a web page. EG: <style type="text/css">p{color:red; text-align:right;} h1{color:blue; text-align:center;}</style>.
    • To one or more web pages by linking each web page to a CSS File (which is just a text file with a .css extension that has nothing but a CSS Style). A CSS File is usually linked by one of two methods:
      1. A <link> tag in the <head> element of a web page. EG: <link rel="stylesheet" type="text/css" href="EGStyleSheet.css" />.
      2. The @import rule can be used in a <style> tag in the <head> element of a web page. EG: <style>@import url('EGStyleSheet.css');</style> or <style>@import 'EG.css'</style>. Any @import rules must precede regular rules in a style sheet.
  5. The CSS Media Type tells whether the CSS is applied for different outputs: screen, print, aural, braille, embossed, handheld, projection, tty, tv, all (all is the default). This is necessary because there is stuff that can be done on screen that can't be done on print. (Omit media type if you don't do anything fancy, otherwise make CSS for screen only or different CSS for each.) The CSS Media Type may be specified in different ways:
    1. Within a style sheet using either @media or @import rule. EGs:
      1. @media screen { .Note{color:yellow} }  @media print { .Note{color:red} }.
      2. @import 'EG.css' print,projection;
    2. Within the document language. EG: <link rel="stylesheet" type="text/css" media="screen" href="EG.css" />.

Comments in the CSS File must be enclosed by /* and */. EG: p {color:#f00;} /* This turns paragraphs red */.

EG: Multi-Page or Linked CSS Style

This page has this link to a CSS File which could theoretically also be used by multiple web pages.

<link rel="stylesheet" type="text/css" href="egStyleSheet.css" />

This particular CSS File includes a Type CSS Selector which turns all <q> tags to maroon. I am applying it here:

<q>The quick brown fox jumped over the lazy dogs.</q>
The quick brown fox jumped over the lazy dogs.

Alternatively, a link to an external style sheet can be done with the @import rule in an embedded style sheet. EG:

<style>
	@import url('egStyleSheet.css');
</style>

EG: Single-Page or Embedded CSS Style

This page has a <style> tag in its <head> element which includes a Class CSS Selector which turns specified text to bold. Note that the CSS Selectors are typically enclosed in SGML comment tags for the sake of non-CSS compliant browsers and because some browsers might mistake the CSS Selectors for body content.

<style type="text/css">
	.EgCSSStyle { font-weight: bold }
</style>

Here I overlay the above style to the previous example:

<q class="EgCSSStyle">The quick brown fox jumped over the lazy dogs.</q>
The quick brown fox jumped over the lazy dogs.

EG: Single-Tag or Inline Style Example

Simply add a STYLE attribute to the element or tag in question, and set its value equal to the desired CSS Rule.

In this example I overlay a strike-through inline style over the previous example:

<q class="EgCSSStyle" style="text-decoration: line-through" >The quick brown fox jumped over the lazy dogs.</q>
The quick brown fox jumped over the lazy dogs.

Page Modified: (Hand noted: 2007-06-07 17:17:07Z) (Auto noted: 2009-01-20 22:20:45Z)