This list is not exhaustive, but should contain most of the styles we've worked with.
| font-family | Allows you to specify the typeface. Give the browser a list of fonts, ending with a generic one, such as serif or sans-serif. h1 { font-family: Arial, Helvetica, sans-serif } |
|---|---|
| font-size | Size of text in relative (em or %) or absolute (px) units. This example rule scales everything (headlines, paragraphs, lists...) to be 80% of normal size. body { font-size: 0.8em } |
| text-decoration | Possible values include underline, overline and line-through. This example rule turns off the (default) underlining of link text. a { text-decoration: none; } |
| text-align | Possible values include left, right, center, justify. h1 { text-align: center; } |
| line-height | Spacing between lines. Default is single spacing. This rule sets spacing in paragraphs to double-spacing. p { line-height: 2.0em } |
| letter-spacing | "Tracking", average spacing between letters. This rule sets a headline
with (forced) all capitals, and greater-than-normal tracking: H1 { text-transform: uppercase; letter-spacing: 0.5em;} |
| text-indent | Horizontal indent of the first line in a paragraph. Can be negative (usually in combination with some margin-left) to create a 'hanging indent'. p.hang { text-indent: -3.0em; margin-left: 3.0em } |
| font-weight | values include normal, lighter, bold, or numbers between 100-900. h4 { font-weight: normal } |
| padding-top padding-bottom padding-left padding-right padding |
Space between the content and the border. Notice that you can set this for any side of the box, or padding for all four sides at once with a rule like: .content { padding: 10px; } |
|---|---|
| margin-top ... margin-right margin |
Space between the border and other boxes. You can also set this to a negative value. .hangingindent { margin-left: 20px; text-indent: -10px; } |
| border-top-width border-left-color border-bottom-style border-style border-width border-color border |
You can set border styles one at a time on each side, separately for the style, width, and color, or eventually all four sides and all three characteristics at the same time. Possible styles include solid, dashed, dotted, none. .captionbox { border-top: solid #333 1px; } |
| float | float: left causes the box to move left, and other content will wrap to the right. <p style="float: right; width: 200px;"> |
| clear | clear: left turns off wordwrap to the left of this element. <p style="clear: both"> |
| width height |
You may be able to accomplish things with margin that make it unnecessary
to set a height or width. If you set height and width, look into setting overflow:
auto as
well, or set margin: auto .content { width: 600px; } |
| z-index |
Determines the stacking order of the tag to which this has been applied. The higher numbers stack on top of lower number. <div style='z-index: 99'> |
|---|
| color | Text color for text, foreground color for other elements body { color: #333; } |
|---|---|
| background-color | Default is transparent. Note that background for a short headline may extend across the width of the page, or just the characters in the headline. .content { background-color: #e0f0d0; } |
| background-image | An image to be used as a background. If the image has transparent/translucent areas, the background-color you set will show through. body { background-image: url('gcseal.gif'); background-attachment: fixed; } |
| background-repeat | How to "tile" the image. Options are: repeat, repeat-x, repeat-y, no-repeat. body { background-image: url('gcseal.gif'); background-position: top center; } |
| background-position | Which corner of the box the image should align too. Or set an offset with (x,y). Default is top left. body { background-image: url('gcseal.gif'); background-position: top center; } |
| background-attachment | Set this to fixed to keep the background always at the same position in the browser window independent of scrolling. Default is scroll. body { background-image: url('gcseal.gif'); background-position: top center; } |