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

Block Display Properties

margin-top, margin-right, margin-left, margin-bottom

Value	`length` \| `percentage` \| `auto`
Initial	`0`
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element
Example	`H1 { margin-top: 2em }`

margin

Value	[`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ] [`length` \| `percentage` \| `auto` ]
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element
Example	`BODY { margin: 2em } BODY { margin: 1em 2em }`

This specifies the size of the top, right, bottom and left margins, in that order. If one value is given, it applies to all sides. If there are two or three, the values of the opposite sides are used for the missing ones.

padding-top, padding-right, padding-bottom, padding-left

Value	`length` \| `percentage`
Initial	`0`
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element
Examples	`P { padding-top: 0.3em } P { padding-right: 10px } P { padding-left: 20% }`

padding

Value	[`length` \| `percentage` ] [`length` \| `percentage` ] [`length` \| `percentage` ] [`length` \| `percentage` ]
Used with	all elements
Inherited	no
Percentages	relative to the width of the parent element

Specifies the size of the top, right, bottom and left paddings, in that order. If one value is given, it applies to all sides. If there are two or three values, the values of the opposite sides are used for the missing ones.

border-top-width, border-right-width, border-bottom-width, border-left-width

Value	`thin` \| `medium` \| `thick` \| `length`
Initial	`medium`
Used with	all elements
Inherited	no

This property sets the width of an element's border.

border-width

Value	[`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`] [`thin` \| `medium` \| `thick` \| `length`]
Used with	all elements
Inherited	no

If one value is given, it applies to all borders. For two values, the first is applied to the top and bottom, the second to the sides. If three values are specified, they apply to the top, sides, bottom respectively. If four values are given, they are assigned to the top, right, bottom and left respectively.

border-color

Value	`color`, `color`, `color`, `color`
Initial	the element's color
Used with	all elements
Inherited	no

The 'border-color' property sets the color of the four borders. The number of values specified produces the same results as for border-width.

border-style

Value	`none` \| `dotted` \| `dashed` \| `solid` \| `double` \| `groove` \| `ridge` \| `inset` \| `outset`
Initial	`none`
Used with	all elements
Inherited	no

The values for this element are specified, as for border-width. Some values which may not be self-explanatory include solid (solid line), double(double line) and groove, ridge, inset and outset, which produce 3D effects

border-top, border-left, border-bottom, border-right

Value	`border-xxx-width` \|\| `border-style` \|\| `color`
Used with	all elements
Inherited	no

Sets the appearance of the border for the given side.

border

Value	`border-width` \|\| `border-style` \|\| `color`
Used with	all elements
Inherited	no

The 'border' property is a shorthand method for setting the same width, color and style on all four borders of an element.

width

Value	`length` \| `percentage` \| `auto`
Initial	auto
Used with	block-level and replaced elements
Inherited	no
Percentage values	relative to width of parent element

Sets the width of an element, scaling it if necessary.

height

Value	`length` \| `auto`
Initial	`auto`
Used with	block-level and replaced elements
Inherited	no

Sets the height of an element.

float

Value	`none` \| `left` \| `right`
Initial	`none`
Used with	all elements
Inherited	no
Example	`IMG { float: left;}`

Moves the element towards one side, wrapping text around it.

clear

Value	`none` \| `left` \| `right` \| `both`
Initial	`none`
Used with	all elements
Inherited	no

This property lists the sides where floating elements are not accepted.

Site Map

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