What is a pseudo-class? What is a pseudo-element?

There are only 3 pseudo-classes in CSS1:

A:link {color: red;}

Makes all unvisited links red--use to avoid making NAME anchors red.

A:visited {color: red;}

Makes all visited links red.

A:active {color: red;}

Makes links that are being clicked (or are open in another frame) red. (IE only)

Note: You can also use pseudo-classes with class selectors: A.blacklink:link {color: black;}

There are only 2 pseudo-elements in CSS1:

P:first-letter {color: red;}

Use to apply styles to the first letter of a block level element

P:first-line {color: red;}

Use to apply styles to the first line of a block level element

What is a contextual selector?

P A {color: red;}

this makes all anchors within paragraphs red

UL OL UL EM {color: red;}

this make any emphasized text inside an UL inside an OL inside a UL red

TD.sidebar {background: blue;}

TD.sidebar A:link {color: white;}

makes all unvisited links with a TD of class sidebar white

H1 B, P B {color: red;}

this makes bolded text inside H1's and P's red

What is inheritence? Specificity? Importance? The Cascade? (See O'Reilly p48-55)

H1 {color: red;}

makes all H1's red

<H1>Do <EM>THIS!</EM></H1>

"Do THIS!" should all be red because the <EM> tag inherits redness from the <H1> tag

In short, inline STYLE attributes override <STYLE> definitions in the head which override linked or @import Stylesheets

ID styles override other styles

H1 {color: red !important;}

Styles marked with !important have the highest specificity

Note: In cases where style have the same specificity, the style closest to the element wins out

What is a Block-level element? An Inline element? A List-item element?

Block-Level:

Paragraphs, Headings, Lists, Tables, DIVs, and BODY are block-level elements (sometimes images and forms, but usually not). Block-level elements are displayed on a line by themselves, and they can only be children of other block-level elements.

Inline:

A, EM, SPAN, and images and forms are inline elements. They do not force anything to start on a new line. They can be children of any elements.

List-item:

LI is a list-item element. It contains a marker (a bullet, a number) and a sense of ordering.

How can you identify colors? What are web-safe colors?

There are 16 standard named colors:

aqua, black, blue, fuchia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

RGB by %:

H1 {color: rgb(100%,40%,0%);}

The red, green, and blue percentages for the color orange on a scale from 0-100% (fractions of a percent allowed, ex: 5.5%)

RGB by #:

H1 {color: rgb(255, 102, 0);}

The red, green, and blue numbers for orange on a scale from 0-255.

Hex:

H1 {color: #FF6600;}

The hexadecimal format for orange FF-red, 66-green, 00-blue on a scale from 0-9, A-F.

Short Hex:

H1 {color: #F60;}

The hex shortcut notation for #FF6600, also orange

Note: Web-safe colors are those expressed in multiples of 20% or 51 for RGB, or 33 for Hex (00,33,66,99,CC,FF).

How do you denote length?

Absolute length units: (depends on browser, monitor, resolution)

in (inches)

cm (centimeters)

mm (millimeters)

pt (points: 72 points to an inch in standard typography)

pc (picas: equal to 12 points, or a sixth of an inch)

Relative Length Units:

em (em-height: the size of the inherited font-size)

ex (x-height: the height of a lower case 'x' of the font being used, often 1/2 size of em)

px (pixels: the actual pixels on the monitor---this is the most reliable unit)

Percentage Units:

H1 {line-height: 150%;}

For many properties, percentage units can be positive or negative.

How do you identify URLs?

@import url(http://www.somewebsite.com/stylesheet.css);

Importing a stylesheet using an absolute url.

BODY {background-image: url(images/flowers.jpg);}

Accessing an image using a relative url.

Note: There cannot be a space between the 'url' and the open parenthsis.

What are the new CSS2 units?

Angle units: deg (degrees), grad (grads), rad (radians)

Time units: ms (milliseconds), s (seconds)

Frequency units: Hz (hertz), mHz (megahertz)

OK, so what are the CSS1 Properties?

Syntax for properties: single bar '|' means one or the other, double bar '||' means one or several, brackets '[ ]' group combinations of values, and angle brackets '<>' signify numberic values, as opposed to actual words.

Text Properties

text-indent: <length>|<percentage>

Lengths and percentages can be positive or negative.

text-align: left|center|right|justify

This does not work on images (surround image with DIV tags instead); Note: Justify doesn't work in all browsers.

white-space: pre|nowrap|normal

Normal: discards extra whitespace; Pre: whitespace/carriage returns are not ignored; Nowrap: prevents wrapping except with <BR> tag.

line-height: <length>|<percentage>|<number>|normal

Number is used as a multipler of the parent font-size.

vertical-align: baseline|sub|super|bottom|text-bottom|middle|top|text-top|<percentage>

Applies to inline elements only; baseline: bottom of letters without stems; bottom: aligns with the very bottom of the line (including images); text-bottom: aligns with the text, including stems; middle: aligns midpoint of element with midpoint of the text.

word-spacing, letter-spacing: <length>|normal

Postive or negative value added to the space between words/letters

text-transform: uppercase|lowercase|capitalize|none

Capitalize: captilizes only the first letter of each word

text-decoration: none|[underline||overline||line-through||blink]

ex: H2 {text-decoration: overline underline;} (Hint: Use none to remove style from links)

Font Properties

font-family: <family-name>, <generic family>

Generic families: serif, sans-serif, monospace, cursive, fantasy; multiple family names can be listed, (in quotes if name includes spaces or special characters) ending with a generic family name. ex: H1 {font-family: times, 'times new roman', serif;}

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

font-size: xx-small|x-small|small|medium|large|x-large|xx-large|smaller|larger|<length>|<percentage>

font-style: italic|oblique|normal

font-variant: small-caps|normal

font: <font-style>|<font-variant>|<font-weight>|<font-size>/<line-height>|<font-family>

Font-size and font-family must appear and must appear in that order, the first three values can occur in any order and are optional, as is line-height.

Color and Background Properties

color: <color>

border color's are taken from the content's color, unless specified by border-color:

background-color: <color>|transparent

background-image: <url>|none

background-repeat: repeat|repeat-x|repeat-y|no-repeat

(repeat: repeats tiles in both horiz. and vert. directions)

background-position: [top|center|bottom]||[left|center|right] or [<percentage>|<length>]

background-attachment: scroll|fixed

background: background-color||background-image||background-repeat||background-attachment||background-position

position elements must appear together, horiz. then vert.

Box and Border Properties

width: <length>|<percentage>|auto

height: <length>|auto

Height is determined automatically by the element

margin: <length>|<percentage>|auto

shortcut value order: top right left bottom; top rightleft bottom; topbottom rightleft; topbottomrightleft;

margin-top, margin-right, margin-bottom, margin-left: <length>|<percentage>|auto

Background color extends into the padding, not the margins. Adjacent margins collapse in favor of the larger, such as with list items, but horiz. margins do not collapse. Margins on inline elements do not change the line-height (like line-height:, font-size:, and vertical-align:), but they do change the space on the left and right sides of the element. Negative margins are also acceptable, in most cases. Note: Margins are very buggy in most current browser implementations, including (NN4.x and IE4.x/5.x)

border-style: none|dotted|dashed|solid|double|grove|ridge|inset|outset

shortcut value order: top right left bottom; top rightleft bottom; topbottom rightleft; topbottomrightleft;

border-width: thin|medium|thick|<length>

shortcut value order: top right left bottom; top rightleft bottom; topbottom rightleft; topbottomrightleft;

border-top-width, border-right-width, border-bottom-width, border-left-width: thin|medium|thick|<length>

If you set the width, don't forget to set the style

border-color: <color>

shortcut value order: top right left bottom; top rightleft bottom; topbottom rightleft; topbottomrightleft;

border-top, border-right, border-bottom, border-left: <border-width>||<border-style>||<color>

Order of values doesn't matter

border: <border-width>||<border-style>||<color>

Applies styles to all for sides. Like margins, borders on inline elements do not change the line-height, but they do change the space on the left and right sides of the element. Note: NN4.x and IE4.x/5.x do not draw borders around inline elements.

padding: <length>|<percentage>

No negative padding

shortcut value order: top right left bottom; top rightleft bottom; topbottom rightleft; topbottomrightleft;

padding-top, padding-right, padding-bottom, padding-left: <length>|<percentage>

NN4.x and IE4.x/5.x do not allow padding around inline elements

float: left|right|none

Margins around floated elements do not collapse, make sure to declare a width for floated elements

clear: left|right|both|none

Decides if elements can float on the sides of other elements

list-style-type: disc|circle|square|decimal|upper-alpha|lower-alpha|upper-roman|lower-roman|none

None does not interrupt the counting in ordered lists

list-style-image: <url>|none

list-style-position: inside|outside

list-style: <list-style-type>||<list-style-image>||<list-style-position>

display: block|inline|list-item|none

white-space: normal|pre|nowrap