How to Learn CSS Fast

Last modified
June 24, 2020
Time to read
3 min read

Photo by Halacious

Table of Contents

The Problem

As a beginner, the thought of learning CSS can be extremely daunting. There are over 500 distinct properties. Let's suppose for ease of math there are 10 values per property. That's over 5,000 different options to choose from—no wonder it's overwhelming!

When you try to add CSS on your own webpage, things don't seem to look the way you imagined.

If you're like me, you may lean on CSS frameworks like Bootstrap, so you can simply apply a class and the component becomes beautifully styled.

<!-- Styled with Bootstrap --><button class="btn btn-primary">Click me</button>

The problem with a CSS framework like Bootstrap is that you will inevitably need to adjust something in the CSS to fit your design. You are again faced with writing your own custom CSS. But now, you need to patch your custom CSS to work alongside the Bootstrap stylesheet.

Limit Your Scope

When you're first learning CSS, make it easier on yourself by limiting your scope when it comes to the CSS rules you use.

This is where Tailwind CSS comes in. Tailwind CSS is a utility-first CSS framework. You use classes in your HTML to hook into predefined CSS rules. With Tailwind, you would style a button like this:

<!-- Styled with Tailwind -->
<button
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
>
  Button
</button>

You might think the first example using Bootstrap looks simpler and easier to read. I would agree. But our focus is learning CSS, and it's going to take a very long time to learn CSS if you are styling a button by only applying Bootstrap's btn class.

With Tailwind, you are basically writing CSS. In the example above, the classes for the button clearly translate to something along the lines of

/* 
Note: this is CSS-psuedocode
      to give you an idea.
*/
button {
  background-color: shade 500 of blue;
  color: white;
  font-weight: bold;
  padding: a little padding on top/bottom, a little more padding on left/right;
  border-radius: round the corners a little;
}

button:hover {
  background-color: shade 600 of blue;
}

It's not important what the actual values are in each CSS rule. Tailwind provides a carefully created design system out of the box. The design system limits the amount of possible CSS rules you can apply. Moreover, a design system will force your styles to be more consistent throughout your site.

Tailwind's classes are atomic, and the classes Tailwind defines usually apply a single CSS rule. So as a side effect of using Tailwind, you are actually learning how to use CSS.

The Strategy

Assuming I've convinced you to learn CSS with Tailwind, how do you know what classes to use in order to apply the styles? Let's walk through a scenario as an example.

The Scenario

Let's say you want to implement a 3-column layout. The process we will use to figure this out are as follows:

Let's go through each of the steps.

After searching on DuckDuckGo, I see the following:

Search results

We will choose the first result from W3Schools. Here is their example:

W3's example

Then, the following HTML:

<div class="row">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

and CSS:

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */
.row:after {
  content: '';
  display: table;
  clear: both;
}

After I see the CSS code, I turn to Tailwind's documentation and search for clear fix. I am immediately taken to a page on floats. We apply a clear fix where class row was set previously.

<div class="clearfix">
  <div></div>
  <div></div>
  <div></div>
</div>

Then, we look up in the documentation how to apply the rules where the column class used to be.

<div class="clearfix">
  <div class="float-left w-1/3"></div>
  <div class="float-left w-1/3"></div>
  <div class="float-left w-1/3"></div>
</div>

We'll add some text to see what this looks like.

<div class="clearfix">
  <div class="float-left w-1/3">1</div>
  <div class="float-left w-1/3">2</div>
  <div class="float-left w-1/3">3</div>
</div>

See the demo on CodePen.

Strategy Recap

  • Ask yourself what it is you're trying to style.
  • Search the web to learn how to accomplish the task in CSS.
  • Search Tailwind's documentation to find what classes you need to use.
  • Apply the classes in your HTML.

Over time, you will become more familiar which how to do things in CSS and in Tailwind. Then, this process will become very fast because you won't need to look things up as often.

Some Advice

There are a few important properties in CSS that you will want to understand. They are

  • Display
  • Position
  • Margin and padding
  • Width and height

There are other important properties, but I emphasize limiting your scope while first learning CSS. The other properties will come up naturally as you apply the strategy discussed previously. The ones I list above are going to critically impact how things are layed out on your site, and I find they are the properties I am reaching for most of the time.

Learn the Fundamentals

To get you started, learn about the Box Model which is fundamental to CSS. Next, understand the three most common ways to lay things out:

  • Floats (what we practiced earlier)
  • Flexbox
  • Grid

Learn Flexbox to start. It has wide support by browsers and it is simple to use and apply once you are comfortable with it.

You Got This ✌️

Learning CSS is a constant journey. Take baby steps and work incrementally. Search engines are your friend when you get stuck. Tailwind will help you learn CSS by limiting your scope. Moreover, your UIs should improve by utilizing the design system provided by Tailwind.

Good luck on your journey learning CSS, and most importantly, have fun.

Additional Reading

If you want a crash course on using Tailwind CSS, check out their Designing with Tailwind CSS screencast.

At some point, your CSS skills may not be what's holding you back. You may need to learn some principles of web design. Refactoring UI is a quick read that is jam-packed with tactical advice that you can immediately start applying to your designs. For a taste, check out 7 Practical Tips for Cheating at Design.

Last modified
June 24, 2020
Time to read
3 min read

Get the latest articles
Sign up for the newsletter

I will not send you spam. Unsubscribe at any time.

Was this helpful?