CSS FundamentalsBeginner⏱ 7 min01 / 9

What is CSS?

Learn how CSS gives your HTML pages color, fonts, spacing, and layout — and the three ways to connect CSS to your HTML.

Imagine you just built a house out of plain grey concrete — every wall, floor, and ceiling the exact same colour with no decoration at all. That's HTML on its own: solid structure, but visually a bit grim. CSS (Cascading Style Sheets) is the interior designer that walks in and adds paint, wallpaper, lighting, and furniture. It's the language that makes web pages look good.

In this lesson you'll learn what CSS actually does, how a CSS rule is written, and the three different ways you can attach CSS to an HTML page — plus which way you should almost always choose.

#What Does CSS Do?

CSS controls the visual presentation of HTML elements. Anything you can see on a web page — colours, fonts, sizes, spacing, borders, backgrounds, and how things are arranged — is handled by CSS. HTML tells the browser what the content is; CSS tells the browser how to display it.

Think of it like

HTML is the skeleton; CSS is the outfit

Think of HTML as the bones and muscles of a person — the underlying structure that gives everything shape and meaning. CSS is the clothing, hair, and accessories. The person (structure) is the same underneath, but CSS completely changes how they look to the world.

#Anatomy of a CSS Rule

CSS is written as rules. Every rule has three parts:

  1. Selector — which HTML element(s) to style
  2. Property — which aspect to change (e.g. colour, font size)
  3. Value — what to change it to

The syntax looks like this:

The skeleton of every CSS rule. The curly braces wrap one or more property-value pairs, each ending with a semicolon.
selector {
  property: value;
  property: value;
}

Here is a real example that turns every <h1> heading dark blue and sets its font size to 32 pixels:

A rule targeting the h1 element with two declarations.
h1 {
  color: darkblue;
  font-size: 32px;
}

#Three Ways to Add CSS to HTML

There are three places you can write CSS. Each has its own trade-offs.

Inline CSS — styles live directly on the element using the style attribute.
<!-- 1. Inline: style attribute on a single element -->
<p style="color: red; font-size: 18px;">Hello!</p>
Internal CSS — a <style> block inside the HTML <head> applies styles to the whole page.
<!-- 2. Internal: <style> tag inside <head> -->
<!DOCTYPE html>
<html>
  <head>
    <style>
      p {
        color: red;
        font-size: 18px;
      }
    </style>
  </head>
  <body>
    <p>Hello!</p>
  </body>
</html>
External CSS — the HTML links to a separate styles.css file. That file can be shared across every page of a website.
<!-- 3. External: a separate .css file linked with <link> -->
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>Hello!</p>
  </body>
</html>
The separate styles.css file. Comments in CSS start with /* and end with */.
/* styles.css */
p {
  color: red;
  font-size: 18px;
}
Tip

Always prefer external stylesheets

External CSS is the professional standard because: - One change, many pages — update styles.css and every page on the site updates instantly. - Clean separation — your HTML stays focused on content; your CSS stays focused on looks. - Browser caching — the browser downloads the file once and reuses it, making your site faster.

Use inline or internal styles only for quick experiments or very special one-off overrides.

Common mistake

The href path must match your file location

If your CSS file is in a folder called css/, the link tag must reflect that:

``html <link rel="stylesheet" href="css/styles.css"> ``

A wrong path means the browser silently loads no styles at all — your page will look completely unstyled and there will be no error on screen. Always double-check the path when styles aren't showing up.

Quick check

Which of the following correctly describes a CSS rule?

#Putting It All Together

Here is a minimal but complete example: an HTML page linked to an external stylesheet that styles a heading and a paragraph. This is the pattern you will use in almost every real project.

index.html — clean HTML with a single <link> to load all styles.
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>My Styled Page</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Welcome to CSS!</h1>
    <p>CSS makes the web beautiful.</p>
  </body>
</html>
styles.css — all visual decisions live here, separate from the HTML.
/* styles.css */
h1 {
  color: #2c3e50;
  font-family: Georgia, serif;
}

p {
  color: #555;
  font-size: 18px;
  line-height: 1.6;
}

Key takeaways

  • CSS controls how HTML looks — colours, fonts, spacing, and layout.
  • Every CSS rule follows the pattern: selector { property: value; }
  • You can add CSS inline, internally, or via an external file — external is almost always the right choice.
  • Link an external stylesheet using <link rel="stylesheet" href="styles.css"> inside the <head>.
  • If your styles aren't showing up, the first thing to check is the href path in your <link> tag.
Practice challenges
Test yourself · earn XP
0/4
Predict the output#1

This external stylesheet is linked to a page. What visual result does this rule produce for every <h1> on the page?

predict-output
h1 {
  color: darkblue;
  font-size: 32px;
}
Fix the bug#2

This CSS rule is supposed to turn paragraphs red, but nothing changes. What's wrong?

fix-bug
p {
  color = red;
}
Fill in the blank#3

Complete the <link> tag that loads an external stylesheet named styles.css into the page's <head>. Fill in the attribute that points to the file.

<link rel="stylesheet" ="styles.css">
Fill in the blank#4

Fill in the missing character so this line is a valid CSS comment. Comments in CSS start with /* and end with these two characters.

/* This sets the brand colour 
color: #4f46e5;
Your turn
Practice exercise

Create a small stylesheet that styles a web page about your favourite hobby. Your styles.css file should: (1) set the <body> background colour to any colour you like, (2) make the <h1> a different colour and increase its font-size to at least 36px, and (3) give the <p> elements a comfortable font-size of 18px and a line-height of 1.6. Then link the stylesheet to the provided HTML file.

Try it live — edit the code and hit Run to see it rendered:

solution.css · editable