Get Help

Course Outline

Offered by Networked Information Services

CSS Basics

  1. Why use CSS?
  2. How to use CSS?
  3. How the “cascade” works

CSS Basics Hands-on Exercises

  1. Create a secondary stylesheet
  2. Redefine a style in the secondary stylesheet that exists in the primary stylesheet

Tags and Attributes

  1. The <div> tag
  2. The <span> tag
  3. The “id” attribute
  4. The “class” attribute

Spacing

  1. Time to stop using graphics for spacers
  2. Padding
  3. Margin
  4. Layout spacing
  5. Element spacing

Spacing Hands-on Exercises

  1. Set spacing of text columns
  2. Set spacing of a photo
  3. Set spacing between paragraphs
  4. Set spacing of list items
  5. Set spacing of headings

Tables

  1. Table headers
  2. Table rows and columns

Tables Hands-on Exercises

  1. Change <td> tags to <th> tags in existing table
  2. Create style for table headers
  3. Create styles for table rows

Photos and Captions

  1. When and how to use photos and captions
  2. Nesting <div> tags for the two components
  3. Creating styles for your photo and caption

Photos and Captions Hands-on Exercises

  1. Create a <div> for your photo
  2. Create a <div> for your caption placing it inside the photo’s <div>
  3. Insert the photo and set the width of the <div>
  4. Insert the caption text
  5. Create styles for both <div> tags

Other Styled Elements

Pullquotes

  1. When and how to use a pullquote
  2. Creating styles for your pullquote

Pullquotes Hands-on Exercises

  1. Create a <div> or <span> for your pullquote
  2. Copy/paste the text inside tag
  3. Creating styles and apply to your tag

Sidebars

  1. When and how to use a sidebar
  2. Creating styles for your sidebar

Sidebars Hands-on Exercises

  1. Create a <div> or <span> for your sidebar
  2. Copy/paste the text inside tag
  3. Creating styles and apply to your tag

Hiding Elements

  1. Why hide elements?
  2. How to hide elements

Hiding Elements Hands-on Exercises

  1. Create a <div> for your header graphic
  2. Place an <h1> header inside the <div>
  3. Apply the style to hide the <h1> header text
  4. Set the background as your header graphic image