Overview
-
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.
Syllabus
-
Introduction
- Styling documents consistently
- What you should know
- Tools and sample projects
- HTML and CSS
- Browser developer tools
- Referencing CSS
- Project overview and setup
- Optimizing images and retina displays
- Project: Relative paths
- Absolute paths
- 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
- 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
- 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
- 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
- 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
- Introduction to advanced selectors
- Relational selectors: Combinators
- Project: Updates with combinators
- Pseudo-class selectors: First and last
- Project: Advanced selectors
- 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
- Next steps
