CSS Positioning Best Practices
2h 32mIntermediate2009-08-07
Authors
Bill Weinman
Tech Advocate, Entrepreneur, Programming Expert
Course details
Web designers and coders will be introduced to techniques to improve their results in CSS Positioning Best Practices. Beginning with a brief review of CSS, instructor Bill Weinman demonstrates how to position elements on a page using CSS instead of tables. He then goes step by step through the process of using CSS positioning to lay out pages that have traditionally been laid out using HTML tables.
Learning objectives
Understanding style sheets and levels of inheritance
Learning how to use CSS units of measure in page layout
Laying out content on a page using absolute, relative, float, and fixed positioning
Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
Using templates to improve workflow
Creating a full working web site, step by step
Learning objectives
Understanding style sheets and levels of inheritance
Learning how to use CSS units of measure in page layout
Laying out content on a page using absolute, relative, float, and fixed positioning
Using CSS positioning to place menus, buttons, graphics, and columns precisely on a page
Using templates to improve workflow
Creating a full working web site, step by step
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen Source
Concepts
0. Introduction
- 01 - Welcome
- 02 - Using the exercise files
- 03 - Choosing a text editor
1. CSS Overview
- 04 - Reviewing CSS linking and setup
- 05 - Understanding levels of inheritance
- 06 - Understanding levels of style sheets
- 07 - Apply styles with SPAN and DIV
- 08 - Relating styles to the HTML document with selectors
- 09 - Understanding units of measure in CSS
2. CSS Positioning Properties
- 10 - Using absolute positioning
- 11 - Using relative positioning
- 12 - Using the float property for positioning
- 13 - Using fixed positioning
3. Building a Web Site with CSS Positioning
- 14 - Exploring the finished web site
- 15 - Building a document header
- 16 - Placing a contact button
- 17 - Laying out a main menu
- 18 - Creating a layout template pt. 1 - Main body area
- 19 - Creating a layout template pt. 2 - Sidebar area
- 20 - Creating a layout template pt. 3 - Footer content
- 21 - Building a main home page pt. 1 - Main body content
- 22 - Building a main home page pt. 2 - Sidebar content
- 23 - Creating a page with a menu, graphics, and formatted links
- 24 - Creating a page containing an ordered list
- 25 - Creating a page containing video
Conclusion
- 26 - Goodbye