skip navigation

The Ohio State University

  1. Help
  2. Campus map
  3. Find people
  4. Search OSU

Web Accessibility Center home page.

  • Web Accessibility Center
Page 9 of 10.

Beginning   PREVIOUS || NEXT   End

Formatting with Style Sheets

Style sheets are the preferred way to add formatting to your web pages, because styles offer the most formatting control for the designer and the most flexibility for the user.

What is CSS?

CSS stands for Cascading Style Sheets. Styles define how to display HTML elements and are normally stored in a separate file (###.css) and linked to the HTML document that uses those styles. Multiple style definitions will cascade into one, allowing users to customize their experience with your web pages without interfering with the content.

Forms of Styles

Cascading styles can be created in several different forms.

In-line styles: appears inside the HTML element. For example to center some text, you may choose to use the "align" formatting attribute inside the P element.

<p align="center">This text will appear centered.</p>

Internal styles: style definitions are stored in the HTML document, located between the HEAD element tags. For example, if you wanted the body of your page to have a blue background and your text to be yellow, you might have a style that looks like this:

<head>
<title>Page with embedded styles</title>
<style>
<!--
body { color: #FFFF00; background-color: #000080 }
-->
</style>
</head>

External Style Sheet: style definitions are stored in a separate CSS file (name.css). In the HEAD element of the style sheet is linked to the document.

<head>
<link rel="stylesheet" type="text/css" href="mystyles.css" />
</head>

Browser Default: no styles are defined. Pages will use the settings customized by the user or the default settings included with the browser software.

This tutorial uses the internal or embedded styles. Linked styles are a better option for site management to insure consistency across pages. However, linked styles requires more knowledge of CSS design. For more, see the WAC handout: "WAC Workshop: Cascading Style Sheets." You can practice building CSS online using the excellent W3Schools CSS tutorial.

Create a New Embedded Style

Managing styles in Dreamweaver requires that you have the DESIGN window open and available. If you do not see this window, from the WINDOW menu, choose CSS STYLES or press SHIFT + F11 to toggle the window open and closed.

CSS Styles Design Window
CSS Styles Design Window

Practice.htm: Note that some styles have already been created for you in the practice file. These styles format the menu links at the top of the page and require more advanced knowledge of CSS to create. For this tutorial, you will need to redefine the BODY and H1 tags and create one customized style: .piccaption.

  1. From the TEXT menu, choose CSS STYLES and NEW…
    OR click on the new style button new CSS style button. in the DESIGN window.
  1. The NEW STYLE dialog box appears.
    New CSS dialog box.
  1. In "Selector Type" choose either "Class" (which creates a custom style) or "Tag" (which redefines an existing HTML tag H1, H2, UL, IMG, and etc.). The "Advanced" option is discussed in our intermediate tutorial.
  2. In the "Tag" box:
    • If Type="Class", give the style a unique name beginning with a period and with no spaces or special characters. Examples: .menuitem, .indent, .textdarkred, .makebigger
    • If Type="Tag", select the HTML tag you wish to redefine from the drop-down box next to the input box. Note: the BODY tag is a special tag that represents the default for the entire page. It is used to set the default font family, size, and color, as well as the page background color or image.
  3. In "Define in" select the radio button next to "This document only." This selects embedded rather than linked styles.
  4. Click OK.

Define Your New Style

  1. The CSS STYLE DEFINITION dialog appears. In this dialog, you can set or change all the attributes for your styles. Use the categories on the left to see more style options. You only need to change those items you want to appear in your style. Leave all other options blank.

    CSS style definition box. Category TYPE highlighted.
    Pictured above : Callout one: Include a range of Fonts to insure the users has one of the listed fonts installed on his/her machine. Callout two: Usability tip: use relative sizing whenever possible to define font and screen sizes.

  2. When you have set all your styles, click OK. The new style now appears in your CSS STYLES DESIGN window.
    CSS Styles Design window showing the new Body style.

Applying Your Custom Styles

If you reformat an existing HTML tag, you do not need to do anything special to apply the formatting. For custom styles, you must apply the style to the text or paragraph. In most cases, you want the style to apply to the entire paragraph. Avoid using the SPAN tag whenever possible.

Apply a style to an entire paragraph.

  1. Place your cursor inside the paragraph you want to format. Do not select any text or text area.
    Hint: avoid already formatted text like links, italics, or bold areas. Place your cursor in an area of the paragraph that contains no formatting.
  2. In the PROPERTIES window, use the drop-down box next to the STYLE box to select the style you want to apply. The style will be applied.
    For a paragraph, the style should appear in the P tag: <p class="mystyle">Style text</p>.

Apply a style to a section of text.

  1. Select the text you want to format.
  2. In the PROPERTIES window, use the drop-down box next to the STYLE box to select the style you want to apply. The style will be applied.
    For a section of text, the style should appear within a new SPAN tag that encompasses the text: <span class="mystyle">Styled text</span>.

Styles can be applied to any tag P, H1, DIV, IMG, A, and etc. -- or can be inserted using the SPAN tag. However, applying styles properly may require some editing in the code view window.

 

 

Page 9 of 10.

Beginning   PREVIOUS || NEXT   End

OSU Web Accessibility Center (WAC)
1760 Neil Ave 150 Pomerene Hall Columbus, Ohio 43210
Phone: (614) 292-1760 Fax: (614) 292-4190 E-mail: webaccess@osu.edu
For questions or problems with this site, including incompatibility with assistive technology, email the WAC Webmaster.

 

 

Our Partners