If you’ve followed along with the HTML articles, you can already build a web page. But if you’ve looked at one of those pages in a browser, you’ve probably noticed something: it’s plain. Black text, blue underlined links, a white background, default fonts. It works, but it’s not pretty.
That’s where CSS comes in. CSS is the language that takes your plain HTML and makes it look good — colors, fonts, spacing, layout, the whole visual side of a website. Every good-looking site you’ve ever visited got that way through CSS. The best part? The basics are genuinely easy to pick up. Let’s dig in.
What CSS actually is
CSS stands for Cascading Style Sheets. Like with HTML, the name sounds more complicated than the idea. Let’s break it down:
- Style Sheets — a set of style rules. You write rules that say “headings should be blue,” “paragraphs should use this font,” “this box should have rounded corners.”
- Cascading — there’s a system for deciding which rule wins when several rules could apply to the same element. (More on that later; for now, just know “cascading” refers to how styles combine and override each other.)
Here’s the core idea to hold onto: HTML provides the structure and content; CSS provides the appearance. HTML says “this is a heading, this is a paragraph.” CSS says “make the heading large and dark blue, make the paragraph grey with comfortable line spacing.” They’re two separate layers, and keeping them apart is one of the most important habits in web development.
Remember the house analogy from the HTML articles? HTML is the frame and walls; CSS is the paint, the furniture, the interior design. HTML alone gives you a structure that works but looks bare. CSS is what turns it into a place you’d actually want to be.
HTML and CSS are a team
You’ll never use CSS on its own — it always styles HTML. The two go hand in hand: HTML describes what the content is, and CSS describes how it looks. Keeping them as separate layers (structure in HTML, style in CSS) keeps your code clean and makes both far easier to change. This separation is a habit worth building from your very first stylesheet.
The anatomy of a CSS rule
CSS works by writing rules. Each rule picks some elements and then describes how they should look. Here’s a complete rule:
p {
color: blue;
font-size: 18px;
}Let’s name every part, because these terms come up constantly:
pis the selector — it picks which elements the rule applies to. Here, every<p>(paragraph) on the page.- The curly braces
{ }hold the declaration block — all the style settings. color: blue;is one declaration. It has a property (color) and a value (blue), separated by a colon and ending in a semicolon.font-size: 18px;is another declaration.
So the whole rule reads as: “For every paragraph, set the text color to blue and the font size to 18 pixels.” You can stack as many declarations inside the braces as you like — just end each one with a semicolon.
The pattern never changes: a selector, then a block of property: value; declarations. See it a few times and every CSS rule starts to look familiar.
Properties: the things you can change
A property is one specific thing about an element that you want to control. There are hundreds of them, but in practice you’ll lean on the same handful over and over. Here are some you’ll meet early:
| Property | What it controls |
|---|---|
color |
The text color |
background-color |
The background color |
font-size |
How big the text is |
font-family |
Which font is used |
width / height |
The size of an element |
margin |
Space outside an element |
padding |
Space inside an element, around its content |
text-align |
Left / center / right alignment of text |
Don’t try to memorize this list. The ones you use often will stick on their own, and you can look up the rest whenever you need them — which is exactly what experienced developers do too.
The three ways to add CSS to a page
CSS has to be connected to your HTML somehow. There are three ways to do that, and all three are worth knowing — though one is the clear winner for real work.
1. Inline styles (using the style attribute)
You can put CSS directly on a single element with the style attribute:
<p style="color: blue;">This paragraph is blue.</p>This works, but it only affects that single element, and it bakes style right into your HTML — exactly the mixing we’re trying to avoid. Fine for a quick test, not for real projects.
2. Internal styles (a style tag in the head)
You can put CSS inside a <style> element in the page’s <head>:
<head>
<style>
p {
color: blue;
}
</style>
</head>Now the rule applies to every paragraph on that page. Better than inline — but those styles still only work on this one page.
3. External stylesheet (the recommended way)
The best approach is to put your CSS in a separate file (say, styles.css) and link it from your HTML’s <head>:
<head>
<link rel="stylesheet" href="styles.css" />
</head>And in styles.css:
p {
color: blue;
}This is how real websites are built, and for good reason: a single stylesheet can style your entire site (every page links to the same file), it keeps style fully separate from structure, and browsers can cache the file so your pages load faster. Make the external stylesheet your default habit.
External stylesheets are the standard — use them
For anything beyond a quick experiment, put your CSS in its own .css file and link it with <link rel="stylesheet">. One file can style your whole site, changes apply everywhere at once, and your HTML stays clean and focused on structure. Inline and internal styles have their uses, but the external stylesheet is the professional default — start there.
Your first styles
Let’s put it together. Here’s a small HTML page with an external stylesheet that styles it. First the HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="styles.css" />
<title>My Styled Page</title>
</head>
<body>
<h1>Welcome</h1>
<p>This page has some style.</p>
</body>
</html>And the styles.css that brings it to life:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
}
h1 {
color: #00838f;
}
p {
color: #333333;
font-size: 18px;
}With that, the page jumps from plain default styling to something deliberate: a light grey background, a clean sans-serif font, a teal heading, and dark grey body text. That’s the entire loop of CSS — pick an element with a selector, then set the properties you want. Everything else you’ll ever learn is just more selectors and more properties.
A quick word on colors
You saw blue and also #00838f and #f4f4f4 above. CSS lets you name colors in a few ways:
- Named colors like
blue,red,teal— easy, but limited to a fixed list. - Hex codes like
#00838f— a#followed by six characters representing red, green, and blue. This gives you millions of colors and is the most common way to specify them.
Don’t worry about memorizing hex codes — there’s a whole article on colors coming up. For now, just know that #00838f is simply a precise way of naming one specific shade.
Wrapping up
You now understand the foundation of styling the web:
- CSS (Cascading Style Sheets) is the language that controls the appearance of a web page — colors, fonts, spacing, layout — while HTML handles the structure.
- CSS is written as rules: a selector picks elements, then a block of
property: value;declarations describes how they look. - There are three ways to add CSS — inline, internal, and external — and the external stylesheet (
<link rel="stylesheet">) is the recommended approach for real sites. - You style something by choosing an element and setting properties like
color,font-size,background-color,margin, andpadding.
That’s a genuine foundation — and the best way to lock it in is to try it. Create an HTML file and a styles.css next to it, link them up, and start changing colors and sizes. Watch the page react as you tweak the values.
In the next article, we’ll go deeper into selectors — the part of a rule that decides which elements get styled. Selectors are where CSS really gets powerful: they let you target exactly the elements you want, and they’re the key to styling real pages with precision.
