# Getting Started with CSS

## 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.](/content/classes/css/introduction/index.html)

- \
\
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.](/content/classes/css/applying-css-styles/index.html)

- \
\
Lesson #3\
\
Selectors, Properties, and Values\
\
Selectors, Properties and Values are the core pillars of CSS and this lesson breaks it down for you.](/content/classes/css/selectors-properties-values/index.html)

- \
\
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!](/content/classes/css/color/index.html)

- \
\
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.](/content/classes/css/fonts-text/index.html)

- \
\
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!](/content/classes/css/backgrounds/index.html)

- \
\
Lesson #7\
\
Applying CSS Filters\
\
Filters are a simple yet powerful tool at your disposal to apply awesome visual effects on elements.](/content/classes/css/filters/index.html)

- \
\
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.](/content/classes/css/css-box-model-padding-border-margin/index.html)

- \
\
Lesson #9\
\
Grouping and Nesting CSS Selectors\
\
Learn how to improve your CSS by grouping selectors together and nesting selectors wherever possible.](/content/classes/css/grouping-nesting-selectors/index.html)

- \
\
Lesson #10\
\
Pseudo-Classes\
\
Learn how to extend both the functionality and look of your HTML pages by targetting Pseudo-Classes.](/content/classes/css/pseudo-classes/index.html)

- \
\
Lesson #11\
\
Pseudo-Elements\
\
Learn how to extend both the functionality and look of your HTML pages by targetting Pseudo-Elements.](/content/classes/css/pseudo-elements/index.html)

- \
\
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.](/content/classes/css/variables/index.html)

- \
\
Lesson #13\
\
Display\
\
Learn about the Display CSS property to know how to control how your elements are rendered on the page.](/content/classes/css/display/index.html)

- \
\
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.](/content/classes/css/flexbox/index.html)

- \
\
Lesson #15\
\
Grid Layout\
\
The Grid CSS property gives you a powerful way to natively create a grid layout for your page to follow.](/content/classes/css/grid/index.html)

- \
\
Lesson #16\
\
Position\
\
Knowing how to position elements on your page is very important. Learn how to position elements in this lesson.](/content/classes/css/position/index.html)

- \
\
Lesson #17\
\
Float and Clear\
\
The float property specifies whether an element should be placed to the left or right of its container.](/content/classes/css/float/index.html)

- \
\
Lesson #18\
\
Columns\
\
Columns are popular in print media like newspapers and magazines, and CSS makes it easy to use your own.](/content/classes/css/columns/index.html)

- \
\
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.](/content/classes/css/page-layout-techniques/index.html)

- \
\
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.](/content/classes/css/media-queries/index.html)

- \
\
Lesson #21\
\
Transitions\
\
Learn how to natively animate and transition between one state to another in this lesson on CSS Transitions!](/content/classes/css/transitions/index.html)

- \
\
Lesson #22\
\
Animation\
\
CSS animations allow you to natively animate properties of an element with ease to create awesome effects.](/content/classes/css/animation/index.html)

- \
\
Lesson #23\
\
2D Transforms\
\
Learn how to natively manipulate and distort the elements on your page in 2D using CSS 2D transforms.](/content/classes/css/2d-transforms/index.html)

- \
\
Lesson #24\
\
3D Transforms\
\
Learn how to natively manipulate and distort the elements on your page in 3D using CSS 3D transforms.](/content/classes/css/3d-transforms/index.html)

- \
\
Lesson #25\
\
Conclusion and Wrap Up\
\
This lesson is the conclusion and wrap up of this class on CSS! Congratulations on completing the class!](/content/classes/css/conclusion/index.html)