1 Introduction to Cascading Style Sheets Index

1.1 Form separate from Content 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 Glossary Index

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

1.3 Document Tree Index

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 syntax Index

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 Selectors Index

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 Inline Index

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 size Index

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/Firefox Index

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 Topics Index

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/css/css_reference.asp
See also the Units reference: http://www.w3schools.com/css/css_units.asp

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

Cascading Style Sheets - Basic