CSS Home

Units and Colors in Cascading Style Sheets

There are many ways to specify sizes, distances and colors in Cascading Style Sheets. Sizes and distances can be specified as % or as various units. The examples are arbitrary; any of these units can be used for any of the purposes shown.

Units of Size

width:50%; This specifies that the object will have a width of 50% of the browser window.

width:150px; This specifies that the object will have a width of 150 pixels.

font-size:xx-large; This specifies that the font size will be the same as produced by the <font size="7"> tag in html. Other options include x-large (font size 6), large (font size 5), medium (font size 4), small (font size 3), x-small (font size 2), and xx-small (font size 1).

font-size:2em; This specifies that the font size will be twice the height and width of an upper-case M.

font-size:2ex; This specifies that the font height will be twice the height of a lower-case x.

margin-left:2in; This will create a two-inch left margin.

line-height:2cm; This specifies that the line height will be two centimeters.

border-width:3mm; This specifies that the border width will be 3 millimeters.

font-size:4pc; This specifies a 4 pica font size.

font-size:24pt; This specifies a 24 point font size.

Colors

color:blue; This specifies the text color by name. There are 16 standard color names, including black, white, aqua, blue, fuschia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, and yellow.

background-color:#ccf; This specifies the background color in hexadecimal. Note that there is no need to list each value twice as in html.

border-color:rgb(50%,50%,100%); This specifies a medium blue border color in red, green and blue percents.

background-color:rgb(255,255,204); This specifies a pale yellow background color in red, green and blue values.

©2003 All Rights Reserved