Tutorial: CSS and Visual Design

Style Sheets!

Cascading Style Sheets

The Latest HTML Fad!

More control!

Less typing!

Makes Sense!!

Cascading Style Sheet Overview

Cascading Style Sheets (CSS) or just style sheets are used to format XHTML content in a visually pleasing manner. They are often used to design the look of today's professional Web sites in a template that can be applied to multiple or all pages in a Web site. There are a number of ways that CSS is used. Use the following links and view the source to get an idea of what CSS is all about:

  • Web page without CSS
    • view source, note how there are no tag attributes or formatting specified
  • Same Web page with inline CSS
    • view source, check out the body and h1, h2, h3 tags
  • Same Web page with internal (embedded) CSS using tags and class
    • view source, note the styles specified in the head of the code save a lot of work specifying properties in each individual tag, note how they are called from the tags for example <h2 class="style1">
  • Embedded CSS using tags and id
    • view source, note how id styles can be applied to any tag, for example to change the color of the font in headings, paragraphs, and lists
  • Embedded CSS with tag properties specified
    • view source, note how tag properties can be defined for all uses of the tag, when you do this, you needn't add anything to the tags in the HTML code, notice also how <p>, <a>, and <li> share one style
  • Embedded CSS with box defined
    • view source, check out the use of the span tag, there are many ways to lay out content horizontally and vertically in boxes on the page -this is one simple example, today's Web sites use CSS rather than tables for Web page layout

External Style Sheets

External Style sheets move the style specifications from the head of the HTML file to a separate .css file. The .css file is then linked to the HTML file using the <link> tag. An external style sheet can be applied to multiple documents within a Web site so that the look and feel, or style, of the pages are consist ant. Click the below images to view the effects of external style sheets on an HTML file.

Open the style2 page above by clicking it, and view the source. Note that the HTML is very simple with little formatting commands. The style of the page is applied in one command in the <head>:

<link href="styles/styles_demo_black.css" rel="stylesheet" type="text/css" />

View the style sheet (.css file) at http://service.cs.fsu.edu/CGS3066/assignments/a2/styles/styles_demo_black.css.

Click here for a more dramatic example of the power of CSS.

On Your Own

Learn about how to use cascading style sheets by following the steps below.

  1. Work through the tutorial on CSS at http://www.html.net/tutorials/css/.
  2. Check out the following valuable resources:
  3. Use the following additional resources as needed.

When you complete your in dependant study, you should have a solid understanding of the following:

  • The purpose of CSS
  • The syntax of CSS using class and id selectors
  • Inline styles
  • Internal (embedded) style sheet
  • External style sheet
  • Applying styles to:
    • Background
    • Text
    • Font
    • Border
    • Margin
    • Padding
    • Lists
  • Using styles to define positioning and dimensions of objects
  • The use of <div> and <span> to apply styles

Visual Design

Colors

Style

Accessibility

Examples

Everything but the kitchen sink at http://www.maxdesign.com.au/presentation/