Eric Meyer (2008) CSS Site Design (Video)
CSS gives Web designers control over the appearance of their web sites by separating the visual presentation from the content.
It lets them easily make minor changes to a site or perform a complete overhaul of the design.
With this CSS Web Site Design tutorial, we review the essentials of CSS, including selectors, the cascade, and inheritance.
The training also covers how to build effective navigation, how to lay out pages, and how to work with typography, colours, backgrounds, and white space.
Using a project-based approach, the step by step tutorial videos walk you through the process of creating a Web page, while teaching the essentials of CSS along the way.
By the end of the training, viewers will have the tools & the knowledge to master professional site design.
This in depth video tutorial DVD-Rom shares invaluable insider tips on everything you need to know about Cascading Style Sheets and then some more.
Running Time: 6.25 hours
You will need quicktime installed on your pc/mac to view the video content, should you not already have quicktime installed on your pc/mac it is available for free download from http://www.apple.com/quicktime/download/.
CSS Site Design Exercise Files for PC (ZIP 472KB)
CSS Site Design Exercise Files for MAC (SIT 485KB) – Not available here
Introduction
- Welcome (MOV 534KB)
- What is CSS? (MOV 12,043KB)
- Design Tour (MOV 5,024KB)
- Using the Exercise Files (MOV 2,615KB)
- Installing the Web Developer Toolbar (MOV 9,227KB)
CSS and XHTML
- XHTML Essentials (MOV 3,125KB)
- CSS Essentials (MOV 4,025KB)
- Embedded Style Sheets (MOV 4,806KB)
- Linking a Style Sheet (MOV 4,086KB)
- Linking to Multiple Style Sheets (MOV 4,711KB)
- Using Linked and Embedded Style Sheets Together (MOV 8,671KB)
- Using Imported Style Sheets (MOV 9,207KB)
Selectors
- ID Selector Essentials (MOV 13,494KB)
- Class Selector Essentials (MOV 9,214KB)
- Best Practices for Classes (MOV 8,458KB)
- Grouped Selection (MOV 8,510KB)
- Descendant Selectors (MOV 12,265KB)
- The Source of Style (MOV 5,857KB)
- Specificity (MOV 17,328KB)
- Making Things Important (MOV 9,408KB)
- Inheritance Essentials (MOV 78,904KB) – Not available here
- Making Things Really Unstyled (MOV 8,372KB)
- User Style Sheets (MOV 4,803KB)
Layout
- Box Model Essentials (MOV 13,630KB)
- Simple Floating (MOV 9,843KB)
- Using Float For Layout (MOV 20,603KB)
- Fixing Column Drop (MOV 12,969KB)
- Clearing Essentials (MOV 8,717KB)
- Float Containment (MOV 14,069KB)
- Creating A Navbar From A List (MOV 10,168KB)
Adding Colurs and Backgrounds
- Colouring Text (MOV 8,803KB)
- Defining Colour In CSS (MOV 7,735KB)
- Colouring Backgrounds (MOV 13,065KB)
- Applying Background Images (MOV 9,203KB)
- Manipulating The Direction Of Background Images (MOV 6,148KB)
- Positioning Backgrounds (MOV 16,889KB)
- Background Shorthand (MOV 9,079KB)
Setting Typography
- Altering Line Height (MOV 16,719KB)
- Font Style and Weight (MOV 12,672KB)
- Sizing Fonts (MOV 21,733KB)
- Using Font Families (MOV 21,749KB)
- Font Shorthand (MOV 13,206KB)
- Justifying Text (MOV 11,656KB)
- Vertically Aligning Text (MOV 9,361KB)
- Transforming Text (MOV 8,582KB)
Text Decoration (MOV 11,839KB) – Not available
Using Margins and Borders to Create White Space and Separation
- Margin Essentials (MOV 24,891KB) – Not available
- Adding Borders (MOV 14,588KB)
- Padding (MOV 21,198KB)
- Using Negative Margins (MOV 15,412KB)
- Margin Collapsing (MOV 14,007KB)
Creating Tables
- Styling Tables and Captions (MOV 11.103KB)
- Styling Table Cells (MOV 14,745KB)
- Styling A Column With Classes (MOV 10,194KB)
- Styling Links Inside Table Cells (MOV 8,020KB)
Styling for Print
- Styling For Specific Mediums (MOV 6,902KB)
- Creating A Print Style Sheet (MOV 10,889KB)
- Hiding Layout For Print (MOV 9,218KB)
- Styling For Print (MOV 12,740KB)
- Complex Styling For Print (MOV 9,382KB)
- Creating A Footer (MOV 8,842KB)
Bringing It All Together
- Getting Started (MOV 2,157KB)
- Setting Global Styles (MOV 6,197KB)
- Defining Masthead and Navbar Colours (MOV 5,408KB)
- Layout Of The Navlink Bar (MOV 7,147KB)
- Using Columns (MOV 9,165KB)
- Setting Content Styles (MOV 3,688KB)
- Creating The Sidebar Boxes (MOV 11,513KB)
- Creating The Sidebar Form (MOV 5,275KB)
- Completing The Sidebar (MOV 5,804KB)
- Making A Table (MOV 6,683KB)
- Creating A Footer (MOV 5,812KB)
Conclusion
- Goodbye (MOV 1,341KB)