Style |
Values |
Example |
Notes |
|---|---|---|---|
Type Properties |
|||
color |
Basic colors (red, blue) or Hexadecimal |
{color: #12AD4F;} |
|
font-family |
Any standard font typeface(s). Separate multiple fonts with commas. |
{font-family: "Times New Roman", Times, serif;} |
Fonts must be on the users computer to work. Common fonts include Helvetica, Arial, Times, Verdana, Georgia, Trebuchet, Tahoma, Lucida, Palatino, Courier and Comic Sans. |
font-size |
Pixels (px), "ems" (em), picas (), inches (in), centimeters (cm), and... |
{font-size: 12px;} or {font-size: .8em;} |
"ems" are recommend for accessibility compliance. |
font-style |
"italic", "oblique" or "normal" |
{font-style: italic;} |
In most cases, oblique acts as a "forced" pseudo-italics. |
font-weight |
"bold", "bolder", "lighter", "normal", or a number from 100–900 (900 being boldest). |
{font-weight: bold;} |
Not all browsers recognize the number scale, or even "bolder" or "lighter". Stick with "bold". |
font-variant |
"small-caps" or "normal" |
{font-variant: small-caps;} |
Small caps are applied to lowercase letters. If you type a word in caps and apply this style there will be no effect. Not all browsers will display small caps. |
line-height |
Any standard measurement (see "font-size" above). |
{line-height: 18px;} |
Same thing as "leading": the space between horizontal lines of text. |
text-decoration |
"underline", "overline", "line-through", "blink", and "none" |
{text-decoration: underline overline;} |
Multiple decorations can be used—separate with a space. Don't use blink. |
text-transform |
"capitalize", "uppercase", "lowercase", "none". |
{text-transform: uppercase;} |
"Capitalize" capitalizes the first letter in each word. "Uppercase" effects all of the letters. |
Backgrounds |
|||
background-color |
Basic colors (red, blue) or Hexadecimal |
{background-color: #000000;} |
|
background-image |
"url(file name)" |
{background-image: url(ducky.jpg);} {background-image: url(images/birds/ducky.jpg);} |
|
background-repeat |
"repeat", "repeat-x", "repeat-y", or "no-repeat" |
{background-repeat: repeat-x;} |
"x" is horizontal, "y" is vertical, "repeat" tiles the image. |
background-attachment |
"fixed" or "scroll" |
background-attachment: fixed; |
A fixed background will not move when the page scrolls; obviously if you choose "scroll" the background will move with the page as you scroll (backgrounds scroll by default). |
background-position |
"left", "center" or "right" for horizontal; "top", "middle", or "bottom" for vertical, or a set of numeric values. |
{background-position: top right} or {background-position: 0px 23px;} |
When using numbers, the first number is distance from the top of the page, the second is distance from the left edge. |
"Block Level" Properties |
|||
letter-spacing |
Any measurement. Pixels (px) and "ems" (em) are best. |
{letter-spacing: 3px;} |
Same thing as "tracking." |
word-spacing |
Any measurement. Pixels (px) and "ems" (em) are best. |
{word-spacing: 10px;} |
The space between words. |
vertical-align |
"baseline", "sub", "super", "top", "text-top", "middle", "bottom", "text-bottom" or a value. |
{vertical-align: top;} |
|
text-align |
"left", "center", "right", or "justify" |
{text-align: right;} |
|
text-indent |
Any measurement. Pixels (px) and "ems" (em) are best. |
{text-indent: 12px;} |
Indents the first line of a paragraph. |
"Box" Properties |
|||
width |
Any measurement. Pixels (px) and "ems" (em) are best. |
{width:300px;}
|
When applied to the <body> tag, width fixes the width of the entire page. Elements on the page will wrap. |
height |
Any measurement. Pixels (px) and "ems" (em) are best. |
{height:300px;} |
It's usually not necessary (or recommended) to set heights for elements. |
Float |
"left," "right," or "none." |
{float:left;} |
|
Clear |
"left," "right," "both" or "none." |
{clear:left;} |
|
margin (or) margin-top, margin-right, margin-bottom, margin-left |
Any measurement. Pixels (px) and "ems" (em) are best. |
{margin:0;} or {margin-top:0; margin-right:12px; margin-bottom:6px; margin-left:18px;} |
Or to save typing, you could write: {margin: 0 12px 6px 18px;} |
padding (or) padding-top, padding-right, padding-bottom, padding-left |
Any measurement. Pixels (px) and "ems" (em) are best. |
{padding:0;} or {padding-top:0; padding-right:12px; padding-bottom:6px; padding-left:18px;} |
Or to save typing, you could write: {padding: 0 12px 6px 18px;} |
Borders |
|||
border-style (or) border-top-style, border-right- style, etc. |
"solid", "dotted", "dashed", "double", "groove", "inset", "outset", "ridge", "none". |
{border-style: solid; or {border-top-style:solid; border-right-style: none; border-bottom-style: solid; boder-left-style: none; |
Borders must have a specified border-style in order to be visible. |
border-width (or) border-top-width, border-right- width, etc. |
"thin", "medium", "thick" or any measurement. Pixels (px) and "ems" (em) are best.
|
border-width: 4px; or border-top-width:2px; border-right-width: 4px; border-bottom-width: 9px; boder-left-width: 7px; |
|
border-color (or) border-top-color, border-right- color, etc. |
Basic colors (red, blue) or Hexadecimal |
border-color: red;} or border-top-color: #FF0000; border-right-color: #00FF00; border-bottom-color: #0000FF; border-left-color: #000000;} |
|