Web Programming Guide by Mal Sutherland and Noel McEwan

CSS Properties

Font Properties

Property name	Values	Element
font-family	<font name>	all
font-style	normal \| italic \| oblique	all
font-weight	normal \| bold \| 100-900	all
font-size	<absolute> \| <relative> \|<length> \| <percentage>	all
font	<font-family><font-style> <font-weight><font-size>	all

Text Properties

Property name	Values	Element
line-height	normal \| <number> \| <length> \| <percentage>	all
text-decoration	none \| underline \| line-through \| blink	all
text-align	left \| right \| center \| justify	block
text-indent	<length> \| <percentage>	all

List Properties

Property name	Values	Element
list-style-type	none \| disc \| circle \| square \| decimal \| lower-alpha \| upper-alpha \| lower-roman \| upper-roman	<li> tags

Colour & background

Property name	Values	Element
color	<color>	all
background-color	transparent \| <color>	all
background-image	none \| <url>	all
background-repeat	repeat \| repeat-x \| repeat-y \| no-repeat	all
background	<background-color> \|<background-image> \|<background-repeat>	all

Margin & Borders

Property name	Values	Element
margin-top margin-bottom margin-right margin-left	<length> \|<percentage> \| auto	all
margin	<length> \|<percentage> \| auto	all
padding-top padding-bottom padding-left padding-right	<length> \|<percentage>	all
padding	<length> \|<percentage>	all
border-color	<colour>	all
border-style	none \| dotted \| dashed \| solid \| double \| groove \| ridge \|inset \| outset	all
border-top border-bottom border-left border-right	medium \| thin \| thick	all
border-width	medium \| thin \| thick	all
border	<border-width> <border-style> <colour>	all
width	<length> \|<percentage> \| auto	all
height	<length> \| auto	all
float	left \| right \| none	all
clear	left \| right \| both	all

box dimensions

Positioning Properties

Property name	Values	Element
position	static \| absolute \| relative	all
left	<length> \|<percentage> \| auto	all
top	<length> \|<percentage> \| auto	all
visibility	visible \| hidden	all
z-index	<number> \| auto	all

font family

syntax:	font-family: family-name [,family-name, ..., family-name];
values:	family-name can be any font family name(Times,Helvectica etc.) or a generic-family name. generic-families: serif sans-serif cursive fantasy monospace
default value:	Determined by browser
applies to:	All elements

Font-family can be a specific font family name or a generic font family.

Multiple family-names can be specified as a comma separated list.

Specifying a generic font family is preferable to specifying a particular font family because not all fonts are available on any one computer unless you know what fonts are available on the user's browser.

Examples:

P { font-family: Utopia,Times,"New Century Schoolbook",serif;}

The specific families are listed first: Utopia, Times and New Century Schoolbook

The first available font family from the list will be used. The last family in the list should be a generic family name in case the first choices are not available.

In this example, if none of the specific fonts are available then serif will be used.

Note: Any font name containing whitespace must be quoted with either single or double quotes.

Font Style

syntax:	font-style: value
values:	normal \| italic \| oblique
default value:	normal
applies to:	All elements

The font-style property defines that the font be displayed in one of three ways: normal, italic or oblique.
Examples:

.slanted { font-style: oblique;}
DIV      { font-style: normal;}
SPAN     { font-style: italic;}

Font Weight

syntax:	font-weight: value
values:	normal \| bold \| 100 \| 200 \| 300 \| 400 \| 500 \| 600 \| 700 \| 800 \| 900
default value:	normal
applies to:	All elements

The font-weight property is used to specify the weight of the font.

Note: Not all fonts provide nine weights so some weights are forced to be grouped together. If the specific weight is not available, a substitution may occur:

100-300	will be set to the next lighter weight (if there is is a lighter weight).
400-500	may be interchanged with each other.
600-900	will be set to the next darker weight(if there is is a darker weight).

Examples:

P           { font-weight: 500;}
P.special   { font-weight: bold;}
SPAN.normal { font-weight: normal;}

syntax:	font-size: absolute \| relative \| length \| percentage;
values:	absolute: xx-small \| x-small \| small \| medium \| large \| x-large \| xx-large relative: larger \| smaller length: length may be specified using relative (em,ex,px) or absolute (in,cm,mm,pt,pc) lengths. percentage
default value:	medium
Applies to:	All elements

The font-size property selects the size of the font. Absolute lengths (in,mm,cm,pt,pc) should be used with care because you can't make assumptions about the size and resolution of the user's monitor.

