CSS Essential Training

Explore the concepts that form the foundation of CSS. Learn how to select content, style text, manage layouts, and more as you work on a real-world project.

Introduction

• Styling documents consistently
• What you should know
• Tools and sample projects

1. Getting Started

• HTML and CSS
• Browser developer tools
• Referencing CSS
• Project overview and setup
• Optimizing images and retina displays
• Project: Relative paths
• Absolute paths

2. Core Concepts

• CSS specifications and the W3C
• CSS syntax and terminology
• CSS values and units
• The color and property values
• Type and universal selectors
• Class and ID selectors
• Class and ID selector exercise
• Descendant selectors
• Grouping selectors
• Inheritance and specificity
• The cascade and importance
• Project: Adding colors
• Pseudo-class selectors and links
• Project: Styling links

3. The Box Model

• Introduction to the box model
• Inline, block, and display
• The box model properties
• The box properties syntax and usage
• Debugging the box model
• Padding, margin, and border
• Margin and layouts
• Project: Adding content wrappers
• Project: Margin and padding

4. Typography

• Typography for the web
• Changing the font-family
• Font-weight and font-style
• Web fonts with @font-face
• Web fonts with Google Fonts
• Project: Google Fonts
• The font-size property
• Font shorthand
• Text-decoration, text-align, and line-height
• Project: Typography styles

5. Layouts: Float and Position

• Introduction to float
• The float and clear properties
• Float and collapsed container
• Layouts and the box model
• Project: Float and box model fix
• Position
• Position and z-index

6. Layouts: Flexbox and Grid

• Introduction to Grid and Flexbox
• Introduction to Flexbox
• Flexbox: Orientation and ordering
• Flexible sizing
• Flexbox exercise
• Flexbox: Alignment
• Project: Flexbox alignment
• Introduction to CSS Grid
• The explicit grid
• The implicit grid
• Grid placement properties
• Project: Grid columns and Firefox Grid Inspector

7. Advanced Selectors

• Introduction to advanced selectors
• Relational selectors: Combinators
• Project: Updates with combinators
• Pseudo-class selectors: First and last
• Project: Advanced selectors

8. Fluid and Responsive Layouts

• Introduction to responsive design
• Project: Creating fluid layouts
• Flexible background images
• Project: Flexible background image
• Introduction to media queries
• Media queries, widths, and breakpoints
• Testing responsive layouts
• Project: Media queries and responsive layout

Conclusion

• Next steps