1 Introduction to Cascading Style SheetsIndex

1.1 Form separate from ContentIndex

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 GlossaryIndex

see http://www.w3.org/TR/CSS2/conform.html
- define: element, attribute, descendant/ancestor, child/parent
- define: property, style sheet

1.3 Document TreeIndex

Elements in a web page may be seen as a “Document Tree”
<head> and <body> are the only children of <html>
<html> is the parent of <head> and <body>
every tag inside <head> and <body> has <html> as an ancestor
every tag inside <head> and <body> is also a descendant of <html>

2 CSS syntaxIndex

when used as a tag attribute: <p style="color: red; margin: 0;">
when used elsewhere (see http://www.w3schools.com/css/css_syntax.asp):
```
  selector { property: value ; property: value ; [...etc...] }
```
for example: p { color: red; margin: 0; }

3 Basic CSS SelectorsIndex

see http://www.w3.org/TR/CSS2/selector.html

*       : 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
E.foo   : 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 http://www.html.net/tutorials/css/lesson2.php - 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):

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

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

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

4 Two types of elements: Block and InlineIndex

Block elements start a new line before and after and take the full width of the element that contains them, e.g. p, h1, ul, div
- block elements can contain other block or inline elements
- if you “float” a block element, you usually need to restrict its width or else nothing else will fit beside it
Inline elements run together on the same line and wrap at white space, e.g. i, b, em, strong, img, span
- inline elements can contain only other inline elements, never block
- top and bottom paddings and margins are ignored for inline elements; only the side padding and margins work
Use <div> (block) and <span> (inline) to group elements
If your page has a navigation bar and a content section, put each of these into <div> elements so that you can apply CSS to them (e.g. to “float” them into new positions).

5 Layout relative to font sizeIndex

Use layout relative to the size of your page or font
- use sizes in percentages or “em”s, e.g. 30%, 25em
- avoid absolute sizes such as 600px
- images by default are sized in fixed px, so if you want them to resize according to the width of your page, set a percentage width e.g. <img style="width: 20%" ...>
Set minimum and maximum widths for text columns
- avoid very wide and very narrow text columns
- min-width: 10em; max-width: 40em;

5.1 Microsoft Internet Explorer vs. Open Source Mozilla/FirefoxIndex

The IE browser is seriously broken for many uses of CSS, see http://www.positioniseverything.net/ie-primer.html
For a celebration of the open-source model for fixing CSS bugs, see http://www.positioniseverything.net/gecko.html

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 TopicsIndex

these are the CSS properties you are expected to know for a test (you will use almost all of these in your assignments):
- http://www.w3.org/Style/Examples/011/firstcss

list of CSS properties to know:

  color
  background-color
  font-family
  position: absolute
  top
  left
  width, min-width, max-width
  margin [top,right,bottom,left]
  margin-{top,right,bottom,left}
  border, border-{top,right,bottom,left} [width] [style] [color]
     - you only need to remember one style "solid"
  padding [top,right,bottom,left]
  padding-{top,right,bottom,left}

  sizes: em, %, px, in, cm   (use em and % and avoid px, in, cm)
  note the order of arguments: top right bottom left
  note the American spelling!

See also the CSS reference: http://www.w3schools.com/cssref/
- Alternate: http://websitesetup.org/css3-cheat-sheet/
See also the Units reference: http://www.w3schools.com/cssref/css_units.asp
- Alternate: none

7 Resources for choosing stylesIndex

http://www.sciweavers.org/i2style - typeset style generator
- Also available:
- Convert Text in Image to editable one (OCR)
- Web Page to High Resolution Image or Wallpaper
- Web Page to Printer Friendly PDF
- Split and Merge PDF Files
- Latex Equation Editor
- Typeset Style Generator
- Google Chrome Extension and Firefox Add-On

Author: 
| Ian! D. Allen  -  idallen@idallen.ca  -  Ottawa, Ontario, Canada
| Home Page: http://idallen.com/   Contact Improv: http://contactimprov.ca/
| College professor (Free/Libre GNU+Linux) at: http://teaching.idallen.com/
| Defend digital freedom:  http://eff.org/  and have fun:  http://fools.ca/

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