Cascading Style Sheets – Basic

Ian! D. Allen –

Fall 2011 - September to December 2011 - Updated 2017-09-01 10:42 EDT

1 Introduction to Cascading Style SheetsIndexup to index

1.1 Form separate from ContentIndexup to index

What-vs-How Rule: Keep the presentation of your page separate from the content of the page. Use HTML tags to mark up the contents, tagging what each piece of content is, not what it looks like. Use styles/CSS to mark up the presentation, and keep the style in a separate file.

1.2 GlossaryIndexup to index

1.3 Document TreeIndexup to index

2 CSS syntaxIndexup to index

3 Basic CSS SelectorsIndexup to index

*       : any single element (not multiple elements!)
          "* *" selects elements at least two-deep in the document tree
          "* + *" selects every second sibling
E       : the element E, where E is any single HTML tag
          e.g. h1, div, ul, p, etc.
E F     : the element F located anywhere, at any level, inside element E
          F is a descendant of E; E is any ancestor of F
E > F   : the element F located directly inside element E (nothing in between)
          F is a child of E; E is the parent of F
E + F   : the element F located as an immediate sibling of E (nothing in
          between) E and F have the same parent; F follows E   : every element E that has attribute class="foo" (multiple)
          use *.foo or just .foo to apply to any element with that class
E#bar   : the single element E that has attribute id="bar" (only one match)
          use *#bar or just #bar to apply to any element with that id
E,F,G   : (grouping) elements E and F and G all have these same properties

Three Methods of specifying CSS - see - the method closest to the tag has priority

Method 1: Style applied to an individual tag (bad: mixes form and content):

    <p style="color: red; margin: 1em;">

Method 2: Style moved to the <head> section (better, but still mixes form and content):

    <style type="text/css">
    p { color: red; margin: 1em; }

Method 3: Style moved to a separate CSS file (best: form and content are kept completely separate):

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

4 Two types of elements: Block and InlineIndexup to index

5 Layout relative to font sizeIndexup to index

5.1 Microsoft Internet Explorer vs. Open Source Mozilla/FirefoxIndexup to index

You may notice that there are very few Mozbugs here. Mozilla is under constant revision and updating by numerous volunteer programmers, so what bugs do appear seldom survive for long.

6 CSS Test TopicsIndexup to index

7 Resources for choosing stylesIndexup to index

| Ian! D. Allen  -  -  Ottawa, Ontario, Canada
| Home Page:   Contact Improv:
| College professor (Free/Libre GNU+Linux) at:
| Defend digital freedom:  and have fun:

Plain Text - plain text version of this page in Pandoc Markdown format

Campaign for non-browser-specific HTML   Valid XHTML 1.0 Transitional   Valid CSS!   Creative Commons by nc sa 3.0   Hacker Ideals Emblem   Author Ian! D. Allen