Developer

Get to know the properties behind CSS 1

Cascading Style Sheets are widely touted as the next step in Web content formatting, provided you can employ them efficiently. This article introduces the various properties available in CSS 1 and explains how to get the most out of them.


HTML isn’t truly designed to format text but merely to standardize content. That's why Web developers need to look more closely at Cascading Style Sheets (CSS). CSS lets you avoid the cumbersome formatting repetition inherent in conventional HTML coding, so you can streamline design—but only if you implement it properly.

CSS-Level 1 associates rules (font, color, font-weight, etc.) to the various elements of an HTML document. You can apply these rules to single document elements, document elements of a certain type, or to designer-specified document elements. With CSS 1, it is no longer necessary to include <font> tags for the various elements in an HTML document. Instead, you can create a single style sheet to dictate formatting throughout a document. In addition, individual page elements can have their own style attributes that override the document-level style sheet—hence the Cascading in Cascading Style Sheets.

CSS rules consist of a selector and a declaration. The selector is the link between the HTML element and the declaration. For example, a selector of TABLE would apply to the <table> element, and a selector of BODY would apply to the <body> element. Declarations consist of two parts, a property and a value, such as {border-bottom: thin}. So coding TABLE {border-bottom: thin} would associate a thin bottom border with the <table> element. Table A and Table B list the various properties available with the CSS 1 specification.

Table A
Family Property Description
box border     This is the shorthand to set border-width, border-style, and border-color.
box border-bottom      This is the shorthand to set border-bottom-width, border-style, and border-color.
box border-bottom-width            Valid values are thin, medium, thick, and length.
box border-color This sets the color for the each of the four borders.
box border-left This is the shorthand to set border-left-width, border-style, and border-color.
box border-left-width Valid values are thin, medium, thick, and length.
box border-right This is the shorthand to set border-right-width, border-style, and border-color.
box border-right-width Valid values are thin, medium, thick, and length.
box border-style This sets the style for each of the four borders. Valid values are none, dotted, dashed, solid, groove, ridge, inset, and outset.
box border-top This is the shorthand to set border-top-width, border-style, and border-color.
box border-top-width Valid values are thin, medium, thick, and length.
box border-width This is the shorthand to set border-bottom-width, border-left-width, border-right-width, and border-top-width.
box clear This determines whether and where floating elements are permitted. Valid values are none, left, right, and both.
box float This sets where an element will appear within another element. Valid values are left, right, and none.
box height This sets an element's height. Valid values are length and auto.
box margin This is the shorthand to set margin-bottom, margin-left, margin-right, and margin-top.
box margin-bottom This sets the bottom margin of an element. Valid values are auto, length, and percentage.
box margin-left This sets the left margin of an element. Valid values are auto, length, and percentage.
box margin-right This sets the right margin of an element. Valid values are auto, length, and percentage.
box margin-top This sets the top margin of an element. Valid values are auto, length, and percentage.
box padding This is the shorthand to set padding-bottom, padding-left, padding-right, and padding-top.
box padding-bottom This sets the bottom padding of an element.
box padding-left This sets the left padding of an element.
box padding-right This sets the right padding of an element.
box padding-top This sets the top padding of an element.
box width This sets an element's width. Valid values are auto, length, and percentage.
Classification display This determines how and whether an element is displayed. Valid values are block, inline, list-term, and none.
Classification list-style This is the shorthand to set list-style-type, list-style-image, and list-style-position.
Classification list-style-image This sets the image that will be used as the list-item marker.
Classification list-style-position         This sets how the list-item mark is displayed in context. Valid values are inside and outside.
Classification list-style-types This sets the appearance of the list-item marker. When the list-style-image is none, the image is unavailable.
Classification       white-space This sets how whitespace is to be handled. Valid values are normal, pre, and nowrap.

Table B
Family          Property Description
color background This is the shorthand to set background-attachment, background-color, background-image, background-position, and background-repeat.
color background-attachment          This determines whether the background-image is fixed or whether it scrolls. The value fixed keeps the image in its original position, while value scroll will allow the image to follow the page scroll.
color background-color This sets the background color of an element.
color background-image This sets the background image of an element.
color background-position This sets the initial position of the background image.
color background-repeat This determines how and whether the background-image is repeated; value repeat repeats image vertically and horizontally, value repeat-x repeats the image only horizontally, value repeat-y repeats the image only vertically, and value no-repeat prevents image repetition.
color color This sets the foreground (text) color.
font font This is the shorthand to set font-family, font-size, font-style, and font-variant.
font font-family This is a list of font family names with alternates separated by commas.
font font-size Valid values are absolute-size, relative-size, length, and percentage.
font font-style Valid values are normal, italic, and oblique.
font font-variant Valid values are normal and small-caps.
font font-weight Valid values are normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, and 900. Values normal and 400 produce the same results, as do the values bold and 700.
text letter-spacing This sets the default spacing between letters.
text line-height This sets the spacing between lines. Valid values are normal, number, length, and percentage.
text text-align This sets the horizontal spacing of text within an element. Valid values are left, right, center, and justify.
text text-decoration Valid values are none, underline, overline, line-through, and blink.
text text-indent This sets the indention for an element. Valid values are length and percentage.
text text-transform Valid values are none, capitalize, uppercase, and lowercase.
text vertical-align This sets the vertical positioning of an element. Values are baseline, sub, super, top, text-top, middle, bottom, text-bottom, and percentage.
text word-spacing This sets the default spacing between words.

The cascade
There are several methods of applying style sheets to an HTML document; however, not all methods are equal. The application method determines the order in which the CSS rules are applied. In CSS terms, the method dictates the cascade. The list below describes the order in which each "law" of the cascade applies:
  1. Inline Style using the element’s style attribute
  2. Internal Style Sheet using the <style> tag, except where it conflicts with the first law
  3. External Style Sheet using the <style> tag, except where it conflicts with the first or second law
  4. External Style Sheet using the <link> tag, except where it conflicts with the first, second, or third laws
  5. Browser default, except where it conflicts with the first, second, third, or fourth laws

Examples
 

Inline 
<h1 style=color: red>Header</h1>

Internal <style> tag 
<style type=text/css>
H1
{
color: red
}
</style>

External <style> tag 
<style type=text/css>
@import url(h1.css);
</style>

External <link> tag 
<link rel=STYLESHEET href=h1.css type=text/css />

CSS perks
Implemented properly, CSS 1 offers a number of advantages. It lets you streamline design by sidestepping the formatting repetition of conventional HTML coding, and it enables you to provide a common look and feel to a site. In addition, by using external Cascading Style Sheets, you can change the styles of a number of pages by altering only a single file.

 

Editor's Picks

Free Newsletters, In your Inbox