Fall 2011 - September to December 2011 - Updated 2017-09-01 10:42 EDT
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.
<head>
and <body>
are the only children of <html>
<html>
is the parent of <head>
and <body>
<head>
and <body>
has <html>
as an ancestor<head>
and <body>
is also a descendant of <html>
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; }
* : 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>
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).
<img style="width: 20%" ...>
min-width: 10em; max-width: 40em;
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.
these are the CSS properties you are expected to know for a test (you will use almost all of these in your assignments):
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/
See also the Units reference: http://www.w3schools.com/cssref/css_units.asp