3. CSS Fundamentals
HTML/CSS Lesson Categories
CSS brings your HTML to life with color, typography, and style. These lessons cover the CSS syntax, the three ways to attach styles to a webpage, how the CSS cascade works, colors in multiple formats, fonts including Google Fonts, and how to target specific elements precisely using classes and IDs.
Ready to test your knowledge?
3.01 Introduction to CSS
Learn what CSS is, how it works alongside HTML, and how to add your first inline style to a page. Start the Introduction to CSS Lesson
3.02 How CSS Cascades
Discover how the cascade, specificity, and inheritance rules determine which CSS styles take effect when multiple rules target the same element. Start the How CSS Cascades Lesson
3.025 CSS Syntax: Selectors, Properties, and Values
Learn the three-part structure of every CSS rule: selector, property, and value, plus the punctuation rules that hold it all together. Start the CSS Syntax Lesson
3.03 Three Ways to Add CSS to Your HTML
Explore the three methods for adding CSS to your HTML and learn when each approach makes sense for your project. Start the Three Ways to Add CSS to Your HTML Lesson
3.04 Attaching an External Stylesheet
Learn how to link a separate CSS file to your HTML pages so you can control the look of your entire site from one central place. Start the Attaching an External Stylesheet Lesson
3.05 CSS Colors
Explore the different ways to specify color in CSS, including named colors, hex codes, and RGB values. This lesson includes two built-in tools to help you find the perfect color: the Hex Color Picker and the CSS Color Name Picker. Start the CSS Colors Lesson
3.06 RGBA Colors
Take your color skills further with RGBA values, which let you control not just the color of an element but how transparent or opaque it appears. Start the RGBA Colors Lesson
3.07 Font Families and Google Fonts
Learn how to set font families in CSS and how to pull in hundreds of free, professional typefaces directly from Google Fonts. This lesson includes a reference to the Web Safe Fonts tool so you can preview every web-safe option and copy the CSS code directly. Start the Font Families and Google Fonts Lesson
3.08 Font and Text Properties
Control text size, weight, line height, spacing, and alignment with CSS’s powerful set of font and text properties. Start the Font and Text Properties Lesson
3.09 Classes and IDs
Learn how to use classes and IDs to apply CSS styles precisely, whether you’re targeting one element, a group, or something that appears only once on the page. Start the Classes and IDs Lesson
3.10 CSS Indentation and Comments
Learn how to indent CSS properties and use comments to label sections of your stylesheet, so your code stays readable as it grows. Start the CSS Indentation and Comments Lesson