CSS

Just like HTML which is meant to display the content as it is, CSS is meant to display it with some styles. If HTML is a body then CSS is an ornaments which makes a body more beautiful.
CSS means Cascading Style Sheet and current version is 3, so CSS3.
It is a styling language and was evolved/created to separate the document content from its presentation like font,color, layout etc.

What about the syntax of CSS?
There are three major parts of CSS syntax: a selector, a property and a value;

Syntax -> selector {property: value} where

  • Selector: simple HTML elements like body, table, a etc or div tag or class elements (You will come to know about all these after going the course content of this syllabus)
  • Property: property is any characteristic of the selector which you want  to change like color, size, margin, border, layout  etc.
  • Value:the value your property should have.
One simple example would illustrate it all
Ex: body{ color: #FF08BC; }

Syllabus for CSS (Cascading Style Sheets)

Session 1
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, Margins, Borders

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

 
Nested Selectors & More Box Model

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

 
Floats & Clearing

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

 
Session 2

Creating Two Columns with Floats

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

 
Min-Width & 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

 
Session 3
Replacing Text with an Image 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

 
Centered 2-Column Layout

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

 
Session 4
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)

 
Session 5
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

 
Server-Side Includes (SSI)

  • Easily Reusing Content across an Entire Site with SSI
  • Creating and Using Server-Side Includes
  • Site Root Relative Linking

Share your comment