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.
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