Fonts using absolute lengths can end up being rendered too small or too large for a user in the worst case.

Examples:

H1     { font-size: x-large;}
H2     { font-size: large;}
P      { font-size: 12pt;}
LI     { font-size: 70%;}
STRONG { font-size: larger;}

Font

syntax:	font: <font-style> <font-weight> <font-size> [/<line-height>] <font-family>
Applies to:	All elements

The font property may be used as a shortcut for the font properties and the line height.

Examples:

.special { font:italic bold 12pt/14pt "Times New Roman", serif;}

Specifies a 12 pt bold and italic serif font with a line height of 14 pts.

Text-decoration

syntax:	text-decoration: none \| underline \| overline \| line-through \| blink
values:	none overline underline line-through blink
default value:	none
applies to:	All elements

Examples:

.strikeOut { text-decoration: line-through; }

// turn off underlining of hypertext links
A:link, A:visited, A:active { text-decoration: none; }

Text-transform

syntax:	text-transform: none \| capitalize \| uppercase \| lowercase
values:	none \| capitalize \| uppercase \| lowercase
default value:	none
applies to:	All elements

capitalize (capitalizes first character of each word)
uppercase (capitalizes all characters of the text)
lowercase (uses lowercase characters for all alphabetical characters)
none (no transform)

Examples:

H1.caps   { text-transform: uppercase;}
LI.proper { text-transform: capitalize;}

Text-align

syntax:	text-align: left \| right \| center \| justify
values:	left \| right \| center \| justify
default value:	undefined
applies to:	Block-level elements

Examples:

H3          { text-align: center }
P.justified { text-align: justify }

Text-indent

syntax:	text-indent:<length> \| <percentage>
values:	<length> \| <percentage>
default value:	0
applies to:	Block-level elements

The text-indent property specifies the level of indentation that the first line of the block-element will use.

Examples:

P { text-indent: 5em }

Line-height

syntax:	line-height: normal \| <number> \| <length> \| <percentage>
values:	normal \| <number> \| <length> \| <percentage>
default value:	normal
applies to:	All elements

The line-height property specifies the spacing between baselines of text in the element.

If the value is a number, the line height is element's font size multiplied by the number.

Percentage is relative to the element's font size.

The line-height can also be specified in the font property immediately following the font size.

Examples:

P.double   { line-height: 200%;}
LI.double  { line-height: 2;}
LI.example { line-height: 150%;}

Vertical-align

syntax:	vertical-align: baseline \| sub \| super \| top \| text-top \| middle \| bottom \| text-bottom \|<percentage>
values:	baseline (align baseline of element with baseline of parent) sub (subscript) super (superscript) top(align top of element with tallest element on the line) text-top(align tops of element and parent's font) middle (align vertical midpoint of element with baseline plus half the height of the letter 'x') bottom (align bottom of element with lowest element on the line) text-bottom (align bottoms of element and parent's font) <percentage>
default value:	baseline
applies to:	Inline elements

The vertical-align property is used to change the vertical position of an inline element relative to its parent's baseline.

The percentage is relative to the element's line-height property and will position the element above or below the parent's baseline.

The vertical-align property is useful for aligning images.
Examples:

.sub  { vertical-align: sub;}
IMG.middle { vertical-align: middle;}
IMG.bottom { vertical-align: bottom;}

White-space

syntax:	white-space: normal \| pre \| nowrap
values:	normal (reduces multiple white space into one space) pre (respects white space - similar to <PRE>) nowrap (prevents automatic line wrapping)
default value:	normal
applies to:	Block-level elements

The white-space property specifies how spaces in the element are rendered.

List-style-type

syntax:	list-style-type: none \| disc \| circle \| square \| decimal \| lower-roman \| upper-roman \| lower-alpha \| upper-alpha
values:	none disc circle square decimal lower-roman upper-roman lower-alpha upper-alpha
default value:	disc
applies to:	list items<LI> and lists<UL><OL>

The list-style-type property specifies the label marker for each list item in a list.

Examples:

LI.square { list-style-type: square;}
UL.none   { list-style-type: none;}
OL        { list-style-type: decimal;}
OL OL     { list-style-type: lower-alpha;}
OL OL OL  { list-style-type: lower-roman;}

List-style-image

syntax:	list-style-image: none \| <url>
values:	<url> \| none
default value:	none
applies to:	list items<LI> and lists<UL><OL>

The list-style-image property specifies the image that will be used as the list item marker.

Examples:

