Cascading Style Sheets (CSS) Styles

Styles are written as a list of specifications in the format:

The : between the property and value and the ; at the end are important.

Many properties can be set, including font styles, sizes, colors, background and border colors, margins, indents, and padding.

Webreview.com has charts listing which browsers let you set which properties and values using CSS.

Some Useful Properties

font-size

font-size can be specified several ways.

• larger & smaller will make your font larger or smaller than the users default.
  (eg: font-size:larger; , font-size:smaller;)

• px will set the size of a font in pixels. Fonts specified in pixels will look about the same size on PC's and Mac's.
  (eg:font-size:9px;)

• pt is a font measurement from printing. It will look smaller on a Mac than a PC. On a Mac the px and the pt size appear to be the same. On a PC the pt size can be much larger.
  (eg: font-size:9pt; )

• Percentage sizes can also be used
  (eg: font-size:130%; )

font-family

I need to write a whole other section explaining serif and sans-serif fonts, and how the picking of fonts from a list goes in order. For now, if you are familiar with the face attribute of the font tag, this is the CSS equivalent. The difference is that in specifying fonts you don't put quotes around the whold thing, but you do put quotes around the names of a ny fonts that have more than one word names.
(eg: font-family:"comic sans ms","lucida console",fantasy; )

color

color on its own like this means the text (font) color. Set it using the RGB hex numbers.
(eg: color:#ff0066;)

font-weight

bold or normal are the usual choices. You would use font-weight:normal; to override an otherwise bold style or tag, perhaps for an H1.
(eg: font-weight:bold;)

text-decoration

underline will underline text. none will keep a link from being underlined.
(eg: Link w/no underline and text-decoration:underline )

text-align

text-align behaves like align= in a paragraph tag does. It moves the alignment of the text afected by the style. This style only works on tags like div and p, ones that contain something. It is meaningless in an "inline" tag like span.

(eg:

text-align:right

)

text-indent

text-indent indents the first line of a paragraph the specified number of pixels. (eg: this whole definition has style="text-indent:30;" applied to it.

padding

padding adds the specified number of pixels to each side of the contents of the tag. If you only want padding on a certain side, or if you want different amounts of padding on each side, you can specify different amounts for padding-left, padding-top, padding-right, and padding-bottom.

(eg:

padding-top:20px;

padding-left:100px;

background-color

background-color obviously sets background color! Specify the color in the usual way.
(eg: background-color:#ffcccc;)

width

width in pixels (px) or % can only apply to container tags like div, p, table, not to inline tags like span. Note that if there is no blanks for the browser to use to wrap the text, a longer line may force the width to be larger than specified.
(eg:

<div style="width:30px;">

)