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. http://www.w3.org/Style/CSS/. CSS has been utilized by most browsers.

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.

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} }
      2. @media print { .Note{color:red} }.
      3. @import 'EG.css' print, projection;
    2. Within the document language. EG: <link rel="stylesheet" type="text/css" media="screen" href="EG.css" />.
  6. A Media Query consists of a media type and zero or more expressions that check for the conditions of particular media features, and applies its styles if true. The list of media features includes: width (min-widht, max-width), height, device-width, device-height, orientation, aspect-ratio, device-aspect-ratio, color (min-color), color-index, monochrome, resolutioin, scan, grid. "device-width" refers to the physical (EG: Screen width), while "width" refers to the available (EG: Browser window width). EG:
    1. @media all and (min-width:500px)
    2. @media (min-width:500px). Identical to the preceding.
    3. @media screen and (color), projection and (color). The comma expresses a logical OR, while the 'and' keyword expresses a logical AND.
    4. @media not (min-width:500px) . The logical NOT can be expressed through the 'not' keyword.
    5. @media screen and (min-width: 400px) and (max-width: 700px)
    6. @media (orientation:portrait)
    7. @media screen and (device-aspect-ratio: 16/9
    8. @media (min-color: 1). Bits per component.
    9. @media (color). Identical to the preceding.
    10. @media print and (min-resolution: 300dpi)
    11. @media print and (min-resolution: 118dpcm)
    12. @media tv and (scan: progressive)
    13. @media handheld and (grid) and (max-width: 15em)

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

CSS style sheets are generally case insensitive.

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>

Generally speaking using <link> is faster (because it assures concurent downloading), but there may be a few cases to use @import. See links like these:

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: ) (Auto noted: )