DEV Community

Cover image for CSS roadmap - CSS Concepts you will use everyday.
Benjamin Thorpe
Benjamin Thorpe

Posted on

CSS roadmap - CSS Concepts you will use everyday.

Hello Everyone!!
These are the CSS concepts I think everyone should know to be comfortable using and designing anything with CSS.

I will also leave links to some resources below.

Let's start with the basics (IMHO)

Formatting text

  • changing text colors
  • changing text size
  • style a text (italic, bold, ...etc)
  • spacing letters or words (letter-spacing & word-spacing)
  • changing capitalization (uppercase, lowercase, small-caps...etc)

Changing lists

  • removing bullet points
  • changing the default bullet points
  • using roman numbers in lists


  • color specificity (very important to know)
  • background and foreground color
  • opacity


  • background images
  • gradients
  • clipping the background

You can also learn about Pseudo-Element/Class after background, or you can wait after the box model.

Now to the Advance Basics

Box Model

  • padding, margin and border
  • box shadows
  • display types (inline, inline-block, block,...etc)
  • block-level and inline elements


Sites with only colors and good fonts, are great. But without positioning, they are terrible to the eyes.

  • positions (absolute, relative, sticky, & fixed)
  • floats
  • normal flow of elements

Always try to use position no matter how small. floats are hardly used these days, they are dying if not already.)

Now to Intermediate


Learn how flex affects the container and children, when and how to use them efficiently.

  • display: flex
  • center text/elements with justify-content or align-items
  • flex-direction

CSS Grid or Grid

Much harder to learn than Flexbox, but they can do what Flexbox does and more. Use both for their correct use.

  • display: grid
  • grid-gap
  • grid-template-areas
  • grid-template-columns
  • repeat(), minmax() and grid units - fractions (fr)

Responsive Web Design (RWD)

  • media queries
  • choosing good break points

Transitions and Animations (the fun CSS)

  • transform
  • transitions
  • translate
  • skew
  • keyframe animation


Everything else that comes after these are features to boost productivity and adds more cool features to your skills and designs. Like:

  • imports, replacing images, feature detection,...etc

Feel free to add anything I might have missed, and please leave your comments below.


Top comments (2)

arvindpdmn profile image
Arvind Padmanabhan

It's also good to know CSS design patterns that solve common problems of layout and box model:

benjithorpe profile image
Benjamin Thorpe

True, also thanks for the link, It is super helpful.