CSS Basics
CSS (Cascading Style Sheets) is a style sheet language that describes the presentation of web pages. Whereas HTML is what forms the structure of a web page, CSS is what we use to style the HTML with colors, backgrounds, font sizes, layout, and more. As you'll soon learn, CSS is one of the core technologies for designing and building websites.
What you'll learn
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.
- CSS Basics Overview2:19
- Introduction to CSS2:31
- CSS Resources4:40
- Intro to CSS Review7 questions
- Inline and Internal Styles10:34
- External Style Sheets6:39
- Importing Style Sheets with @import4:14
- Adding CSS Review8 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.
- Intro to Selectors4:49
- Type Selectors5:27
- Type Selectors4 objectives
- ID Selectors6:00
- Class Selectors6:06
- ID and Class Selectors6 objectives
- Reusing Classes4:59
- Descendant Selectors5:10
- Descendant Selectors3 objectives
- Pseudo-Classes8:44
- Pseudo-Classes3 objectives
- CSS Comments5:20
- Basic Selectors Review9 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.
- Common Data Types4:33
- Pixel Units4:11
- Percentages4:35
- Pixels and Percentages3 objectives
- Em Units6:50
- Rem Units2:57
- Em and Rem Units3 objectives
- Color Values9:21
- Color Values Review5 questions
- Text Styles6:52
- Font Properties4:57
- Line Height4:45
- Styling the Intro Paragraph5 objectives
- Fonts and Line Height Review7 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.
- The CSS Box Model4:05
- Padding6:45
- Borders6:44
- Margins8:27
- Padding, Borders, and Margins5 objectives
- Display Values9:07
- The Box Model Review8 questions
Basic Layout
In this stage, we'll continue styling our website with background properties and basic layout methods.
- Width and Height Properties6:49
- box-sizing and max-width6:31
- Backgrounds: Color and Images5:47
- Backgrounds: Size and Position6:08
- Styling the "Wildlife" div with Background Properties5 objectives
- Floats5:23
- Clearing Floats4:04
- Floats3 objectives
- Lists6:18
- Basic Layout Review8 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.
- Text Shadows5:43
- Box Shadows6:22
- Text Shadows and Box Shadows4 objectives
- Border Radius6:39
- Border Radius1 objective
- Gradients7:23
- Gradients: Color Stops3:49
- Gradients4 objectives
- Transparent Gradients and Multiple Backgrounds3:56
- Web Fonts with @font-face8:32
- Multiple Backgrounds and Web Fonts Review6 questions
- Media Query Basics8:35
- Adjusting the Layout with Media Queries13:16
- Media Queries2 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.
- The Cascade: Importance2:26
- The Cascade: Specificity and Source Order2:32
- Inheritance2:27
- Learning Tips and Tools2:59
- Fundamental Concepts Review6 questions