CSS Basics

Learn CSS Basics

🕓 Last updated today

Knowledge Check

Take this customized & interactive quiz to test your knowledge on CSS Basics, then check out the learning resources below.

Question 1 of 5

Which of the following is NOT one of the 3 components of a modern website on the client side?


Core Learning

The fastest way to learn CSS Basics is simply to study these exact resources. Focus on the 👀 to learn extra quickly and save time!

What is CSS, and how does it work?

👀 1 Thing to Focus On

  • Understand CSS at a high level

The 9 Most Important Common CSS Properties

👀 1 Thing to Focus On

  • Make yourself familiar with these common CSS properties

How CSS Selectors Work

👀 1 Thing to Focus On

  • Refer back to this guide when you need to decipher a selector or create your own.

Specifics on CSS Specificity

👀 1 Thing to Focus On

  • Understand the operator precedence of the CSS world

5 CSS mistakes I see way too often

👀 4 Things to Focus On

  • For Tip #1 (Overly complicated selectors), See if you make any of the common mistakes, and think about how you can write your CSS to avoid them
  • For Tip #2 (Make your CSS readable), determine how readable your current CSS is
  • For Tip #3 (Keep your CSS organized), see how organized your CSS is
  • For Tip #4 (Refactor your CSS), see if any of your CSS could use refactoring

Understanding CSS Position, Display, and Float

👀 1 Thing to Focus On

Flexbox Guide

👀 2 Things to Focus On

  • Pay attention to flex-direction and how it affects the behavior of other properties
  • Try it yourself using (https://flexboxfroggy.com)

Interactive Flexbox Froggy

👀 1 Thing to Focus On

  • Beat the game to become a flexbox master!