CSS

What we will cover

This page covers the essential CSS fundamentals every beginner needs.

1. Selectors — targeting HTML elements to style
2. Colors & Backgrounds — adding color to a page
3. Text Styling — fonts, size, alignment
4. The Box Model — how spacing works
5. Borders & Margins — spacing and outlines
6. Quiz — test what you've learned

Selectors

A selector tells CSS which HTML elements to style. There are several ways to select elements, depending on how specific you need to be.

Tag selector

Targets every element of that tag on the page.

p {
    color: blue;
}

Class selector

Targets elements with a specific class attribute. Written with a dot (.) before the name. Classes can be reused on multiple elements.

A class in HTML is a name you give to one or more elements so you can style them using CSS.

.highlight {
    background-color: yellow;
}

<p class="highlight">This text is highlighted.</p>

ID selector

Targets a single element with a specific id attribute. Written with a hash (#) before the name. An ID should only be used once per page.

#header {
    font-size: 24px;
}

<h1 id="header">Welcome</h1>

Key points

• Tag selectors affect every matching element on the page
• Class selectors (.name) can be reused on multiple elements
• ID selectors (#name) should be unique — used once per page
• Classes are generally more flexible and commonly used than IDs for styling

Colors & Backgrounds

CSS lets you set colors for text, backgrounds, borders, and more. There are a few different ways to specify a color.

Named colors

CSS understands plain English color names.

p {
    color: red;
}

Hex codes

A hex code represents a color using six characters after a # — more precise than named colors, and what most designers actually use.

p {
    color: #2563eb;
}

RGB values

RGB stands for Red, Green, Blue — each value ranges from 0 to 255, mixed together to create a color.

p {
    color: rgb(37, 99, 235);
}

Background color

Use background-color to color an element's background.

body {
    background-color: #f5f5f5;
}

Background images

div {
    background-image: url("photo.jpg");
    background-size: cover;
}

Key points

• Colors can be set with names, hex codes, or RGB values
• Hex codes are the most commonly used in real projects
• background-color and background-image both style an element's background

Text Styling

CSS gives you control over how text looks — font, size, weight, alignment, and more.

Font family

Sets which typeface is used. It's good practice to list a few fallback fonts, in case the first one isn't available.

p {
    font-family: Arial, sans-serif;
}

Font size

h1 {
    font-size: 32px;
}

Font weight

Controls how bold text appears.

p {
    font-weight: bold;
}

Text alignment

h1 {
    text-align: center;
}

Text color

p {
    color: #333;
}

Text decoration

Commonly used to remove the default underline from links.

a {
    text-decoration: none;
}

Line height

Controls the spacing between lines of text, improving readability.

p {
    line-height: 1.6;
}

Key points

• font-family sets the typeface
• font-size and font-weight control size and boldness
• text-align positions text (left, center, right)
• line-height improves readability by spacing out lines

The Box Model

Every HTML element is treated as a rectangular box by the browser. The box model describes the parts that make up that box — content, padding, border, and margin — from the inside out.

The four parts

• Content — the actual text or image inside the element
• Padding — space between the content and the border
• Border — a line that wraps around the padding and content
• Margin — space outside the border, separating it from other elements

Example

div {
    width: 200px;
    padding: 20px;
    border: 2px solid black;
    margin: 10px;
}

Here, the content area is 200px wide, with 20px of padding around it, a 2px border around that, and 10px of margin outside the border.

Why this matters

By default, padding and border are added on top of the width you set — so an element with width: 200px and padding: 20px actually takes up more than 200px of space total. To avoid this confusion, many developers use:

* {
    box-sizing: border-box;
}

This makes padding and border count within the stated width, instead of adding to it — much easier to predict and work with.

Key points

• Every element is a box: content → padding → border → margin
• box-sizing: border-box is a common fix to make sizing more predictable
• Margins can collapse (combine) between adjacent elements — a quirk worth knowing as you go further

Borders & Margins

Borders and margins are two parts of the box model we just covered — here's a closer look at how to actually use them.

Borders

A border wraps around an element. It needs three things: width, style, and color.

div {
    border: 2px solid black;
}

• 2px — the thickness of the border
• solid — the style (other options: dashed, dotted, double)
• black — the color

Rounded corners

div {
    border: 2px solid black;
    border-radius: 12px;
}

border-radius rounds the corners — a higher value creates a more rounded (or fully circular) shape.

Styling individual sides

div {
    border-top: 2px solid red;
    border-bottom: 1px solid grey;
}

Margins

Margin creates space outside an element, pushing other elements away from it.

div {
    margin: 20px;
}

Individual margin sides

div {
    margin-top: 10px;
    margin-bottom: 20px;
    margin-left: 5px;
    margin-right: 5px;
}

Centering with margin

div {
    width: 300px;
    margin: 0 auto;
}

Setting left and right margin to auto (with a defined width) centers a block element horizontally — a trick you've actually used already on EDUhub.

Key points

• Borders need width, style, and color to display properly
• border-radius rounds corners
• Margin creates space outside an element; padding creates space inside it
• margin: 0 auto is a common trick to center elements