The property reference below shows properties and values that work reliably in Internet Explorer 5.x or later, Netscape 6 or later, Safari 1.0 (Macintosh only), and many other modern browsers on Macintosh and Windows.
|
Property |
Values |
Comments/Examples |
|
font-family |
font family name generic family name |
Place quotes around family names with multiple words (e.g. "times new roman") The Web browser determines the default values for font properties. p {font-family: arial;} |
|
font-style |
normal, italic, or oblique |
p {font-style: italic;} |
|
font-variant |
normal or small-caps |
p {font-variant: small-caps;} |
|
font-weight |
normal, bold, bolder, or lighter |
p {font-weight: bold;} |
|
font-size |
absolute size (14pt, 1.2pc) relative size (80%, 1.2em) |
p {font-size: 95%;} |
|
font |
font-style, font-variant, font-weight, font-size, line-height, and font-family |
Shorthand property to specify multiple font properties with one style rule. |
When using the font shorthand property only font-size and font-family are required. The hard part is remembering the order of the properties. CSS requires the order be correct for this shortcut to work. Here are two examples.
p { font: italic small-caps bold 14pt/16pt arial, sans-serif;}
p {font: 18pt serif; }
The first example specifies all font properties. Italic is a font-style, small-caps is a font-variant, 14pt/16pt indicates 14pt font size with 16pt line-height, and arial, sans-serif is the font-family. The second example specifies the minimum properties of size and family.
It is impossible to be sure exactly what fonts are available on your visitor's computer system. Given that most visitors use either Macintosh or Windows operating systems, however, you may wish to specify commonly available fonts in your style rules. Here are a few style rules to guide you. Each rule represents fonts usually available on both Macintosh and Windows. The order of the fonts is up to you. If you wish to give preference to a font available only on Macintosh or Windows, just add it as the first font in the list. The browser will use the second font in the list for those visitors using other platforms.
p { font-family: georgia, "times new roman", serif; }
p { font-family: verdana, arial, impact, sans-serif; }
p { font-family: "courier new", monaco, "lucida console", monospace; }
Serif, sans-serif, and monospace may be reliably implemented in style sheets. The remaining generic font families, cursive and fantasy, yield extremely unpredictable results and are not recommended at this time.
The color property is commonly applied to fonts but is also applied to other elements. Any of the 16 named color values may be used or any of millions of values may be given using hexadecimal numbers or rgb notation. The official named colors are white, black, green, maroon, olive, navy, purple, gray, red, yellow, blue, teal, lime, aqua, fuchsia, and silver. Millions of other colors can be specified by using hexadecimal code (for example #66FFFF indicates a powder blue color).
p { font-family: serif; color: red; }
p { font-family: serif; color: #FF0000; }
p { font-family: serif; color: rgb(255,0,0); }
|
Property |
Values |
Comments/Examples |
|
background-color |
Any valid color value |
Backgrounds are transparent by default. body {background-color: aqua;} |
|
background-image |
Any valid absolute url or a url relative to the style sheet. |
body {background-image: url(images/niftybg.jpg);} |
|
background-repeat |
repeat (default tiling) repeat-x (horizontal tiling) repeat-y (vertical tiling) no-repeat (no tiling) |
Almost always used with a background image. Repeat is the default for the usual tiling behavior of backgrounds. No-repeat can be used to create interesting background effects together with a background color. body
{ background-image: url(images/niftybg.jpg); |
|
background-attachment |
scroll (default) fixed |
Determines if the background image scrolls with the page or not. body
{ background-image: url(images/niftybg.jpg); |
|
background-position |
percentage (50% 50%) length (2in 4in) top, center, or bottom left, center, or right |
Sets the initial horizontal and vertical position of a background image. Use with background-repeat to center a background image on a page. body
{ background-image: url(images/niftybg.jpg); |
|
background |
background-color, background-image, background-repeat, background-attachment, background-position |
Shorthand property to specify multiple background properties with one style rule. Separate the properties with spaces. body { background: aqua url(images/niftybg.jpg) no-repeat fixed center top;} |
|
Property |
Values |
Comments/Examples |
|
letter-spacing |
Any valid length value |
p {letter-spacing: 0.2em;} |
|
line-height |
Any valid number, length, or percentage value. |
Use of a simple number is recommended to make the line height relative to the font size. p { line-height: 1.15; } |
|
text-align |
left, right, center, or justify |
p { text-align: right;} |
|
text-decoration
|
none, underline, overline, line-through, or blink |
Often used with the anchor tag to remove the underlining from links. Only underline and none work reliably on all DHTML browsers. a {text-decoration: none;} |
|
text-indent |
Any valid length or percentage value |
Used with block-level elements only. Often used with a class selector. p.indented |
|
text-transform
|
capitalize (This Text) uppercase (THIS TEXT) lowercase (this text) |
p { text-transform: uppercase;} |
|
word-spacing |
Any valid length value |
p {word-spacing: 0.6em;} |
|
Property |
Values |
Comments/Examples |
|
margin-top |
Any valid length value |
p { margin-top: 5px; } |
|
margin-right |
Any valid length value |
p { margin-right: 105%; } |
|
margin-bottom
|
Any valid length value |
p { margin-bottom: auto; } |
|
margin-left
|
Any valid length value |
p { margin-left: 2em; } |
|
margin |
Any valid length value |
Shorthand property to set all margin properties to the same value using one style rule. p { margin: 12px; } |
|
padding-top |
Any valid length value |
p { padding-top: 5px; } |
|
padding-right |
Any valid length value |
p { padding-right: 105%; } |
|
padding-bottom
|
Any valid length value |
p { padding-bottom: 2em; } |
|
padding-left
|
Any valid length value |
p { padding-left: 129%; } |
|
padding |
Any valid length value |
Shorthand property to set all padding properties to the same value using one style rule. p { padding: 12px; } |
|
border-top-width |
medium, thin, thick, or any valid length value |
div { border-top-width: thin; } |
|
border-right-width |
medium, thin, thick, or any valid length value |
div { border-top-width: thick; } |
|
border-bottom-width
|
medium, thin, thick, or any valid length value |
div { border-bottom-width: 5px; } |
|
border-left-width
|
medium, thin, thick, or any valid length value |
div { border-left-width: 2em; } |
|
border-color |
any valid color value |
Use one color for all sides or list four colors for top, right, bottom, and left. div { border-color: red; } div { border-color: red black yellow blue; } |
|
border-style |
none, dotted, dashed, solid, double, groove, ridge, inset, or outset |
Often used together with border-color. If a browser does not recognize a given value, solid is used instead. div { border-color: red; border-style: dotted; } |
|
border-top |
border-top-width, border-style, color |
Shorthand form to set the width, style, and color of the top border using one style rule. div { border-top: thin solid green; } |
|
border-right |
border-right-width, border-style, color |
Shorthand form to set the width, style, and color of the right border using one style rule. div { border-right: 2px dashed red; } |
|
border-bottom |
border-bottom-width, border-style, color |
Shorthand form to set the width, style, and color of the bottom border using one style rule. div { border-bottom: thick dotted black; } |
|
border-left |
border-left-width, border-style, color |
Shorthand form to set the width, style, and color of the left border using one style rule. div { border-left: 2px solid blue; } |
|
border |
border-width, border-style, color |
Shorthand property to specify all border properties using one style rule. div { border: thin solid blue; } |
|
width |
Any valid length value |
Applies to block-level and replaced elements.* Also applies to CSS2 positioned elements with position property set to absolute. div { width: 600px; } |
|
height |
Any valid length value |
Applies to block-level and replaced elements.* Also applies to CSS2 positioned elements with position property set to absolute. div { height: 60px; } |
|
float |
none, left, or right |
Often applied to images to allow text to float around them. img { float: left; } |
|
clear |
none, left, right, or both |
Sets the side or sides of an element on which no image may appear. br { clear: left; } |
* An element for which the CSS formatter knows only the intrinsic dimensions. In html, img, input, textarea, select, and object elements can be examples of replaced elements. For example, the content of the img element is often replaced by the image that the "src" attribute designates.
|
Property |
Values |
Comments/Examples |
|
display |
block, inline, list-item, or none |
Support for block and none is reliable. Support for inline and list-item is quirky in most browsers. div {display: none;} |
|
white-space |
normal, pre, nowrap |
Use pre to cause the browser to display multiple spaces and carriage returns. Use nowrap to prevent line breaks. td { white-space: nowrap; } |
|
list-style-type |
disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha, or none |
ul { list-style-type: circle;} ol { list-style-type: upper-roman;} |
|
list-style-image |
none or any valid url |
ul { list-style-image: url(mybullet.gif);} |
|
list-style-position |
outside or inside |
The default value is outside. ul { list-style-position: inside;} |
|
list-style
|
list-style-type, list-style-position, list-style-image |
Shorthand property to specify multiple list properties with one style rule. Separate the properties with spaces. ul { list-style: square outer url(niftydot.jpg);} |
|
Property |
Values |
Comments/Examples |
|
position |
static, absolute, or relative |
Static is the default. div {position: relative;} |
|
left |
Any valid length value Any valid percentage value auto |
Applies only to elements with position property set to absolute or relative div { position: absolute; left: 100px; } |
|
top |
Any valid length value Any valid percentage value auto |
Applies only to elements with position property set to absolute or relative div { position: absolute; top: 10px; } |
|
z-index |
Any positive or negative integer auto |
Higher z-index values place the element closer to the viewer. div { position: absolute; z-index: 4; } |
|
clip |
auto, rect, or any valid shape value |
Applies to absolute positioned elements. Today the only recognized shape is rect. The dimensions in parentheses represent the top, right, bottom, and left coordinates of an imaginary rectangle through which we can view the content. img { clip: rect(0px 300px 200px 30px);} |
|
overflow
|
visible, hidden, scroll, or auto |
Applies to absolute positioned elements. div { overflow: scroll;} |
|
visibility |
inherit, visible, hidden |
div { visibility: hidden; } |