UO Libraries Home Page

Web Publishing Curriculum Resources
Cascading Style Sheet Summary

Anatomy of a CSS Rule

Notes:

  1. Style sheets allow you to control how HTML elements are presented on the web. Style sheet properties are regulated by the World Wide Web Consortium (W3C); their web site has extensive information available on cascading style sheets, including specifications (what's allowed and what isn't) and current recommendations.
  2. There are many benefits to using style sheets, not least among them the ability to easily and quickly make changes to the appearance of an entire site. But there's a downside as well – not every web browser has implemented style sheets to the same degree. There's a huge difference, for example, in the style sheet support provided by Netscape 4.x and Internet Explorer 5.x browsers. And Internet Explorer 6.x differs substantially from the previous generation of IE browser (but in a good way – it is more true to the CSS standards). For this reason, there are a few rules of thumb in using style sheets:
    • Design for graceful degradation, and for pages that still look at least readable in non-CSS browsers. Test all pages with CSS turned off. Test frequently in multiple browser environments.
    • For complex uses of CSS (e.g., positioning and dynamic HTML) use an authoring tool such as Dreamweaver or GoLive – but avoid older tools such as Claris Home Page or FrontPage 97 even for simple use of CSS.
    • Add style rules incrementally, testing in between. Styles and HTML elements interact in complex, and often unpredictable, ways. If possible, avoid cascading (e.g., with both institutional and personal style sheets).
  3. There are four ways to include styles in an HTML document:
    • embedded: in the head of a document, using the style element;
    • linked: in a separate document, linked using the link element;
    • inline: within the body of an HTML document, using the style attribute with any HTML element; and
    • imported: within the head of an HTML document, and within the style element, using the @import directive (always on the first line within the style element). This last method is sometimes used to hide certain style sheet rules from browsers that do not display certain properties as expected.

    Example: 

    <html>
<head>
<title>Four Ways To Include Styles</title>
<link rel="stylesheet" type="text/css" href="linked-styles.css" /> [linked]
<style type="text/css"><!-- [embedded]
   @import url(imported-styles.css); [imported]
   body {
      background-color: #000000;
      color: #ffffff;
      font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif;
   }
--></style>
</head>

<body>
<h1>Four Ways To Include Styles</h1>

<p style="text-align: justify">This paragraph will be [inline]
justified on both the left and right margins. This is accomplished through
the use of an inline style. Notice also that this HTML document includes
linked, embedded, and imported style sheets. It is not common for all four
methods to be used in one HTML document, however, as it is likely to
introduce conflicts between style rules.</p>
</body>
</html>
  4. In addition to defining styles for selectors, or HTML elements, it's possible to create rules that can apply to any selector, using classes and ID selectors. Class names are prefixed by a period (.) and ID selector names by a hache mark (#). The following example demonstrates how they are introduced within the body of an HTML document. 
    <html>
<head>
<title>Classes and Identifiers</title>
<style><!--
   .sky { background-image: url(sky.jpg); } [class selector defined]
   #content { margin: 0 10%; } [id selector defined]
--></style>
</head>

<body>
<div id="content"> [id selector applied]
<h1>Classes and Identifiers</h1>

