Advanced CSS Training (CSS201)
Course Length: 2 days
Delivery Methods:
Available as private class only
Course Overview
In this advanced CSS training class, students will learn to use CSS to format forms, create list-based navigation, do advanced page layouts, and create stunning background effects. Students will also learn about CSS coding conventions and shorthand properties.
Course Benefits
- Learn to position elements with CSS.
- Learn advanced CSS page layout techniques.
- Learn how to use shorthand CSS properties.
- Learn to create cool effects with background images using CSS.
- Learn to lay out forms without tables.
- Learn to use CSS with lists to create hierarchical navigation.
- Learn to organize your CSS code.
- Learn about browser support for CSS.
Course Outline
- Positioning and Visibility
- Element Flow
- Position
- Absolute Positioning
- Relative Positioning
- Fixed Positioning
- Exercise: Positioning
- Z-index
- Display
- Visibility
- Float
- Clear
- Advanced CSS Page Layout
- Resetting Styles
- Full Width Layouts
- Two-column
- Three-column
- Exercise: Positioning the Headings
- Fixed Width Layouts
- A Recommendation on Positioning
- Exercise: Laying Out a Page - The Power of Float
- Other Methods of Layout
- CSS Text Columns
- Flexible Box Model
- Exercise: Flexible Box Layout
- Media Queries
- Media Queries
- What Are Media Queries?
- The Viewport Meta Tag
- A First Example
- Responsive Design
- Exercise: Responsive Design for a Simple Blog
- Image Widths
- Exercise: Responsive Design for a Simple Blog (Three Views)
- Media Queries
- CSS Shorthand Properties
- What is CSS Shorthand?
- Benefits of Using CSS Shorthand
- Value Order of CSS Shorthand Properties
- CSS Initial Values
- Shorthand Margin and Padding
- Shorthand Border
- Shorthand Backgrounds
- Shorthand Fonts
- Shorthand Lists
- Exercise: Using Shorthand
- What is CSS Shorthand?
- CSS Lists as Hierarchical Navigation
- Menus as Lists
- CSS Horizontal Menu
- CSS Vertical Menu
- CSS Dynamic Menus
- CSS Dropdown Menu
- CSS Flyout Menu
- Exercise: Combining Dropdown and Flyout Menus
- CSS3 Menus
- Dropdown Menus
- A Mobile-Friendly Menu
- Accessibility
- CSS Background Tricks
- Rounded Corner Boxes
- Fixed-width Rounded Corner Boxes
- Rounded Corners with CSS
- Mountaintop Corners
- Exercise: Creating a Rooftop Panel
- Tabbed Navigation
- Exercise: Tabbed Navigation: Rounding the Corners
- Drop Shadows
- CSS Drop Shadows: The box-shadow Property
- CSS Sprites
- Background Opacity and Images
- The opacity Property
- Exercise: Using HSL and Opacity
- Backgrounds
- Exercise: Multiple Background Images with background-clip, background-origin, and background-size
- Rounded Corner Boxes
- Laying out and Styling Forms with CSS
- Laying out the Questions
- Creating the Form
- HTML
- Form Fields
- Adding the Form Fields
- Reset Revisited
- Styling the Form
- Exercise: Expanding the Form
- CSS Best Practices
- Considerations
- Use CSS
- Use External Style Sheets
- Organize Your Style Sheets/Preprocessors
- Exercise: Using Sass
- ID the Body
- Use CSS Shorthand
- Combine CSS Rules
- Use a CSS Reset
- Use the "LoVe HAte" Rule
- Use HTML Lists for Navigation Menus
- Avoid CSS Hacks
- Use a CSS Compressor
- Use a Master Style Sheet
- Summary of Best Practices
- Browser-compatibility Issues
- Quirks Mode
- Controlling Browser Modes
- Design Strategy
- Internet Explorer Conditional Statements
- Common Browser Bugs / Issues
- Positioning Legends
- Quirks Mode
Class Materials
Each student will receive a comprehensive set of materials, including course notes and all the class examples.
Class Prerequisites
Experience in the following is required for this CSS class:
- HTML
- Basic CSS
Prerequisite Courses
Courses that can help you meet these prerequisites:
Follow-on Courses