CSS Style Sheet Parameters

Here is a summary of common css style sheet parameters to save you time.

CSS Color Parameters

Example: { color: red } The color property applies to all elements.

CSS Color Names

There are 16 colors that can be specified by name:

black blue gray green maroon navy olive purple red

aqua fuchsia lime silver teal white yellow

RGB Color parameters

You can specify a color value in hex (range: 0-9a-f), decimal (range: 0-255) or a percentage (0-100%)

Hex numbers are specified as #rgb or for greater precision as #rrggbb. For browser-safe colors use only hex digits: (0,3,6,9,c,f). Browser-safe colors are supposed to not confuse older web browsers.

Four ways to specify yellow text:

SPAN { color: #ff0 }
SPAN { color: #ffff00 }
SPAN { color: rgb(255,255,0) }
SPAN { color: rgb(100%, 100%, 0%) }

Setting the background color: { background-color: black; color: lime }

CSS Font Parameters

font-family specifies a list of one or more fonts in order of preference. Common font names are arial and verdana. Generic family names may also be used i.e.

fantasy: fantasy

font-style takes parameters of font-style:normal , font-style:italic and font-style:oblique

font-variant takes parameters of font-variant:normal and font-variant:small-caps

font-weight takes parameters of


font-size takes parameters of absolute-size , relative-size, length and percentage.

Possible parameters for absolute-size are: xx-small , x-small , small , medium , large , x-large , xx-large

Possible parameters for relative-size are: larger or smaller. The font size will then be larger or smaller than the text near that point.

Length parameters may be relative to the canvas or absolute.

Relative length units:

em - based on the height of the element's font e.g. 1.5em
ex - based on the height of the letter 'x' e.g. 0.5ex
px - based on screen pixels e.g. 10px
Absolute length units: in - inches, 1in = 2.54cm
cm - centimeters
mm - millimeters
pt - points, 1pt = 1/72 in
pc - picas, 1pc = 12pt
Some examples: H2 { font-size: 12pt }
P { font-size: 1.5em }
P { font-size: 120% }

font is a shortcut way of specifying all the font characteristics in one line of code. The sequence of optional parameters is:
font-style, font-variant, font-weight, font-size, line-height, font-family.

This example specifies a font size and a line height: P { font: 10pt/1.5em verdana } Using all options: P{ italic small-caps bold 120%/150% arial}


font-family font-style font-variant font-weight font-size

CSS Text Parameters

word-spacing and letter-spacing only have a length parameter.

text-decoration takes the parameters underline, overline, line-through and blink.

text-transform takes the parameters capitalize, uppercase or lowercase.

text-align takes the parameters left, right, center or justify.

text-indent takes the parameters of length or a percentage of the parent element's width e.g. P { text-indent: 4em }

line-height takes parameters of a number, a length or a percentage. It is used to define the spacing between the baselines of adjacent lines of text. If a number is specified, it is multiplied with the font size to get the spacing value.

vertical-align is used to position elements such as images in relation to text. It takes these parameters: baseline - align the baseline to that of the parent element.
sub - subscript
super - superscript
text-top - align with top of text.
text-bottom - align with bottom of text.
top - align top with with top of tallest element on the line.
middle - typically used to align the vertical middle of an image with a line of text.
bottom - align bottom with with bottom of lowest element on the line.
percentage - move the baseline of say an image (+/-) vertically, relative the the line height.

CSS Box Model Parameters

These parameters set the size, margin, border style, padding and positioning of the box representing an element.

css box model

Margin Parameters

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

These all take values of length, percentage or auto. The percentage is relative to the closest containing block element. Margin applies to all 4 sides.

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

These all take values of length or percentage

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

These take values of thin, medium, thick or a specified length. border-width takes 1 to 4 values affecting all 4 sides.

border-color takes a color value such as red or #f00

border-style takes from 1 to 4 values out of these choices:

dotted dashed solid double

groove ridge inset outset

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

These are shortcuts, optionally taking these parameters: border width, border style and color.

width and height are used to force a width or height value and take the parameters length, percentage or auto.