Home > Resources > Web Development > Web Tips > Cascading Style Sheets (CSS) > How to Use CSS

Cascading Stylesheets: How To Use CSS

Here are a few tips to get you started using CSS effectively. Many more CSS resources are available on the Web. The best way to learn is to look at the code of pages and sites you want to emulate.

Types of Styles | FrontPage 2003 | Dreamweaver MX 2004 | Page Layout | Organizing CSS Code

Types of Styles

  • Inline styles format a specific tag on one page. The style attribute is much like other HTML attributes, though it can contain more than one style declaration, separated by semicolons.
    • For example, to make a heading tag blue, change <h1> to <h1 style="color: blue;">
  • Internal (embedded) stylesheets apply to one or more tags on one page. For example:
    • To make all heading tags <h1> and <h2> in the page blue, add these lines to the <head> section of the code:
      <style type="text/css">
      h1, h2
      {
          color: blue;
      }
      </style>
    • To make one or more heading tags larger using a class, change <h1> to <h1 class="large"> and add a style to the header:
      <style type="text/css">
      .large
      {
          font-size: 3em;
      }
      </style>
    • To make one heading tag larger using an id, change <h1> to <h1 id="huge"> and add a style to the header:
      <style type="text/css">
      #huge
      {
          font-size: 250%;
      }
      </style>
  • External (linked) stylesheets can be included in multiple pages using a link tag.
    • For example, if you have a stylesheet file named styles.css, you can include it into any HTML document by adding this line in the <head> section of the code:
      <link href="styles.css" rel="stylesheet" type="text/css" />
  • Which style will be used? If there is a conflict, the order of priority/importance is inline > internal > external > browser default.

CSS Tips for FrontPage 2003

  • To create an internal style to modify the style of an existing tag:
    1. Click Format, Style... Click a tag such as h1 and click Modify... Click Format, Font... Select a font, size, style, color, effects, and/or character spacing. Click OK 3 times.
    2. You should see that all h1 tags in the document are now formatted differently.
    3. Click the Code tab in the lower left corner to see the CSS code that was inserted into the HTML document for you. Click the Design tab to return to the normal view.
  • To create a selector (class) to modify the style of selected tags:
    1. Click Format, Style... Select User defined styles from the List menu. Click the New button. Type a name for the selector (e.g. large). Click Format, Font... Type in a different font size (e.g. 3em). Click OK 3 times.
  • To apply a class to a tag:
    1. Select some text (such as a header) that has a tag associated with it.
    2. Click Format, Style..., and the style name (e.g. .large).
      Or click the arrow in the Style menu (in the upper left corner, left of the font menu) and click the style name.
    3. Click OK. You should see the text has become larger.
  • To create an id to modify the style of a single tag:
    1. Click Format, Style... Select User defined styles from the List menu. Click the New button. Type a name for the selector, starting with a # symbol (e.g. #huge). Click Format, Font... Type in a different font size (e.g. 250%). Click OK 3 times.
  • To apply an id to a tag:
    1. Switch to Code or Split view.
    2. Add an id attribute to the tag, e.g. replace <h1> with <h1 id="huge">
    3. Switch to Design view, or press F5 if you are in Split view. You should see the text has become larger.
  • To create an external stylesheet:
    1. Click File, New, more page templates...
      Or click the arrow next to the white icon in the upper left corner and click Page...
    2. Click the Style Sheets tab. Select a stylesheet and click OK. Make any desired changes to the styles. Click File, Save As and give the stylesheet a name (e.g. styles.css).
  • To link a document to an external stylesheet:
    1. Open any HTML document. Click Format, Style Sheet Links... Click Add. Browse to locate the external stylesheet file which has a .css extension (e.g. styles.css). Click OK twice.
    2. You should see that your HTML document has changed to use the styles in the external stylesheet.