UL.globe { list-style-image: url(greenGlobe.gif);}
UL LI    { list-style-image: url(cherry.jpg);}

Position

syntax:	position: static \| absolute \| relative
values:	static (the element's position is fixed in the normal document flow) absolute(the position is determined using left and top as offsets from the origin of the block containing the element) relative(the element's position is laidout in the normal document flow and shifted using top and left relative to the element's initial position)
default value:	static
applies to:	All elements

The position property specifies the whether the element's position is fixed (static) or specifies whether top and left are measured from the top left-hand corner of the element's container (absolute) or relative to the element's initial location.

Examples:

#layer1    { position: absolute;}
#note      { position: absolute;}
DIV.origin { position: absolute; top:0; left:0;}

Top

syntax:	top: <length> \| <percentage> \| auto
values:	<length> (vertical offset) <percentage> (relative to the height of the block containing the element) auto (the position is set so that the element's top edge is located where it would have been in the normal flow of the document)
default value:	auto
applies to:	All elements

The top property specifies a vertical offset measured from the top left-hand corner of the element's container for absolutely positioned elements or a vertical displacement for relatively positioned elements.

Examples:


#layer1    { position: absolute; top: 101px;}
#note      { position: relative; top: -12mm;}
DIV.origin { position: absolute; top:0; left:0;}

Left

syntax:	left: <length> \| <percentage> \| auto
values:	<length> (horizontal offset) <percentage> (relative to the width of the block containing the element) auto (the position is set so that the element's left edge is located where it would have been in the normal flow of the document)
default value:	auto
applies to:	All elements

The top property specifies a horizontal offset measured from the top left-hand corner of the element's container for absolutely positioned elements or a horizontal displacement for relatively positioned elements.

Examples:


#layer1    { position: absolute; top: 200px; left:300px;}
#note      { position: relative; top: -12mm; left:50mm;}
DIV.origin { position: absolute; top:10; left:auto;}

Visibility

syntax:	visibility: visible \| hidden
values:	visible (makes the element visible) hidden (makes the element invisible(transparent)
default value:	visible
applies to:	All elements

The visibility property specifies whether or not an element is visible.

Examples:

#layer1    { position: absolute;
             top: 200px; left:300px;
	     visiblity: hidden;
}

#note      { position: relative;
             top: -400%; left:50%;
	     visiblity: visible;
}

Z-index

syntax:	z-index: <number> \| auto
values:	<number> (sets the element's in the z direction. The greater the z-index, the higher its position in the stacking order, ie. higher z-index values move the element closer to the user.) auto (sets element's stack level to the same value as the parent element)
default value:	visible
applies to:	All elements

The z-index property specifies the stacking level of an element in the z-direction. The z-direction is out of the screen and toward the user. Negative z-index values are allowed and refer to space below the canvas. For overlapping elements, the element with the highest z-index will be positioned in front (closer to the user) hiding some or all of the element with the lower z-index.

Examples:

#layer1    { position: absolute;
             top: 200px; left:300px;
	     z-index: 10;
}

#note      { position: relative;
             top: -400%; left:50%;
	     z-index: 20;
}

Margin

