CSS for absolute beginners: colours, sizes, and the box model

CSS · July 25, 2026

CSS is the language that makes a web page look the way it does. HTML gives the page structure, CSS gives it colour, layout, typography, and personality. In this beginner lesson we will start from zero, write our first style rules, and by the end you will be able to take a plain HTML page and turn it into something that looks intentional.

How CSS connects to HTML

CSS is a separate language from HTML. You write CSS rules in a stylesheet, and those rules tell the browser how to style each HTML element. There are three ways to attach a stylesheet to a page.

External stylesheet — the recommended way. A separate file like style.css is linked from the <head>:

<link rel="stylesheet" href="style.css">

Internal stylesheet — a <style> block inside the <head>, useful for one-page demos.

Inline styles — a style attribute on a single element, like <h1 style="color: red">. Avoid this when you can, it makes the HTML harder to read and harder to maintain.

For everything we do in this lesson we will use an external stylesheet. Create a new file called style.css in the same folder as your HTML file, and add the link tag shown above to the <head> of your HTML.

Your first rule: a selector, a property, a value

A CSS rule has three parts: a selector that picks which element the rule applies to, a property that says what to change, and a value that says what to change it to.

<code>h1 {

  color: white;

  font-size: 48px;

  text-align: center;

}



p {

  color: #aab0c5;

  line-height: 1.6;

}</code>

The h1 selector matches every <h1> on the page. The properties inside the curly braces are what you change. A semicolon ends each property. This is the most basic rule in CSS, and you have already learned most of the syntax you need to know.

Colours three different ways

CSS accepts colours in three forms. Pick whichever is easiest for the case at hand.

<code>h1 { color: red; }                    /* keyword */

h1 { color: #ff3d8a; }                /* hex */

h1 { color: rgb(255, 61, 138); }      /* rgb */

h1 { color: rgba(255, 61, 138, .5); } /* rgba with alpha */

h1 { color: hsl(335, 100%, 62%); }    /* hsl */</code>

Hex codes are the most common. The first two characters are red, the next two are green, the last two are blue. #000000 is black, #ffffff is white, #ff3d8a is a hot pink. The leading # is required.

RGBA and HSLA add an alpha channel, which is the opacity. rgba(0, 0, 0, .5) is black at fifty percent transparency. Useful for overlays and shadows.

Sizes: pixels, ems, rems, and percentages

CSS has four common units you need to know.

px — pixels. The most familiar unit. An element that is 200px wide takes exactly 200 device pixels. Good for borders, shadows, and small fixed sizes.

em — a multiple of the current element's font size. If the parent has font-size: 16px, then 1.5em means 24px. Useful for typography that scales together.

rem — a multiple of the root element's font size. Almost always 16px unless the user changes their browser default. More predictable than em, the modern default for typography.

% — a percentage of the parent's size. Use it for widths and heights when you want a fluid layout.

As a rule of thumb: use rem for font sizes and spacing, % for widths, and px for borders, shadows, and small fixed UI details.

The box model: padding, border, margin

Every single HTML element is a rectangular box. CSS gives you three properties to control the space around and inside that box. They are the single most important concept in CSS, and once you understand them, layout starts to make sense.

<code>.card {

  padding: 20px;        /* space INSIDE the box, between content and border */

  border: 1px solid #444; /* the line around the box */

  margin: 16px;         /* space OUTSIDE the box, between this and neighbours */

  width: 300px;

}</code>

Imagine a gift box. The content is the gift inside. The padding is the bubble wrap touching the gift. The border is the cardboard. The margin is the empty space between this gift box and the next one on the shelf.

The total width of the element is width + padding-left + padding-right + border-left + border-right. Many beginners get confused because they set width: 300px and then wonder why the element is wider than 300px on screen. The fix is to add box-sizing: border-box; to your universal selector so the width includes padding and border, the way most people intuitively expect.

<code>* { box-sizing: border-box; }</code>

Add that line to the top of every CSS file you write. It is the single most useful one-liner in modern CSS.

Three ways to pick an element

You can select elements by tag name, by class, or by id. The class attribute is the workhorse. The id attribute should be reserved for one-off elements like a unique header logo.

<code>/* tag selector */   h1 { color: white; }

/* class selector */ .button { padding: 10px 20px; }

/* id selector */    #main-nav { background: #111; }</code>

To style a specific element, give it a class in your HTML and a rule in your CSS. The convention is to use lowercase-with-dashes for class names, like primary-button or card-title.

Hover and focus states

Interactive elements should look different when the user hovers or focuses them. CSS lets you target these states with pseudo-classes.

<code>a:hover  { color: #ff8a3d; }

a:focus  { outline: 2px solid #ff8a3d; }

button:active { transform: scale(0.97); }</code>

Always style :focus for keyboard accessibility. If you remove the default outline, replace it with something visible. Never leave keyboard users guessing where they are on the page.

Putting it together: a small page

Save this stylesheet, refresh the page, and watch it transform.

<code>* { box-sizing: border-box; margin: 0; padding: 0; }



body {

  font-family: system-ui, -apple-system, sans-serif;

  background: #0a0d18;

  color: #e9ecf5;

  line-height: 1.6;

  padding: 40px;

}



h1 {

  font-size: 2.5rem;

  color: #ff8a3d;

  margin-bottom: 1rem;

}



h2 {

  font-size: 1.5rem;

  color: #3dffff;

  margin-top: 2rem;

  margin-bottom: 0.5rem;

}



p { color: #aab0c5; max-width: 65ch; }



a {

  color: #ff8a3d;

  text-decoration: none;

  border-bottom: 1px dotted #ff8a3d;

}

a:hover { border-bottom-style: solid; }</code>

This is a real, professional-looking page in fifteen lines of CSS. The pattern of using a dark background, a single accent colour for headings and links, and a muted grey for body text is one of the most popular in modern web design. Notice the use of rem for spacing, ch for line length, and the :hover state for the link.

What is next

You now know how to attach a stylesheet, write rules, pick elements, set colours and sizes, and use the box model. In the intermediate lesson we will go further: Flexbox and Grid for layout, responsive design with media queries, animations, and the modern features of CSS that make complex layouts possible without any JavaScript.

← More in CSS