CSS Property List
Box Model
All visible HTML elements are represented by a box that begins with the opening tag and ends with the closing tag. This box has several properties that control how it looks. It has a height and width for the content area, a margin all around the outside, a border, and padding between the border and the content. The inside has a background color that applies right up to and including the border, as well as various text properties.
Here are the properties that control the box's size and shape:
| Name | Description | Possible Values |
|---|---|---|
| margin margin-top margin-right margin-bottom margin-left |
Minimum amount of space to leave around the box. It is possible to set all margins at once, or to set top,
bottom, left and right separately. Margins of side by side boxes are added together. Margins of stacked boxes are usually combined. Tip: Set left and right margins to auto to center a box |
Any size type values. Beware of percentages, since their meaning may be unclear. |
| border-width border-top-width border-right-width border-bottom-width border-left-width |
Width of the border of this box. It is possible to set all borders at once, or to set top, bottom, left and right border widths separately. | thin, medium, thick You may also use size type values. Beware of percentages, since their meaning may be unclear. |
| border-style border-top-style border-right-style border-bottom-style border-left-style |
Style of the border of this box. It is possible to set all borders style at once, or to set top, bottom, left
and right border styles separately. The default border style is none. You must set some other border style if you want a border to be shown. Complicated borders like double, ridge, inset and outset tend to look bad if the border is too thin. |
none, dotted, dashed, solid, double, ridge, inset, outset |
| border-radius | Set this to sizes other than 0 to get rounded corners on your box. It is possible to set each corner separately, but you will have to look that up for yourself. Note: The padding is not adjusted to match the radius so it is possible for content to overlap rounded corners—notice the 1em example to the right. Fix this by adjusting the padding size. |
Any size type values. Notice that percentages are based on the height and width of the content area and
consider each separately—see last example. 2pt dotted, 4pt dashed, 6pt solid, 8pt double, 10pt ridge, 1em inset, 33% outset |
| padding padding-top padding-right padding-bottom padding-left |
Amount of padding between the border and the content of this box. It is possible to set all padding at once, or to set top, bottom, left and right padding sizes separately. | Any size type values. Beware of percentages, since their meaning may be unclear. |
| width | Width of the content area. The width is not supposed to include the padding, border or margin widths. Some
old browsers get this wrong. Only applies to block type boxes, like <p> and <div>, not to inline boxes like <em> and <strong>. Tip: For divs and paragraphs, the default width is 100%. I use auto to make my examples the right width for their content. |
Any size type values. Beware of percentages, since their meaning may be unclear. |
| height | Height of the content area. The height is not supposed to include the padding, border or margin widths. Some
old browsers get this wrong. Only applies to block type boxes, like <p> and <div>, not to inline boxes like <em> and <strong>. |
Any size type values. Beware of percentages, since their meaning may be unclear. |
Text Style and Fonts
Here are some properties that allow you to modify how text and other inline boxes appear. None of these properties affect block type boxes like paragraphs or divs:
| Name | Description | Possible Values |
|---|---|---|
| text-align | Alignment of the text in this block. May only be applied to block boxes, not inline boxes. | right center left justify |
| text-decoration | Applies a decoration to the text using the current text color. The decoration keeps its original color if the text color is changed while the decoration is in effect. |
underline |
| text-indent | Specifies the first line indentation for a block. | Any size type value. This paragraph was given the style text-indent: 0.5in; which is the APA standard indent size. This is equivalent to 3em in a 12 point font. |
| font-family | Specifies the font or type of font to use in this box. Fonts can be specific or generic. Put quotes around
your font if its name is more than one word long. Sometimes a specific font isn't available. In that case, you can provide a list of alternate fonts to use. Separate fonts with commas, and put the more specific or preferred fonts first, and alternates or generics later. CSS3 provides a way to send the desired font to the web browser, removing the need for lists. You can learn about sending fonts from w3schools. |
Generic fonts (exact font shown varies with OS and web browser):
Some common PC fonts( full list):
Some common Mac fonts( full list):
If you use a PC or Mac specific font, please provide a list of alternates like this:
|
| font-style | Select between upright and slanted versions of a font. Font variants labelled italic, cursive or kursiv will be selected with the italic style. Font variants labelled oblique, slanted, or incline will be selected with the oblique style. If no italic style is available, an oblique will be substituted. |
|
| font-weight | Select how bold the font will appear. The current font-family must support the requested weight, or you will not see any effect. |
|
| list-style-type | Change the style of the the list bullets or numbers. |
|