HSHimanshu Sharma
CSS

Learn CSS after HTML: a clear order, common mistakes and a free 29-lesson course

Himanshu Sharma · · 5 min read

Advertisement

CSS has a reputation for being frustrating. You change a value and nothing happens, or the wrong thing moves, or a layout breaks on a phone. Almost all of that comes from a handful of ideas that are rarely explained properly at the start: how a rule decides which elements to style, which rule wins when two disagree, and how every element is a box. Learn those in the right order and CSS becomes predictable. This article gives that order. If you want lessons to follow, the free CSS course on this site covers all of it, ending with a project.

Learn HTML first

CSS styles HTML. Every rule you write targets elements that already exist, so you should be comfortable with elements, attributes, headings, lists and forms before you start. If not, spend a couple of weeks on the HTML course first, or read what to learn first in HTML. If you are curious why the two are separate languages at all, the history of HTML, CSS and MySQL explains how style sheets were proposed in 1994 to take appearance out of HTML.

The order I would learn it in

1. How a rule works

A CSS rule has a selector (which elements) and declarations (what to change):

.card {
  padding: 1rem;
  border-radius: 0.5rem;
}

Start with what CSS is, then the three ways to add CSS to a page and selectors. Learn classes first, because they are the tool you will use most.

2. The cascade, specificity and inheritance

This is the part that most tutorials hurry through and most beginners pay for later. When two rules target the same element, the browser has to choose. It looks at where the rule comes from, how specific the selector is, and which comes last. Read the cascade and specificity and inheritance carefully. Once you can explain why a rule lost, you stop adding !important and guessing.

3. The box model

Every element is a rectangle made of content, padding, border and margin. The box model, margin and padding and box-sizing explain why an element is wider than you expected. Open your browser's developer tools, select an element and look at its box diagram. It is the single most useful debugging view in CSS.

4. Colour, units and text

Learn colours, units and fonts and text. Prefer relative units like rem for text sizes so that people who change their browser's default size are respected, and check that your text has enough contrast against its background. The image colour picker helps when you want to take a colour from a picture.

5. Layout: Flexbox and Grid

Modern layout has two main tools. Flexbox arranges items in one direction, such as a navigation bar or a row of buttons. Grid arranges items in rows and columns, such as a page layout or a card gallery. Learn the display property, then Flexbox basics, aligning with Flexbox, Grid basics and positioning. A simple rule to remember: use Flexbox when you are lining things up along one line, and Grid when you are thinking in rows and columns.

.nav {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

6. Responsive design

A large share of web visits happen on phones, so a page that only works on a laptop is unfinished. Read responsive design and media queries. The habit that works best is to design for a small screen first and add rules for wider screens, instead of the other way round.

7. Polish

Last come the touches that make a page feel finished: backgrounds and gradients, shadows, transitions, transforms, animations and CSS variables. Use animation sparingly, and respect people who ask their system for less motion.

Then build something real: the landing page project ties it all together.

Mistakes that cost the most time

  • Fighting the cascade with !important. It makes the next problem harder. Find out why the rule loses and fix the selector.
  • Writing very specific selectors such as body div.main ul li a span. Prefer one class on the element.
  • Not knowing box-sizing. Without border-box, adding padding makes an element wider than its declared width.
  • Using fixed pixel widths for containers, which break on small screens. Use max-width and flexible units.
  • Removing the focus outline (outline: none) with nothing in its place. Keyboard users then cannot see where they are.
  • Using floats for layout. They were the only option once. Flexbox and Grid are the right tools now.
  • Never testing on a real phone, or at least in the browser's device mode.
  • Changing many things at once. Change one thing, look, and then change the next. You will always know what caused what.

How to practise

  1. Style a page you wrote in HTML. Your own profile page is ideal, because you know its structure.
  2. Use the inspector constantly. Right-click, Inspect, and edit values live. You will learn faster than by reading.
  3. Recreate a layout from memory. Pick a site with a simple layout, close it and build the layout using only what you remember.
  4. Limit yourself. Three colours, two font sizes and one layout idea produce better results than endless options.
  5. Read your own CSS a week later. If you cannot understand it, simplify it.

What the free course gives you

The CSS course has 29 short lessons in seven sections: getting started, colour and text, the box model, layout, responsive design, polish and a final project. Every example opens in a live editor so you can change values and see the result at once. Each lesson has common mistakes, a quiz and an exercise with a worked answer, and there is a final exam with a shareable certificate. Everything is free to read without an account.

To see where CSS fits in a bigger plan, including when to move on to databases, use the roadmap for HTML, CSS and MySQL. When your pages look good, MySQL is the natural next step if you want to build things that store data. Found something confusing? Tell me so I can improve the lesson.

Advertisement