EN

CSS・First steps

What is CSS?

CSS is the language that dresses up the skeleton you built with HTML. Color, size, layout—all of that is CSS's job.

HTML was the page’s “skeleton,” remember? But with only a skeleton, the text is plain black and the background plain white—pretty bare. CSS is what dresses that skeleton in a “look”—things like color, size, and layout.

How HTML and CSS divide the work

LanguageIn charge of
HTMLThe content and structure—“this is a heading,” “this is a paragraph”
CSSThe look—“make that heading blue and big”

Just as changing your clothes doesn’t change the person inside, changing the CSS leaves the HTML content as it is. Only the look changes, freely.

The joy of being able to change the outfit

You might wonder, why bother separating them? The biggest reward is that changing the outfit is free and easy.

Dress the same HTML (the content) in bright-outfit CSS and you get a cheerful page; dress it in calm-outfit CSS and you get a grown-up page. Without touching a single character of the content, you can change the whole mood. That’s the best part of keeping them separate.

Here’s how dressing it up changes things

Seeing beats explaining. Here’s the same content, shown before and after CSS is applied, side by side.

The text inside is exactly the same in both. Only the look changed—that’s CSS’s job.

What the name CSS means

CSS stands for Cascading Style Sheets. It sounds like a hard name, but the important bit is the back half, “style sheet” = an instruction sheet for the look. You collect instructions like “this heading is blue” and “this paragraph is big” onto a single sheet—that’s the image behind the name.

The front part, “Cascading” (flowing down like a waterfall), refers to the rule for which instruction wins when several overlap. That comes into play in a much later lesson, so for now it’s enough to take home just “CSS = an instruction sheet for the look.”

Here’s what you can do

Let’s peek at a few things CSS can do (a simple “huh, neat” is plenty for now).

  • Change the color of text
  • Make text bigger or smaller
  • Create gaps (spacing) around things
  • Lay a color on the background

Every one of these is about the “look.” You’ll be fine remembering that adjusting anything you can see is mostly CSS’s job.

For example, “make the heading text teal” is written like this in CSS.

h1 {
  color: teal;
}

It’s fine not to know how to read it yet. “Which part (h1)” and “what to do (make the text color teal)“—with just this short instruction, the page’s look changes. We’ll learn to read and write this shape slowly, starting from the next lesson.

The pages around you are all CSS too

The news sites you read every day, the video sites, even this learning site—their looks are all made with CSS. The big sites the pros build and the small pages you’re about to build use exactly the same mechanism. Every single thing you learn from here on is a real, professional tool.

Summary of this lesson

  1. CSS is the language in charge of the look
  2. HTML (content) and CSS (look) have separate roles
  3. You can swap the outfit—changing only the look—while the content stays the same

FAQ

What does CSS stand for?
It stands for Cascading Style Sheets. It's enough to remember that a 'style sheet' is an instruction sheet for how things look.
Can you build a web page with CSS alone?
No. CSS is a language for dressing up HTML, so you need the HTML skeleton first. Skeleton first, outfit second—that's the order.
Which should I learn first, HTML or CSS?
HTML first. Because CSS is the language for writing 'which part of the HTML, and how to change it,' once you understand HTML's headings and paragraphs, CSS clicks into place much more easily.