CSS Basics Course (How To)

In this course, we're going to learn the basics of CSS, one of the core technologies for designing and building websites and applications. No matter what kind of website or web application you want to build, you'll have to use CSS.

If you haven't written much CSS, or even if you’ve never written CSS at all, don’t worry. That's what this course is for. We’ll start with basic CSS concepts, then gradually progress to more advanced topics and lessons.

What you'll learn

• Getting Started With CSS
• Basic Selectors
• Understanding Values and Units
• Fundamental Concepts

Getting Started with CSS

So, what exactly is CSS and why is it considered a core web technology? CSS stands for Cascading Style Sheets and is a stylesheet language used to describe the presentation of web pages.

Chevron 7 steps

• Introduction to CSS

  4:54

• Adding CSS to HTML: Inline Styles

  5:30

• Adding CSS to HTML: Internal Styles

  5:13

• Quiz: Intro to CSS

  5 questions

• Adding CSS to HTML: External Stylesheets

  5:44

• instruction

  Keeping Up with CSS

• Quiz: Keeping Up with CSS

  5 questions

Basic Selectors

In our previous stage, we saw a bit of CSS in action, but now it’s time to learn the parts of the language. Writing CSS means learning how to write CSS rules, which tell browsers how to render HTML elements.

Chevron 11 steps

• Introducing CSS Selectors

  8:00

• Type Selectors

  4 objectives

• ID Selectors

  4:49

• Class Selectors

  8:59

• ID and Class Selectors

  6 objectives

• Descendant Selectors

  4:37

• Descendant Selectors

  3 objectives

• Pseudo-classes

  7:41

• Pseudo-classes

  3 objectives

• Using Comments in CSS

  5:03

• Quiz: Basic Selectors

  7 questions

Understanding Values and Units

Every CSS property has a set of values it can accept. For example, we can use keywords that literally describe a value, like the color name "blue," or the words "auto" and "hidden." A value can also be described as a number, a length, an image, or a URL.

Those values are categorized into what are called data-types, and there are lots to choose from. Again, we don't have to remember every CSS data-type and value out there. All we need is a good reference. I'll show you a good reference, then cover the common values and units CSS properties accept.

Chevron 8 steps

• Common Data Types

  4:27

• Pixel Units

  3:04

• Percentages

  5:31

• Pixels and Percentages

  3 objectives

• Em and Rem Units

  10:02

• Em and Rem Units

  3 objectives

• Color Values

  7:47

• Quiz: Values and Units

  5 questions

Fundamental Concepts

Well done. You’ve learned quite a bit about working with stylesheets. You’ve learned the benefits of keeping your styles in an external file. You’ve learned some important resources for keeping your skills sharp. You’ve worked with a variety of selectors, properties, and values.

In this stage, we learn about the CSS Cascade, how inheritance works in CSS, and how to validate our CSS files.

Chevron 5 steps

• The Cascade: Origin and Importance

  3:08

• The Cascade: Specificity and Source Order

  5:01

• Inheritance

  2:39

• Validation

  3:23

• Quiz: Fundamental Concepts

  6 questions