CSS Tips for Dreamweaver MX 2004

  • To create an internal style to modify the style of an existing tag:
    1. Click Text, CSS Styles, New...
      Or click the New CSS Style button at the bottom of the CSS Styles tab in the Design panel.
    2. For the Selector Type, click the Tag radio button. Select the tag (e.g. h1) from the tag menu. Select the radio button Define in: This document only. Click OK. Select properties such as font and/or size. Click OK.
    3. You should see that all h1 tags in the document are now formatted differently.
    4. Click the Code tab in the upper left corner to see the CSS code that was inserted into the HTML document for you. Click the Design tab to return to the normal view.
  • To create a selector (class) to modify the style of selected tags:
    1. Click Text, CSS Styles, New...
    2. For the Selector Type, the Class radio button should be selected. Type the tag name (e.g. .large). Select the radio button Define in: This document only. Click OK. Select some properties and click OK.
  • To apply a class to a tag:
    1. Select some text (such as a header) that has a tag associated with it.
    2. Click the Style menu (in the Properties window, near the bottom of the screen) and click the style name (e.g. large).
    3. You should see the text of the selected tag has changed.
  • To create an id to modify the style of a single tag:
    1. Click Text, CSS Styles, New...
    2. For the Selector Type, click the Advanced radio button. Type the tag name, starting with a # (e.g. #huge). Select the radio button Define in: This document only. Click OK. Select some properties and click OK.
  • To apply an id to a tag:
    1. Select some text (such as a header) that has a tag associated with it.
    2. Right-click the tag (e.g. h1) in the bar just below the document and above the Properties window.
    3. Move to the Set ID menu and click the style name (e.g. #huge).
    4. You should see the text of the selected tag has changed.
  • To create an external stylesheet from a template:
    1. Click File, New... In the General tab, click CSS Style Sheets. Select a stylesheet in the right side of the dialog box, and click Create.
    2. Make any desired changes to the styles. Click File, Save As and give the stylesheet a name (e.g. styles.css).
  • To link any HTML document to an external stylesheet:
    1. Open the HTML document.
    2. Click Text, CSS Styles, Manage Styles... and click Attach.
      Or click the Attach Style Sheet button at the bottom of the CSS Styles tab in the Design panel.
    3. Browse to locate the external stylesheet file which has a .css extension (e.g. styles.css). Click OK. Click Done.
    4. You should see that your HTML document has changed to use the styles in the external stylesheet.
  • To modify the style of a selector in an internal or external stylesheet:
    1. Click the CSS Styles tab in the Design panel. Double-click any style.
    2. In the CSS Properties tab, click the + next to any category (e.g. Font) and fill in a value for any of the CSS variables (e.g. font-size).

Page Layout using CSS

  • To create page layout using HTML only, designers create a large table and put parts of the page into table cells. Sometimes designers put tables within tables to further organize content. These methods usually work for most users, but the resulting pages are often not very accessible.
  • To create page layout using CSS, use div tags instead of tables and table cells. Think of a div as a rectangular box that holds content. It behaves much like a table, image or other rectangular element. Divs are used to contain one or more elements including other divs, just like tables can contain cells and other tables.
  • To position a div, image or table to the left or right part of the screen, use float: left or float: right.
    • To keep following content from wrapping next to a floated element, use clear: both.
  • To center a heading or other block of text, use text-align: center.
    • There are various ways to center the entire body of a document but left-align the text, e.g.
      • Fixed width body:
        <div align="center">
        <div style="width: 780px; text-align: left;">
        contents
        </div>
        </div>
      • Variable width body (preferred):
        <div style="margin: 0% 10%;">
        contents
        </div>
  • To position something at an exact location on the screen, use position: absolute and specify the distance from top, bottom, left and/or right of the page.
    • Note that this may cover up something else in the same position. To position this layer on top, use a higher positive value for z-index.
  • You can set the width and height of a div to more precisely control its size.
    • By default, a div is as wide as the screen. Use display: inline to make it as narrow as its contents.

Organizing CSS Code

  • Use HTML tags as they were designed to be used. (Show the semantic structure of the content.)
    Use h1 for the main page header. Use h2 for subheadings. Use p for paragraphs. Use ol and ul for ordered and unordered lists. Use table for tabular data.
  • Format using CSS instead of HTML as much as possible.
    Avoid HTML formatting tags like font, b, i, u, br, and hr.
    Avoid HTML formatting attributes like color, bgcolor, border, width and height.
  • Keep as many styles as possible in external stylesheets.
    This assures that all the pages in the site have the same formatting and layout.
    Use internal and inline styles sparingly, e.g. for features unique to a single page or single element of it.
  • Consider grouping related styles together for easier editing. For example,
    • Use separate sections for styles of page sections such as header, footer, navigation bar, and content.
    • Separate global styles that override HTML tags (e.g. body, h1, p, li) from local styles for classes and IDs (e.g. div#header or p.small).
    • Use separate styles for color scheme, font and page layout.
  • Explain your styles using comments (enclosed in /* */).
    This is especially at the top of groups of styles, and near code that may not be obvious to someone else.
  • Use a consistent code formatting scheme for readability.
    For example, put { and } in the left margin on separate lines, and indent lines between them with one tab.