This CSS training class teaches students to use Cascading Style Sheets to format HTML pages. After learning the basics of CSS, 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.
Learn the benefits of CSS.
Learn to avoid using deprecated tags and attributes.
Learn CSS syntax.
Learn to use <div> and <span> tags appropriately.
Learn most of the common properties and their values.
Learn to create custom CSS cursors.
Learn to style links with CSS to create "CSS Buttons".
Learn to work with borders, margin, and padding (the box model).
Learn to style tables with CSS.
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.
Crash Course in CSS
Benefits of Cascading Style Sheets
Precedence of Selectors
Creating an Embedded Style Sheet
Creating an External Style Sheet
Adding Inline Styles
<div> and <span>
Divs and Spans
Units of Measurement
The Inherit Value
Font - the old way
Font Family and Font Size
Font Style, Font Variant and Font Weight
Backgrounds and Colors
About Color Values
Colors and Backgrounds
CSS and Links
CSS Button Links
Borders, Margins and Padding
Borders, Margin and Padding
Styling Tables with CSS
A Review of HTML Table Syntax
Styling a Table
Transforms and Transitions
Transitions and Transforms
Positioning and Visibility
Advanced CSS Page Layout
Full Width Layouts
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
What Are Media Queries?
The Viewport Meta Tag
A First Example
Exercise: Responsive Design for a Simple Blog
Exercise: Responsive Design for a Simple Blog (Three Views)
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
Exercise: Using 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
A Mobile-Friendly Menu
CSS Background Tricks
Rounded Corner Boxes
Fixed-width Rounded Corner Boxes
Rounded Corners with CSS
Exercise: Creating a Rooftop Panel
Exercise: Tabbed Navigation: Rounding the Corners
CSS Drop Shadows: The box-shadow Property
Background Opacity and Images
The opacity Property
Exercise: Using HSL and Opacity
Exercise: Multiple Background Images with background-clip, background-origin, and background-size
Laying out and Styling Forms with CSS
Laying out the Questions
Creating the Form
Adding the Form Fields
Styling the Form
Exercise: Expanding the Form
CSS Best Practices
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
Controlling Browser Modes
Internet Explorer Conditional Statements
Common Browser Bugs / Issues
Each student in our Live Online and our Onsite classes receives a comprehensive set of materials, including course notes and all the class examples.
Experience in the following is required for this CSS class:
Courses that can help you meet these prerequisites:
The instructor patiently and thoroughly walked us through the new paradigms required to develop in Angular. With her real world experience, she was able to support the training with examples that helped our development team learn and understand the language.
Excellent course. The trainer was very knowledgeable and friendly.
For those who are remote enough that they don't want to travel for good technical training, or busy enough that it's hard to stick to it on your own, Webucator provides the perfect solution and excellent instructors to get the job done!
Kitsap County Health District
This class provided a terrific overview of MS Project. The instructor had a wealth of experience. I would definitely recommend this instructor, this class, and Webucator for anyone looking to learn more about their Project toolkit.