The University of Texas at Austin- What Starts Here Changes the World
Services Navigation


Cascading Style Sheets

Introduction

A style sheet provides a set of rules describing how a document should appear. Each style rule sets a property for an HTML tag or set of tags. Style sheets maintain the separation between structural and presentation information, and provide for a graceful fall-back if the specific presentation requested by the style sheet is not available. Covering the entire style sheet mechanism is beyond the scope of this site, but we will provide a general introduction, some useful examples, and, we hope, generate interest in using this technology in your Web development for styling and positioning elements on your web pages.

CSS Properties

The most widely used CSS properties fall into six categories:
Color:
Text colors, background colors and background images.
The text color and background color are set with the color and background-color properties respectively. The background-image property can be set to a URL from which an image is loaded and used as the background for the page.
Fonts:
Several properties can be set relating to fonts. The font-size property can be set using several different units of measurement. For example, some typical sizes might be: 16px (pixels), 1.2em, (1em is the height of the character box for any given font), or 76% (ends up being a smaller than standard font size). You can declare a base font size in the body style rule (selector). If the base size is a relative amount such as 1.2em or 76%, then is relative to the default font size on the user's system. Whatever you declare as the font-size in your body selector, all other font-size declarations will be relative to that size. For example, if you have 1.2em in your body selector, if you delare h1 to be 200%, it will be 2.4em or 2.4 times the size of the users default font size or twice the size of your body font-size.
Text:
Text properties include word-spacing, to control the spacing between words, letter-spacing to control the spacing between letters, text-decoration to render the text underlined, overlined, with a line through it, or even (ick) blinking.
Boxes:
box properties The box properties control borders, padding, and margins around HTML elements.
Positioning:
Allows fine-grained control of the layout of a Web page. The x,y, and z coordinates of an HTML element can be set absolutely, floated to one side, or set relative to their default position.
Classification:
There are several categories into which HTML elements can be placed. These categories include how the element should be displayed: inline, in a separate block (like a blockquote or a table), as an item in a list, or not at all. How whitespace is treated: the normal way where multiple white space is collapsed (i.e. multiple spaces between words produce the same result as a single space) and line breaks are inserted by the browser, as pre-formatted text (just as if the text were within a pre tag), or nowrap, where white space is collapsed, but line breaks are only generated by a <br /> tag. There are also several properties to control how list elements are displayed.
Style sheet comments are demarcated by /* ... */.

CSS Rules

The simplest style rules associate a style declaration with an HTML tag. The following rule assigns the value green to the color property of first-level headers, i.e. h1's are green.
h1 {color: green;} or h1 { color: #00FF00; }
Multiple properties set in the same rule are separated by semicolons. This style might be used by a well-known high-tech culture magazine:
h1 {
color: white; background-color: red; font-family: Arial, sans-serif;
}

header sample

or

h1 {
color: #fff; (short cut for #ffffff) background-color: #f00; (short cut for #ff0000) font-family: Arial, sans-serif;
}
The header is displayed in white text on a red background. The Arial font is used, or if it is not available, a default sans-serif font will be used. The ability to assign a list of values to a property is an important feature of CSS. Each value is attempted in turn, from left to right, until one is found that the system can display.



  Updated 2006 August 14
  Comments to www@www.utexas.edu