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

Paged Media

Information specific to paged media is placed within the curly braces of the @page { } structure. The border and padding properties are currently ignored, but margins are specified with margin-top, margin-right, margin-bottom, margin-left, and margin.

size

Value	`length length` \| `auto` \| `portrait` \| `landscape` \| `inherit`
Initial	`auto`
Example	`@page {size : landscape}`

This property can be used to set the size or orientation of pages in a document. Lengths are horizontal and vertical respectively.

marks

Value	`crop` \|\| `cross` \| `none` \| `inherit`
Initial	`none`
Example	`@page {marks : crop cross}`

This property indicates if marks should be added to indicate the edge of the page (since it may be smaller than the physical page). Available on pages with specific sizes stated, you can assign them crop marks (show where the page ends) or crop marks (used to align pages), or both.

Left, right, and first page pseduo classes

@page :left { margininfo }
@page :right { margininfo }
@page :first { margin-top: 10cm}

The above are used to specify information specific to left and right pages (for double sided printing), and for cover pages.

:left and :right properties override general page properties, and :first overrides :left and :right.

page-break-before

Value	`auto` \| `always` \| `avoid` \| `left` \| `right` \| `inherit`
Inherit	no
Initial	`auto`
Example	`P {page-break-before: avoid}`

This property defines whether page breaks should be made immediately before an occurance of an element. Left and right refer to pages in a double sided arangement, forcing a page break so that the next page is of the given type.

page-break-after

Value	`auto` \| `always` \| `avoid` \| `left` \| `right` \| `inherit`
Inherit	no
Initial	`auto`
Example	`P {page-break-after: avoid}`

This property defines whether page breaks should be made after an occurance of an element. Left and right refer to pages in a double sided arangement, forcing a page break so that the next page is of the given type.

page-break-inside

Value	`auto` \| `avoid` \| `inherit`
Inherit	yes
Initial	`auto`
Example	`P {page-break-inside: avoid}`

This property defines whether page breaks should be made within an occurance of an element.

page

Value	`pagename` \| `inherit`
Inherit	yes
Initial	`auto`
Example	`@page pictures {size: landscape} IMG {page: pictures}`

This allows you to name pages, and specify a particular type of page where an element should be displayed. The page name is given after @page and before its definition. The above example places IMGs on a page named "pictures".

orphans

Value	`integer` \| `inherit`
Inherit	yes
Initial	`2`
Used with	block elements
Example	`P { orphans:3 }`

This specifies the minimum number of lines of the element that must appear at the bottom of a page.

widows

Value	`integer` \| `inherit`
Inherit	yes
Initial	`2`
Used with	block elements
Example	`P { orphans:3 }`

This specifies the minimum number of lines of the element that must appear at the top of a page.

Site Map

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