Getting Started with CSS - Sabe.io

CSS is what makes the web beautiful. It describes how HTML should be displayed and how to layout elements. Take this class and get familiar with CSS!

Lesson #1

Introduction to CSS

Get introduced to the world of CSS and get setup so you are ready to begin styling your HTML documents.
Lesson #2

Adding CSS Styles to your Page

Learn the many different ways in which you can apply CSS styles to your HTML, including with external, internal and inline styles.
Lesson #3

Selectors, Properties, and Values

Selectors, Properties and Values are the core pillars of CSS and this lesson breaks it down for you.
Lesson #4

Colors

Life isn't black and white, and your pages shouldn't be either. Learn how to add some color in this tutorial!
Lesson #5

Fonts and Text

CSS offers many ways to change the look and feel of text. Learn how to do so in this lesson on fonts and text.
Lesson #6

Backgrounds

Adding background colors and images is a great way to improve the way a page looks. Learn how to do that in this lesson!
Lesson #7

Applying CSS Filters

Filters are a simple yet powerful tool at your disposal to apply awesome visual effects on elements.
Lesson #8

The Box Model: Padding, Border, Margin

The CSS Box Model is an important concept to understand and in this lesson you will learn about margin, padding, and border.
Lesson #9

Grouping and Nesting CSS Selectors

Learn how to improve your CSS by grouping selectors together and nesting selectors wherever possible.
Lesson #10

Pseudo-Classes

Learn how to extend both the functionality and look of your HTML pages by targetting Pseudo-Classes.
Lesson #11

Pseudo-Elements

Learn how to extend both the functionality and look of your HTML pages by targetting Pseudo-Elements.
Lesson #12

Using CSS Variables

CSS variables allow you to change entire styles on a fly, giving you native and dynamic styles not possible before.
Lesson #13

Display

Learn about the Display CSS property to know how to control how your elements are rendered on the page.
Lesson #14

Flexible Box Layout

The Flexible Box layout makes it easier to build a responsive and flexible layout for your page no matter the screen size.
Lesson #15

Grid Layout

The Grid CSS property gives you a powerful way to natively create a grid layout for your page to follow.
Lesson #16

Position

Knowing how to position elements on your page is very important. Learn how to position elements in this lesson.
Lesson #17

Float and Clear

The float property specifies whether an element should be placed to the left or right of its container.
Lesson #18

Columns

Columns are popular in print media like newspapers and magazines, and CSS makes it easy to use your own.
Lesson #19

Page Layout Techniques

Learn the many techniques you can use to properly layout your elements on the page including using flexbox and grid.
Lesson #20

At-Rules and Media Queries

Use at-rules to extend the functionality of your CSS and target your styles using Media Queries, which are the basis for responsive design.
Lesson #21

Transitions

Learn how to natively animate and transition between one state to another in this lesson on CSS Transitions!
Lesson #22

Animation

CSS animations allow you to natively animate properties of an element with ease to create awesome effects.
Lesson #23

2D Transforms

Learn how to natively manipulate and distort the elements on your page in 2D using CSS 2D transforms.
Lesson #24

3D Transforms

Learn how to natively manipulate and distort the elements on your page in 3D using CSS 3D transforms.
Lesson #25

Conclusion and Wrap Up

This lesson is the conclusion and wrap up of this class on CSS! Congratulations on completing the class!