GeoffKnagge.com

Home

Web Development

Short Contents

Introduction
CSS Basics
Selectors
Terminology
Colours
Fonts
Text
Blocks
Classification

Full Contents

Introduction

Other CSS sites
Download this Guide

CSS Basics

Setting Styles
...setting values
Comments
Inheritance

Selectors

...by class
...by id
...contextual

Psuedo Classes
...<A> links

Psuedo Elements
...first line
...first letter

Terminology

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

Colours

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

Fonts

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

Text

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

Blocks

margin-top
margin-right
margin-left
margin-bottom
margin
padding-top
padding-right
padding-bottom
padding-left
padding
border-top-width
border-right-width
border-bottom-width
border-left-width
border-width
border-color
border-style
border-top
border-left
border-bottom
border-right
border
width
height
float
clear

Classification

Display
whitespace
list-style
list-style-type
list-style-image
list-style-position

Font properties

font-family

Value	comma seperated list in priority order, containing either a family-name or a generic-family
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`
Initial	`normal`
Used With	all elements
Inherited	Yes
example	`BODY { font-style: italic }`

font-variant

Value	`normal` \| `small-caps`
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`
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`
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

Value	[ `font-style` \|\| `font-variant` \|\| `font-weight` ] `font-size` [ `/ line-height` ] `font-family`
Used With	all elements
Inherited	Yes
Example	`P { font: 12pt/14pt sans-serif }`

Site Map

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