GeoffKnagge.com

Home

Web Development

Short Contents

Introduction
CSS Basics
Selectors
Terminology
Media Types
Paged Media
Aural Media
Colours
Fonts
Text
Blocks
Lists & counters
Tables
Miscellaneous

Full Contents

Introduction

Changes from CSS1
Other CSS sites
Download this Guide

CSS Basics

Setting Styles
Using external files
...media dependant
Setting Style values
Comments
Inheritance

Selectors

...by class
...by id
...contextual
...all elements
...if a child
...adjacent elements
...by attributes

Psuedo Classes
...<A> links
:hover
:active
:focus
:lang
:firstchild

Psuedo Elements
...first line
...first letter
...:before and :after
...inserting content

Terminology

Cascades
"! important"
CSS element model
Block elements
Guide Terminology
Units
...lengths
...colours

Media Types

...giving style
...supported types

Paged Media

margins
page size
crop marks
left, right, first pages
page break before
page break after
page break inside
page names
orphaned content
widowed content

Aural Media

volume
speak
pausebefore
pauseafter
pause
cuebefore
cueafter
cue
playduring
azimuth
elevation
speech rate
voice family
average pitch
pitch range
stress
richness
punctuation
numbers
table headers

Colours

Foreground colour
Background
...-color
...-image
...-repeat
...-attachment
...-position

Fonts

Font
...-family
...-style
...-variant
...-weight
...-size
...-sizeadjust
...-stretch

Text

word-spacing
letter-spacing
text-decoration
text-shadow
vertical-align
text-transform
text-align
text-indent
line-height
quotes

Blocks

individual margins
all margins
individual padding
all padding
border widths
all border-widths
border-color
border-style
individual borders
all borders
width
min width
max width
height
min height
max height
float
clear
position
...where
layered position
text direction
bidirectional override
line height
vertical align
overflow
clipping
visibility

Lists & counters

list-style
list-style-type
list-style-image
list-style-position
marker offset
resetting counters
incrementing counters
nesting counters
counter appearance
displaying counters

Tables

caption position
layout method
border display
border spacing
empty cells

Miscellaneous

Display
Run-in boxes
whitespace
cursors
outline
outline width
outline style
outline colour

Classification properties

These advanced properties classify elements into categories, as is seen below...

display

Value	`inline` \| `block` \| `list-item` \| `run-in` \| `compact` \| `marker` \| `table` \| `inline-table` \| `table-row-group` \| `table-header-group` \| `table-footer-group` \| `table-row` \| `table-column-group` \| `table-column` \| `table-cell` \| `table-caption` \| `none` \| `inherit`
Initial	`block`
Used with	all elements
Inherited	no

This property describes how / if an element is displayed on the screen or printed page. If the language doesn't support a certain elemet, of if you want an element to behave like something else, this is the property to use.

Run-in boxes

An object specified as a Run-in object will be displayed as an inline object if the following object is a normal block item (such as a <P> block). Otherwise, it becomes a block object.

For example, H3s are normally block objects - they cause line breaks. However, if we use H3 { display: run-in }, and a <P> block follows, then the heading will appear as the first line of the <P> block, and the text of the <P> block will continue on from the end of the heading.

white-space

Value	`normal` \| `pre` \| `nowrap`
Initial	`normal`
Used with	block elements
Inherited	Yes

Specifies how white spaces (line feeds, tabs, etc) are displayed : normally (they are ignored), like the <pre> HTML element, or with line wrapping only done with <BR> elements.

Miscellaneous

cursor

This property describes what type of cursor to be displayed when the mouse or other pointing device is on the element.

Value	`url list` + `auto` \| `crosshair` \| `default` \| `pointer` \| `move` \| `e-resize` \| `ne-resize` \| `nw-resize` \| `n-resize` \| `se-resize` \| `sw-resize` \| `s-resize` \| `w-resize` \| `text` \| `wait` \| `help` \| `inherit`
Initial	`auto`
Used with	all elements
Inherited	yes
Example	`IMG { cursor : url("picture.cur"), crosshair; } }`

crosshair a cursor of the + shape
default usually an arrow
pointer The cursor used for links
move, e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resizeThe cursors used by the operating system for these actions. The resize cursors are preceded by a compass direction, with North being the top of screen
text The icon usually used over text boxes
waitThe symbol which indicates the computer is busy.
helpUsually a question mark or balloon.
urilist a comma seperated list of addressed of cursors, in order of preference.

outline

Creates an outline around, and "on top" of the element to make it stand out. It is drawn just outside the border edge.

Value	`outline-color` \|\| `outline-style` \|\| `outline-width` \| `inherit`
Used with	all elements
Inherited	no
Example	`IMG { outline : red inset thick } }`

This is a short way of specifying each of the outline properties below. See each property for a description of allowable values.

outline-width

Value	`thin` \| `medium` \| `thick` \| `length` \| `inherit`
Used with	all elements
Inherited	no
Example	`IMG { outline-width : thin } }`

outline-style

Value	`none` \| `dotted` \| `dashed` \| `solid` \| `double` \| `groove` \| `ridge` \| `inset` \| `outset`
Used with	all elements
Inherited	no
Example	`IMG { outline-style : inset } }`

outline-color

Value	`color` \| `invert` \| `inherit`
Used with	all elements
Inherited	no
Example	`:focus { outline-color: invert } }`

Site Map

(C)opyright, Geoff Knagge.
Continued use of this site indicates your agreement to the Conditions of use and Privacy Policy.