CSS is the key element of the modern web development. You absolutely must learn it to become a Frontend dev.

It will take about 2-3 weeks to learn CSS and 1-2 months of practice to be good at it. How soon you will grasp CSS will depend on how many hours a day you are willing to spend.

If your schedule is very tight, I recommend at least one hour a day.

Like HTML, CSS is also simple to learn because there are few concepts to remember it. These concepts include:

  • CSS syntax
  • Common CSS properties
  • The CSS Box Model
  • How to find more information

CSS syntax

The first concept to remember is to know the syntax of CSS. In essence, the CSS syntax comes in three parts. They are the selectors, property, and value.

Here’s a basic example of the CSS syntax. It tells CSS to change the color of the h1 element into red color:

h1 {
  color: red;
}

Let me explain what’s happening in this code:

  1. h1 is the CSS selector, and it points to the HTML element that you want to change styles. In this case, we select the h1 element.
  2. color is the CSS property, and it tells what type of styling you want to apply. In this case, change the color of the h1 element.
  3. red is the CSS property value, and it tells how the style should change. In this case, change the h1 element color to red.

As long as you remember the syntax, then you pretty much know half of the CSS rules. The other half comes from experiences (making mistakes and learning from them) and regular practice.

Common CSS properties

The next concept to know is the CSS properties. While CSS has more than a hundred properties, there are few of them you will use frequently. These common CSS properties include:

  • Colors
  • Width and Height
  • Background
  • Background color
  • Font size
  • Margin and Padding
  • Border
  • Display

By knowing these common CSS properties, you will have the foundations to build simple websites. As for the rest of the CSS properties, you will learn them when you need them.

The CSS Box Model

The third concept to remember is understanding what the CSS box model is.

Every HTML element wraps around a box called the box model. This box model consists of multiple properties which are margins, paddings, borders, and content. The purpose of the box model is to help you design and build the layout of a web page. It is also a handy tool for identifying issues in CSS stylings.

Learning CSS Box Model is challenging at first. But with enough time and practice, it will make sense to you. Plus, once you’ve learned it, you will have a deep understanding of CSS and be able to build complex web designs.

How to find more information

The last concept to remember is how to find more information about CSS.

It is crucial to know how to search because a lot of times, you will spend your time googling how to add stylings in CSS and fix any issues you encounter when building a layout of a web page.

The first place to start is MDN Web Docs. It is an official documentation website where you can learn anything related to CSS. Another good website to look for CSS information is CSS-Tricks and Coderslang.

Conclusion

To sum it up, it will probably take you few weeks to learn the basics of CSS. As long as you keep the CSS concepts in mind, like the box modal, syntax, and practice regularly, you will become good at CSS within one or two months.

I hope you find this article helpful, and good luck learning CSS!

Get my free e-book to prepare for the technical interview or start to Learn Full-Stack JavaScript