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)