syntax:	margin-top: <length> \| <percentage> \| auto margin-bottom: <length> \| <percentage> \| auto margin-left: <length> \| <percentage> \| auto margin-right: <length> \| <percentage> \| auto margin: <value> [<value>] [<value>] [<value>]
values:	<length> <percentage> (relative to the width of the block containing the element) auto (the margin is calculated automatically in the context of the element's properties)
default value:	0
applies to:	All elements

margin-left,margin-right, margin-top and margin-bottom are used to specify the individual margins for each side of the element.

margin provides a shorthand method for setting all the margins of the element.

The margin properties specify the width of the margins for the four sides of an element: top, bottom, left and right.

Note:

If one value is declared, it applies to all four margins.
if two values are specified, the first applies to the top and bottom margins and the second value applies to the left and right margins.
if three values are specified, the first applies to the top margin, the second value applies to the left and right margins and the third applies to the bottom margin.
if four values are specified, they apply to the top, right, bottom and left margins

Examples:

#note1 { margin: 24px;}
#note2 { margin: 2em 4em;}
#note3 { margin: 10% 4em 2px;}
#note4 { margin: 10px 18px 10em 20%;}

Padding

syntax:	padding-top: <length> \| <percentage> padding-bottom: <length> \| <percentage> padding-left: <length> \| <percentage> padding-right: <length> \| <percentage> padding: <value> [<value>] [<value>] [<value>]
values:	<length> <percentage> (relative to the width of the block containing the element)
default value:	0
applies to:	All elements

Padding refers to the space between the border and the content of the element. padding-left,padding-right, padding-top and padding-bottom are used to specify the individual padding for each side of the element.

padding provides a shorthand method for setting all the paddings of the element.

The padding properties specify the width of the paddings for the four sides of an element: top, bottom, left and right.

Note:

If one value is declared, it applies to all four paddings.
if two values are specified, the first applies to the top and bottom paddings and the second value applies to the left and right paddings.
if three values are specified, the first applies to the top padding, the second value applies to the left and right paddings and the third applies to the bottom padding.
if four values are specified, they apply to the top, right, bottom and left paddings

Examples:

#note1 { padding: 24px;}
#note2 { padding: 2em 4em;}
#note3 { padding: 10% 4em 2px;}
#note4 { padding: 10px 18px 10em 20%;}

Border

syntax:	border-top: <border-top-width> \| <border-style> \| <color> border-bottom: <border-bottom-width> \| <border-style> \| <color> border-left: <border-left-width> \| <border-style> \| <color> border-right: <border-right-width> \| <border-style> \| <color> border:<border-width> \| <border-style> \| <color>
values:	<border-width> <border-style> <color>
default value:	not defined
applies to:	All elements

border-left,border-right, border-top and border-bottom are shorthand proprties to specify the individual borders for each side of the element.

border provides a shorthand method for setting all the borders of the element in a single assignment.

Examples:

.boxEG1 { border-left: thin solid black;
          border-top: thick dashed blue;
          border:-right 2px solid #fcc;
          border-bottom: 10px double red;
}

Border-style

syntax:	border-style: dotted \| dashed \| solid \| double \| groove \| ridge \| inset \| outset \|none; border-style: <value> [<value>] [<value>] [<value>]
values:	dotted dashed solid double groove ridge inset none
default value:	0
applies to:	All elements

The border-style property specifies how the border of the element will appear.
The border-style property can specify the border-styles for the four sides of an element: top, bottom, left and right.

If one value is declared, it applies to all four border-styles.
if two values are specified, the first applies to the top and bottom border-styles and the second value applies to the left and right border-styles.
if three values are specified, the first applies to the top border-style, the second value applies to the left and right border-styles and the third applies to the bottom border-style.
if four values are specified, they apply to the top, right, bottom and left border-styles

Examples:

#note1 { border-style: solid;}
#note2 { border-style: dotted solid;}
#note3 { border-style: dotted solid groove;}
#note4 { border-style: solid solid none none;}

Border-color

syntax:	border-color: <color> [<color>] [<color>] [<color>];
values:	<color>
default value:	element's parent container color
applies to:	All elements

The border-color property specifies the colour of borders around an element.

The border-color property can specify the border-colors for the four sides of an element: top, bottom, left and right.

If one value is declared, it applies to all four border-colors.
if two values are specified, the first applies to the top and bottom border-colors and the second value applies to the left and right border-colors.
if three values are specified, the first applies to the top border-color, the second value applies to the left and right border-colors and the third applies to the bottom border-color.
if four values are specified, they apply to the top, right, bottom and left border-colors

Examples:

#note1 { border-color: solid;}
#note2 { border-color: red;}
#note3 { border-color: red blue #f66;}
#note4 { border-color: blue green black red;}

Border-width

syntax:	border-width-top: thin \| medium \| thick \| <length>; border-width-bottom: thin \| medium \| thick \| <length>; border-width-left: thin \| medium \| thick \| <length>; border-width-right: thin \| medium \| thick \| <length>; border-width: <value> [<value>] [<value>] [<value>];
values:	thin medium thick <length>
default value:	medium
applies to:	All elements

border-width-left, border-width-right, border-width-top and border-width-bottom are used to specify the individual border-widths for each side of the element.

border-width provides a shorthand method for setting all the border-widths of the element.

The border-width properties specify the width of the border-widths for the four sides of an element: top, bottom, left and right.

Note:

If one value is declared, it applies to all four border-widths.
if two values are specified, the first applies to the top and bottom border-widths and the second value applies to the left and right border-widths.
if three values are specified, the first applies to the top border-width, the second value applies to the left and right border-widths and the third applies to the bottom border-width.
if four values are specified, they apply to the top, right, bottom and left border-widths

Examples:

#note1 { border-width: 24px;}
#note2 { border-width: thin 4em;}
#note3 { border-width: thick none medium;}
#note4 { border-width: 0;}