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

Font properties

PLEASE NOTE: This section only describes the font properties that are most likely to be required. For information about the advanced @font-face rule for specifying fonts, see the W3C CSS2 specification and look under "fonts".

font

Value	[ `font-style` \|\| `font-variant` \|\| `font-weight` ] `font-size` [ `/ line-height` ] `font-family` \| `caption` \| `icon` \| `menu` \| `message-box` \| `small-caption` \| `status-bar` \| `inherit`
Used With	all elements
Inherited	Yes
Example	`P { font: 12pt/14pt sans-serif }`

caption, icon, menu, message-box, small-caption, status-bar refer to the fonts used for the respective items within the viewing program.

For all of the other value types, see the individual properties below.

font-family

Value	comma seperated list in priority order, containing either a family-name or a generic-family \| `inherit`
Used With	all elements
Inherited	Yes
example	`BODY { font-family: "Times New Roman", serif }`

Font names containing spaces must be quoted, otherwise only the first word is used
Values can be one of two types :
- family-name : The name of a font which may be installed, such as Times New Roman.
- generic-family : one of serif, sans-serif, cursive, fantasy, monospace. One of these should be offered as the last alternative.

font-style

Value	`normal` \| `italic` \| `oblique` \| `inherit`
Initial	`normal`
Used With	all elements
Inherited	Yes
example	`BODY { font-style: italic }`

font-variant

Value	`normal` \| `small-caps` \| `inherit`
Initial	`normal`
Used With	all elements
Inherited	Yes
example	`BODY { font-variant: small-caps }`

font-weight

Value	`normal` \| `bold` \| `bolder` \| `lighter` \| `100` \| `200` \| `300` \| `400` \| `500` \| `600` \| `700` \| `800` \| `900` \| `inherit`
Initial	`normal`
Used With	all elements
Inherited	Yes
example	`BODY { font-weight: 900 }`

Normal and 400 are the same, as are bold and 700. The bolder and lighter are values relative to whatever the inherited value would have been.

font-size

Value	`absolute-size` \| `relative-size` \| `length` \| `percentage` \| `inherit`
Initial	`medium`
Used With	all elements
Inherited	Yes
Percentage Values	relative to parent element's font size

absolute-size is one of xx-small, x-small, small, medium, large, x-large, or xx-large.

relative-size is larger or smaller and represents an absolute-size, relative to what is inherited.

length is a positive number with the units em, ex or pt. Values are relative to what would have been inherited, but on other properties it refers to the font-size of the current element.

Examples:

  P { font-size: 12pt; }
  P { font-size: larger }
  P { font-size: 150% }
  P { font-size: 1.5em }

font-size-adjust

Value	`number` \| `none` \| `inherit`
Initial	`none`
Used With	all elements
Inherited	Yes
Percentage Values	relative to parent element's font size

This property is used to specify an aspect value for the font in order to preserve the x-height of the first choice font, if it is not available. The value specifies the aspect value of the first choice font.

font-stretch

Value	`normal` \| `wider` \| `narrower` \| `ultra-condensed` \| `extra-condensed` \| `condensed` \| `semi-condensed` \| `ultra-condensed` \| `semi-expanded` \| `expanded` \| `extra-expanded` \| `ultra-expanded` \| `inherit`
Initial	normal
Used With	all elements
Inherited	Yes
Example	`H1 { font-stretch: semi-condensed }`

This specifies a relative or an absolute value for the width of the font. The values above are listed in order from narrowest to widest .

Site Map

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