<p class="sky">This paragraph will sit on top of a [class selector applied]
background image of the sky. It is enclosed within a division that is
centered on the screen, with margins on either side that equal 10% of the
width of the screen.</p>
</div>
</body>
</html>
  5. Some elements, primarily the anchor element, have different "states;" these are represented by pseudo-classes, in the following manner: 
          a:link { color: #006600; font-weight: bold; }
      a:visited { color: #666666; font-weight: bold; }
      a:hover { color: #000000; background-color: #ffffcc; }
  6. The concept of inheritance refers to whether the properties of a parent element, say, the body, are inherited by elements contained within it. In many cases, properties are inherited. However, there are a few properties where this would be highly undesirable; these are noted in the chart below.
  7. The "cascade" in cascading style sheets is a method of defining the weight (importance) of individual style rules, and is used when conflicts occur between rules applied to the same selector. For a good explanation of how the cascade works, see Style Sheets Guide: The Cascade. In general, frequent testing as you develop a style sheet will tell you what works and what doesn't.
  8. <length> values indicated in the tables below are based on either absolute or relative values:
    Absolute ValuesRelative Values
    • in: Inch
    • cm: Centimeter
    • mm: Millimeter
    • pt: Point = approximately 1/72 inch
    • pc: Pica = 12 points, or about 1/6 inch
    • em: the width of a lowercase m in a font
    • ex: the height of a lowercase x in a font
    On the web, relative values are preferred over absolute values. Because user environments vary widely, absolute values can provide unexpected results. Relative and percentage values are generally safer because they adjust according to the user's environment.

This chart represents only a partial listing of the properties that are part of the Casccading Style Sheet Level 1 specification. For a full listing, see the W3C specification.

Color and Background Properties
Property Possible Values Initial Value Applies to: Inherited?
color <color> Determined by browser All elements Yes

Specifies the color of an element. A color value is a numerical RGB specification.

Example:
a:link { color: #006600; }

Property Possible Values Initial Value Applies to: Inherited?
background-color <color>
transparent		 transparent All elements No

Specifies the background color of an element. A color value is a numerical RGB specification. Background colors are almost always specified in conjunction with a foreground color to make sure that colors are readable and have good contrast (the foreground color may be inherited).

Examples:
body { background-color: #ffffff; color: #000000; }
a:hover { background-color: #ffffcc; }

Property Possible Values Initial Value Applies to: Inherited?
background-image url(<filename>)
none		 none All elements No

Sets the background image of an element. To ensure compatibility across browser environments, background-image should, in most cases, be accompanied by background-color (some browsers do not display the background image).

Examples:
body { background-color: #ffffff; background-image: url(/images/thatch.gif) }
blockquote { background-image: url(sky.jpg) }

Font Properties
Property Possible Values Initial Value Applies to: Inherited?
font-family <family-name>
serif
sans-serif
cursive
fantasy
monospace		 Determined by browser All elements Yes

Any font family name may be used. Font family names that include a white space (e.g., Times New Roman) must be enclosed in single or double quotation marks. If more than one font family is specified, the browser will use the first one it finds on the local computer. Generic fonts (e.g., serif, sans-serif) will display the first font from that family available on the user's computer. It's a good idea to include a generic font in case none of the specified fonts is available.

Examples:
body { font-family: Verdana,Tahoma,Arial,Helvetica,sans-serif; }
h1 { font-family: Georgia,'Times New Roman',Times,serif; }

Property Possible Values Initial Value Applies to: Inherited?
font-size xx-small
x-small
small
medium
large
x-large
xx-large
<length>
<percentage>		 medium All elements Yes

Modifies the size of the displayed font. Absolute lengths (e.g., 9pt, 0.25in) should be used sparingly because of variations in different browsing environments. Fonts with absolute lengths can very easily be too small or too large for a user. Style sheets using the font-size property should be tested in several browser environments.

Examples:
h1 { font-size: xx-large; }
h2 { font-size: 125%; }
address { font-size: 9pt; }

Property Possible Values Initial Value Applies to: Inherited?
font-style normal
italic		 normal All elements Yes

The font-style property is context-sensitive.

Examples:
h4 { font-style: italic; }
address { font-style: normal; }

Property Possible Values Initial Value Applies to: Inherited?
font-weight normal
bold
100
200
300
400
500
600
700
800
900		 normal All elements Yes

Defines the weight (boldness) of an element.

Examples:
h1 { font-weight: 900; }
a:link { font-weight: bold; }

Text Properties
Property Possible Values Initial Value Applies to: Inherited?
text-transform none
capitalize
uppercase
lowercase		 none All elements Yes

Should be used only stylistically, rather than to, say, capitalize proper nouns.

Example:
h3 { text-transform: uppercase; }

Property Possible Values Initial Value Applies to: Inherited?
text-align left
center
right
justify		 Determined by browser Block-level elements Yes

Applied to block-level elements (p, h1, etc.) to align a block of text. Replaces the HTML "align" attribute on paragraphs, headings, and divisions.

Examples:
h1 { text-align: center; }
blockquote { text-align: justify; }

Box Properties
Property Possible Values Initial Value Applies to: Inherited?
border <border-width>
<border-style>
<border-color>		 Not defined All elements No

Creates a border of 1 to 4 sides. Shorthand for border-top, border-right, border-bottom, border-left.

  • Values for border-width: thin, medium, thick, <length>
  • Values for border-style: none, dotted, dashed, solid (default), double, groove, ridge, inset, outset
  • The border-color value is a numerical RGB value

Examples:
h1 { border: medium double #000000; }
address { border-top: 1px solid #999999; }

Property Possible Values Initial Value Applies to: Inherited?
margin <length>
<percentage>
auto		 Not defined All elements No

Sets the margins of an element (space around an element) by specifying between one and four values (margin-top, margin-right, margin-bottom, margin-left), where each value is a length, a percentage, or auto. Percentage values refer to the parent element's width. Negative margins are permitted.

Examples:
h1 { margin-top: 10px; }
td {margin: 0.2em; }
blockquote { margin: 0 2em; } [ 0=top/bottom; 2em=left/right ]
div { margin: 10px 10% 0 10% }

Property Possible Values Initial Value Applies to: Inherited?
padding <length>
<percentage>		 0 All elements No

Shorthand for padding-top, padding-right, padding-bottom, and padding-left. An element's padding is the amount of space between the border and the content of the element; up to four values may be specified; each value is either a length or a percentage. Percentage values refer to the parent element's width. Negative values are not permitted.

Examples:
address { padding-left: 3em; }
td { padding: 0.2 em; }
blockquote { padding: 0 2em; } [ 0=top/bottom; 2em=left/right ]
div { padding: 10px 10% 20px 10% }
Maintained by: JQ Johnson, jqj@uoregon.edu
Last Modified: 11/30/2006