Web Programming in CSS3


Course Duration: 15 hours

Cascading Style Sheets (CSS) is a style sheet language used for describing the look and formatting of a document written in a markup language.

CSS page layout with divs

  • Introduction and History of CSS
  • Using Div Tags and CSS for Page Layout
  • Adding a CSS file/content
  • Styling the contents using Div Tags

The Box model:Padding,Margin,Borders

  • Applying Borders
  • When to Use Padding versus Margins
  • Using Absolute Positioning to Layer a Div over Other Content

Nested selected and more box models

  • Applying Padding/Margins to Headings & Paragraphs
  • Using Nested Selectors for Targeted Formatting
  • Styling Links

Floats and clearing

  • Floating Images beside Text and Adding Margin Space
  • Positioning with Negative Margins

Creating two coloumns with Floats

  • Creating Columns
  • Clearing Floats
  • Fixing an IE “hasLayout” Bug

Min-Width and IE conditional comments

  • Sharing Styles across a Website
  • Setting a Minimum Width
  • Targeting Versions of Explorer with IE Conditional Comments

Using JavaScript to change CSS

  • Making a Div Appear/Disappear when the User Clicks a Button

CSS rollovers

  • Adding Background Images upon Rollover (Hover)
  • Changing Opacity upon Rollover and Getting it to Work in IE

Replacing text with an images using CSS

  • Replacing HTML Text with CSS Background Images
  • Centering Elements with Auto Margins

Rounded corners

  • Creating Rounded Corners with CSS
  • Fallback Rounded Corners with Background Images
  • IE Conditional Comments (IECC)
  • Absolute versus Relative Positioning
  • How Absolute Positioned Divs Relate to Parent Div Tags

Centered2-Column layouts

  • Center Aligning a Div-based Layout
  • Creating a 2-Column Layout with Divs
  • Using Floats and Clear
  • Copying and Pasting CSS Styles between Documents

More absolute versus Relative positioning

  • Using Absolute Positioning inside Relative Positioned Divs
  • Using IE Conditional Comments to Fix Bugs in IE 6

CSS list navbar: Text-Based

  • Creating a Horizontal Text Navbar from an HTML List
  • CSS Text Hovers
  • Dealing with a Div Collapse when All Content Is Floated

CSS sprites Navbar: Images replace text

  • Building a Navbar with CSS Sprites
  • Using Image Replacement in a Navbar
  • Using Lists to Create a Horizontal Navbar
  • CSS Image Rollovers (No JavaScript Required)

Use CSS to indicate current page in Navbar

  • Marking the Current Page in a Navbar with CSS
  • Marking the Body Tag for Use in Nested Selectors
  • Specificity: Understanding Which CSS Styles Win over Others