Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

Provider Logo

CSS Essential Training

via LinkedIn Learning

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.

Cascading Style Sheets (CSS) is a stylesheet language that allows you to control the appearance of your webpages. In this hands-on course, Christina Truong demonstrates the concepts that form the foundation of CSS, explaining what you need to know to tweak existing CSS and write your own. Christina explains how to add colors and other design elements to take your webpages beyond just black text on a white background. She shows how to use selectors, how the box model defines the spacing and sizing of page elements, and how to style text and manage basic layouts with Flexbox and Grid. She also covers working with advanced selectors, creating fluid layouts, and determining when to use the float and position properties. Plus, at the end of the course, you'll walk away with an actual project—an online résumé page.

Syllabus

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

Taught by

Christina Truong

Related Courses

Reviews

0.0 rating, based on 0 reviews

Start your review of CSS Essential Training

Never stop learning Never Stop Learning!

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free