CSS Series —Post 01: What CSS Actually Does
What CSS Actually Does
(And Why It's Not Just Decoration)
You're not making things pretty. You're controlling how the entire world sees your work. That's power — and it starts here.
💬 "Why Does Mine Look Like That?"
You wrote the HTML. The content is there. The heading, the paragraph, the button. It all works — technically. But it looks like a document from 2003, and everyone else's stuff looks like a real website.
Here's what's actually happening: HTML describes what your content is. CSS controls what it looks like. Without CSS, a browser just renders your structure with its default styles — which, honestly, aren't much to look at.
The moment you add CSS, you're not decorating. You're making decisions. Typography. Color. Spacing. Layout. Every visual choice on every website you've ever admired? Someone wrote CSS for that.
Stop thinking of CSS as "making it pretty." That framing undersells you. CSS is presentation logic — a separate layer of intentional design decisions layered on top of your content. You're an architect, not a decorator.
🧠 The Concept: HTML + CSS = Structure + Presentation
Think of building a website like building a room. HTML is the walls, the floor, the furniture — the structure. CSS is the paint color, the lighting, the layout of where things sit. You need both. But they're separate jobs, and that separation is intentional.
This separation is one of the best ideas in web development. It means you can change how your entire site looks without touching a single line of HTML. Redesign? CSS. Brand refresh? CSS. Dark mode? CSS. Your HTML stays clean and untouched.
🧱 How CSS Actually Connects to HTML
CSS doesn't just appear — you have to tell the browser where to find it. There are three ways to add CSS to an HTML document. All three work. But they are not equally good to use.
Seeing All Three in Code
Let's look at each approach styling the same heading element — so you can see exactly what they look like:
<!-- Inline: style lives on the element itself -->
<h1 style="color: hotpink; font-size: 32px;">Hello World</h1>
<!-- Problem: to change this on 50 pages,
you have to edit 50 elements. No thanks. --><head>
<!-- Internal: style tag lives in the <head> -->
<style>
h1 {
color: hotpink;
font-size: 32px;
}
</style>
</head>
<body>
<h1>Hello World</h1>
</body>
<!-- Better — but only affects this one HTML file. --><head>
<!-- External: link to a separate .css file -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello World</h1>
</body>/* styles.css — your entire site's presentation lives here */
h1 {
color: hotpink;
font-size: 32px;
}
/* Now EVERY h1 across EVERY page you link this to is styled.
Change it once here. Updates everywhere. That's the power. */Anatomy of a CSS Rule
Before you write a single line of CSS, know what you're looking at. Every CSS rule has the same shape:
That's the whole syntax. selector { property: value; } — everything in CSS follows this pattern. The selector targets an HTML element. The property names what you want to change. The value says how.
The rel="stylesheet" in your <link> tag stands for "relationship." You're telling the browser: this file is a stylesheet, and it relates to this HTML document. Without it, the browser won't know how to use the file.
Why External CSS Is Professional
It comes down to one principle: separation of concerns. HTML handles content. CSS handles presentation. When they live in different files, each can change without breaking the other.
Imagine a 20-page website. With external CSS, you update one file and every page reflects it instantly. With inline CSS, you're editing 20 pages. The external approach isn't just cleaner — it's how every production website in the world is built.
If your styles.css file is in the same folder as your HTML, the link is simply href="styles.css". If it's in a css/ subfolder, it becomes href="css/styles.css". Always match the path to where your file actually lives.
Mini Build: Your First External Stylesheet
You're going to create two files, link them together, and use CSS to control your page's background color and heading color. That's it. But when it works, you'll feel it — that first moment CSS actually does something is a good one.
Create your project folder. Make a new folder called my-first-css. Inside it, create two files: index.html and styles.css. They should be in the same folder — no subfolders yet.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My First CSS</title>
<!-- Step 02: This is where you link your stylesheet -->
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>I control how this looks.</h1>
<p>CSS is presentation logic — and I just wrote some.</p>
</body>
</html>Add your CSS. Open styles.css and write the following. We're styling two things: the page background, and the heading color.
/* Target the entire page body */
body {
background-color: #0a0a0f; /* deep dark background */
color: #e0e0e8; /* light text for readability */
font-family: sans-serif;
padding: 40px;
}
/* Target the h1 specifically */
h1 {
color: #ff69b4; /* hotpink — your choice */
font-size: 2.5rem;
}Open it in your browser. Double-click your index.html file. You should see a dark background and a pink heading. If the CSS isn't showing up, double-check that both files are in the same folder and your href="styles.css" matches the filename exactly (including case).
Now make it yours. Change the background to any color you want. Try #1a1a2e, white, or even rebeccapurple. Change the heading to a different color. CSS accepts hex codes, color names, and more. Experiment — nothing breaks.
You didn't just style a heading. You separated structure from presentation, linked two files together, and wrote a complete CSS rule from scratch. That's the foundation every frontend developer builds on.
💛 You're Not Making It Pretty. You're Making Decisions.
Every designer, every senior frontend developer, every person whose portfolio you've admired — they all started exactly where you are right now, writing their first color: hotpink; and feeling that little spark when it works.
CSS has a reputation for being frustrating. And honestly, parts of it will be. But the foundation you just built? Solid. Here's what you now understand that you didn't before:
- CSS is the presentation layer — separate from HTML by design
- Three ways to add CSS exist, and external is the one that scales
- The <link> tag is how HTML and CSS find each other
- Every CSS rule follows the same pattern: selector, property, value
- You can change how everything looks without touching your HTML structure
Next up: the Box Model — the concept that explains why spacing works the way it does, and why "why is there so much space there?" will finally have an answer.
Okay real talk? I spent an embarrassing amount of time thinking CSS was just for people who cared about "how things looked." Like it was the frivolous part of web dev, and the "real" coding was JavaScript and logic and back-end stuff.
I was so wrong. CSS is full of logic. The cascade, specificity, inheritance, layout systems — there is a whole engineering discipline here. The moment I stopped dismissing it and actually learned it, my work leveled up immediately.
So if anyone ever makes you feel like CSS is "the easy part" or "not real code" — they're wrong. And also, their websites probably look bad.
