CSS Basics

Getting Started with CSS

Get started with one of the core technologies for designing and building websites and applications. In this stage, you'll learn about the evolution of CSS, helpful resources, and how to add CSS to a page. 8 steps

• CSS Basics Overview 2:19
• Introduction to CSS 2:31
• CSS Resources 4:40
• Intro to CSS Review 7 questions
• Inline and Internal Styles 10:34
• External Style Sheets 6:39
• Importing Style Sheets with @import 4:14
• Adding CSS Review 8 questions

Basic Selectors

Selectors are one of the most important and powerful parts of CSS. In this stage, you'll learn the different ways we can target HTML elements with basic selectors. 13 steps

• Intro to Selectors 4:49
• Type Selectors 5:27
• Type Selectors 4 objectives
• ID Selectors 6:00
• Class Selectors 6:06
• ID and Class Selectors 6 objectives
• Reusing Classes 4:59
• Descendant Selectors 5:10
• Descendant Selectors 3 objectives
• Pseudo-Classes 8:44
• Pseudo-Classes 3 objectives
• CSS Comments 5:20
• Basic Selectors Review 9 questions

Understanding Values and Units

Every CSS property has a set of values it can accept. Most properties accept keywords that literally describe a value. Many properties also accept numbers, functions, length values, or a URL. In this stage, you'll learn the common values and units CSS properties accept. 14 steps

• Common Data Types 4:33
• Pixel Units 4:11
• Percentages 4:35
• Pixels and Percentages 3 objectives
• Em Units 6:50
• Rem Units 2:57
• Em and Rem Units 3 objectives
• Color Values 9:21
• Color Values Review 5 questions
• Text Styles 6:52
• Font Properties 4:57
• Line Height 4:45
• Styling the Intro Paragraph 5 objectives
• Fonts and Line Height Review 7 questions

The Box Model

The box model is the basis of CSS layout because it dictates how elements are displayed and how they interact with each other. 7 steps

• The CSS Box Model 4:05
• Padding 6:45
• Borders 6:44
• Margins 8:27
• Padding, Borders, and Margins 5 objectives
• Display Values 9:07
• The Box Model Review 8 questions

Basic Layout

In this stage, we'll continue styling our website with background properties and basic layout methods. 10 steps

• Width and Height Properties 6:49
• box-sizing and max-width 6:31
• Backgrounds: Color and Images 5:47
• Backgrounds: Size and Position 6:08
• Styling the "Wildlife" div with Background Properties 5 objectives
• Floats 5:23
• Clearing Floats 4:04
• Floats 3 objectives
• Lists 6:18
• Basic Layout Review 8 questions

Enhancing the Design With CSS

In this stage, we'll add the finishing touches to the page using CSS features that display rounded corners, box shadows, gradients and more. Then, we'll make sure our page looks good on all devices, with media queries. 14 steps

• Text Shadows 5:43
• Box Shadows 6:22
• Text Shadows and Box Shadows 4 objectives
• Border Radius 6:39
• Border Radius 1 objective
• Gradients 7:23
• Gradients: Color Stops 3:49
• Gradients 4 objectives
• Transparent Gradients and Multiple Backgrounds 3:56
• Web Fonts with @font-face 8:32
• Multiple Backgrounds and Web Fonts Review 6 questions
• Media Query Basics 8:35
• Adjusting the Layout with Media Queries 13:16
• Media Queries 2 objectives

Fundamental Concepts

Now that we've explored many of the core features of CSS, it's time to take this knowledge further by learning important fundamental concepts. In this stage, you'll learn all about the CSS cascade, inheritance, and helpful tips and tools to practice and retain what you’re learning. 5 steps

• The Cascade: Importance 2:26
• The Cascade: Specificity and Source Order 2:32
• Inheritance 2:27
• Learning Tips and Tools 2:59
• Fundamental Concepts Review 6 questions