How to start CSS, a beginner's guide

What CSS is

CSS (Cascading Style Sheets) is a set of rules that decide how your HTML looks: colors, fonts, spacing, and layout. HTML provides the content and structure; CSS provides the appearance. A rule has two parts, a selector that picks which elements to style, and a block of declarations that set properties:

p {
  color: #333;
  font-size: 18px;
}

That reads: “for every paragraph, set the text color and the font size.” That is the whole shape of CSS, repeated. The “cascading” part means that when several rules touch the same element, the more specific and later one wins.

Three ways to add CSS

There are three places CSS can live, and you will mostly want the third:

Inline, a style attribute on one element: <p style="color:red">. Quick for a test, but it does not scale and is hard to maintain.
Internal, a <style> block in the page’s <head>. Fine for a single page or a quick demo.
External, a separate styles.css file linked with <link rel="stylesheet" href="styles.css">. This is the real answer: all your styling in one place, shared across every page, easy to change.

Selectors: how you target things

Three selectors cover almost everything when you start:

Element: p, h1, button, styles every element of that type.
Class: .card, styles any element with class="card". This is the workhorse; you will use classes constantly.
ID: #header, styles the one element with id="header". Use sparingly; classes are more flexible.

A reliable habit from day one: open your browser’s DevTools (right-click any element, choose Inspect). It shows you every rule affecting that element and lets you edit values live. It is the fastest way to learn what a property actually does, and to debug why something is not styled the way you expect.

The box model

Every element is a box with four layers, from the inside out: content, then padding (space inside the box, around the content), then the border, then margin (space outside the box, pushing other elements away). Most early layout confusion is really box-model confusion, so it is worth getting straight first. One line saves a lot of pain: box-sizing: border-box makes an element’s width include its padding and border, which is almost always what you expect.

Try it live

Edit the CSS on the left and watch the card on the right update. Nothing here can break the page; it runs in its own frame.

Sane sizing and a mobile-first habit

Two opinions that save beginners from the most common headaches. First, prefer max-width over a fixed width. A fixed width cannot shrink, so it overflows small screens; max-width caps the size on big screens but lets the element shrink when it must. Second, design for the small screen first, then add styles for wider screens with a media query. Starting narrow and growing is far easier than starting wide and cramming.

For units, three carry you a long way at the start: px for fixed sizes, % for sizes relative to the parent, and rem for font sizes that respect the user’s settings. You can add em, vw, and vh later, once the first three feel natural.

Where to go next

The fastest way to improve is to copy a design you like and rebuild it, leaning on DevTools to see how it was done. For step-by-step CSS tutorials, real technique breakdowns, and a gallery of designs to learn from, CSS Crème is built for exactly this stage:

Browse the CSS Crème tutorials →

From here, the next properties worth learning are Flexbox and Grid for layout, and transitions for simple animation. Build small things, inspect often, and keep your styles in one external file.

FAQ

Do I need to learn HTML before CSS?

A little. CSS styles HTML, so you need enough HTML to make a few elements (a heading, a paragraph, a button) before there is anything to style. An hour of HTML basics is plenty to start.

Should I use inline styles or a stylesheet?

Use an external stylesheet for almost everything. Inline styles (a style attribute on one element) are fine for a quick test, but they do not scale and they are hard to change. One .css file keeps all your styling in one place.

What is the box model?

Every element is a box with four layers from the inside out: the content, then padding (space inside the border), then the border, then margin (space outside it). Most layout confusion is really box-model confusion, so learn it early.

Why does my layout break on a phone?

Usually a fixed width. A width: 600px element cannot shrink, so it overflows a 360px screen. Prefer max-width, which lets the element shrink when it has to, and design for the small screen first.