CSS Is Easy!

CSS Attributes

In the examples used so far in this document, I’ve used several CSS attributes like color, font-family, font-size, and font-weight. In this section, I’ll direct your attention to the most common CSS attributes supported by today’s browsers. Unless otherwise indicated, these attributes should work in Netscape 4 or later and MSIE 4 or later.

An exciting aspect of CSS is that it allows you to achieve many effects that cannot be reproduced using plain HTML. For a complete list of CSS1 attributes (most of which are supported by current browsers), see the Chapter 5 of the CSS1 Spec. For a complete list of CSS2 attributes (many of which are supported by current browsers), see the CSS2 Spec.

border-color

Sets the colour of the border surrounding the selected element(s). The colours for each side may be set individually in IE4 and NS6 or later using border-top-color, border-right-color, border-bottom-color, and border-left-color.

Ex: .errormessage { border-color: #FF0000; }

border-style

Sets the style of the border surrounding the selected element(s). Styles supported by 4.x browsers are as follows: double, groove, inset, none, outset, ridge, solid. The style for each side may be set individually in IE4 and NS6 or later using border-top-style, border-right-style, border-bottom-style, and border-left-style.

Ex: .framed { border-style: ridge; }

border-width

Sets the width of the border surrounding the selected element(s). The style for each side may be set individually using border-top-width, border-right-width, border-bottom-width, and border-left-width.

Ex: .thickborder { border-width: 3px; }

margin

Sets the size of the margin between the outside of an element’s border (if any) and surrounding page elements. The margin for each side may be set individually using margin-top, margin-right, margin-bottom, and margin-left.

Ex: .spacedout { margin: 10px; }

padding

Sets the size of the padding between the inside of an element’s border (if any) and the element itself. The padding for each side may be set individually using padding-top, padding-right, padding-bottom, and padding-left.

Ex: .roomyborder { padding: 10px; }

background-attachment

Specifies whether the background image of an element (in particular, the BODY tag) scrolls with that element, or remains fixed as the element’s contents scroll over it. This attribute can be set to either fixed or scroll. This is not supported in NS4.

Ex: BODY { background-attachment: fixed; }

background-color

Sets the background colour of the selected element(s). May be set to any HTML colour code or name, or transparent.

Ex: .highlighted { background-color: yellow; }

background-image

Sets the background image for the selected element(s). May be set to a URL (note the syntax in the example below), or none.

Ex: .flowery { background-image: url(flowers.gif); }

background-position

Not supported in NS4, this attribute lets you set where an element’s background is positioned. For tiled backgrounds, this specifies the top-left corner of the first tile. For non-tiled backgrounds (see background-repeat below), it specifies the position of the top-left corner of the background image. You can specify one or two percentages, lengths, or positions (left, center, or right), where the first specifies the horizontal position and the second specifies the vertical position. If the vertical position is not specified, it is taken to be 50%.

Ex:
.flowermiddle {    
 background-image: url(flowers.gif);    
 background-position: center center;    
 background-repeat: no-repeat;    
}    
   
.watermark {    
 background-image: url(fadedlogo.gif);    
 background-position: 50px 50px;    
 background-repeat: no-repeat;    
}

background-repeat

Sets the tile method for the background image of the selected element(s). You may choose to tile the background horizontally (repeat-x), vertically (repeat-y), both ways (repeat), or not at all (no-repeat). This attribute is not supported by NS4.

Ex:
TD.sidebar {    
 background-image: url(bar.gif);    
 background-repeat: repeat-y;    
}

color

Sets the foreground colour of the selected element(s). This is usually the colour of the text within the element.

Ex:
P.inverse {    
 color: white;    
 background-color: black;    
}

list-style-type

Sets the type of list to use in a <UL> or <OL> tag. Available types for <UL> tags are circle, disc, and square. Available types for <OL> tags are decimal (1), lower-alpha (a), lower-roman (i), upper-alpha (A), and upper-roman (I).

Ex: UL { list-style-type: square; }

list-style-image

Lets you specify the URL for an image that is to be used as the bullets in a list (<DL>, <OL>, <UL>), or for a particular list item (<DT>, <LI>). A setting of none for a particular list item specifies that the default bullet should be used instead of an image, and can override an image specified for the list as a whole. This attribute is not supported by NS4.

Ex: #listItem1 { list-style-image: url(fileicon.gif); }

list-style-position

Sets whether the list marker (bullet or number) is placed inside or outside the box outlined by the list item text. Another way to look at this attribute is that a setting of inside causes the text to wrap to the beginning of the line, whereas a setting of outside causes the text to wrap to the first character after the list marker on the first line. This attribute is not supported by NS4.

Ex: OL { list-style-position: inside; }

font-family

Sets the font/typeface to be used in the selected element(s). Performs the same function as the FACE attribute of the <FONT> tag. The value should be a comma-separated list of font names in order of preference, with font names containing spaces appearing with quotes around them. As in the <FONT> tag, the last item in the list of fonts should usually be a ‘generic’ font name selected from the following: serif, sans-serif, cursive, fantasy, or monospace.

Ex: P { font-family: “Times New Roman”, Times, serif; }

font-size

Specifies the size of the font to be used in the selected element(s). You can specify the font size using one of the available presets: xx-small, x-small, small, medium, large, x-large, xx-large. The presets larger and smaller may also be used to set the font size in relation to the size inherited from a parent element, or the browser default. Alternatively, you can specify a font size in pixels (px), points (pt), ems (em), or as a percentage of the parent element’s font size (%).

Ex: .navbar { font-size: 8px; }

font-style

Specifies whether the font should be rendered normally (normal), or in italics (italic) in the selected element(s).

Ex: EM { font-style: italic }

font-variant

Can be used to display the text all in capital letters, with the lowercase letters of the source code displayed in a smaller font size. A setting of small-caps enables this effect, while normal disables it. NS4 does not support this attribute.

Ex: H1 { font-variant: small-caps; }

font-weight

Sets the boldness of the font in the selected element(s). Most browsers only really support normal and bold, but the CSS spec defines the following values: bold, bolder, lighter, normal, 100, 200, 300, 400, 500, 600, 700, 800, 900, where normal is the same as 400, and bold is the same as 700.

Ex: B { font-weight: bolder; }

letter-spacing

Specifies the spacing between characters in the selected element(s). A value of normal uses the default spacing, whereas positive and negative measurements (pt, em, px) may be used to tighten or loosen the spacing, respectively. This attribute is not supported by NS4.

Ex: .tight { letter-spacing: -0.1em }

text-align

Sets the horizontal alignment of text within the selected element(s) to left, right, center, or justify. The justify option is rendered as left in NS4 for Windows and IE4 for Macintosh.

Ex: .newscolumn { text-align: justify; }

text-decoration

Sets the text in the selected element(s) to be rendered with one of several effects including underline, overline, line-through, or none. NS4 ignores the overline setting.

Ex: A:link { text-decoration: none; }

line-height

Specifies the line spacing for the text inside the selected element(s). Acceptable values include normal (the browser default), a number (where 1 is single-spaced, 2 is double-spaced, and 1.5 is halfway between the two), a measurement (px, pt, em), or a percentage (where 100% is single-spaced). Test this attribute carefully when you use it in your designs, as it is buggy in version 4 browsers.

Ex: .doublespace { line-height: 2; }

text-indent

Sets the indent (or outdent, in the case of a negative value) of the first line of text in the selected element(s). The value may be a measurement (px, pt, em), or a percentage of the parent element’s width.

Ex: P.story { text-indent: 3em; }

text-transform

Sets the capitalization of the text in the selected element(s). A value of none specifies that text should be capitalized as in the source code. capitalize sets the first letter of every word to uppercase. lowercase and uppercase convert all letters to the specified case.

Ex: H1 { text-transform: capitalize; }

vertical-align

Sets the vertical alignment of text within the selected element(s) (bottom or top), or of the selected element(s) in relation to the surrounding text (baseline, middle, sub, super, text-bottom, or text-top).

Ex: .superscript { vertical-align: super; text-size: smaller }