EN

CSS・First steps

Where do you write CSS?

Before trying out colors and sizes, start with "where it lives." Write your CSS in style.css and connect it with <link>—nail this first, and from here on you can jump straight into hands-on work.

We’ve learned that CSS is “the language that dresses things in a look.” But the moment you go to write it, the first wall you hit is the question, “Where am I supposed to write this CSS?” Before trying out colors and sizes, let’s first nail down this “where it lives and how to connect it.” Once you’ve got this, you’ll be able to try things out the moment you write them.

Write CSS in its own file

The basic approach is to write CSS in a separate file from the HTML. The name is often style.css. The contents follow a shape you’ll learn bit by bit from here—for example, you write it like this.

h1 {
  color: teal;
}

It’s fine not to understand what’s inside yet. It’s enough to picture style.css as the container you write this sort of thing into.

Put style.css right next to your HTML file (index.html) in the same folder. This way, “the content HTML” and “the look CSS” are cleanly separated at the file level.

There’s another upside to a separate file. When your pages grow to two, three, and more, every HTML file can connect to the same style.css. Since one instruction sheet is shared across all pages, fixing the background color in just one place makes the whole site’s color change together.

Connecting takes just one line

Just writing in style.css doesn’t reach the page yet. To make it take effect, put the following one line inside the HTML’s <head>.

<head>
  <link rel="stylesheet" href="style.css">
</head>
  • rel="stylesheet" … the signal that says “this is a stylesheet (= CSS)”
  • href="style.css" … the location and name of the file to load

This one line is the bridge connecting HTML and CSS. Only once the bridge is in place do the settings in style.css reach the page.

SetupThe big picture of an HTML fileBack to the lesson where you built the page’s skeleton. The spot for the one line that connects your CSS is right there

What’s happening inside the browser?

Let’s follow what happens with that one <link> line, step by step.

  1. The browser starts reading index.html from the top
  2. It finds <link> inside <head>
  3. It goes to fetch the style.css written in href
  4. It applies the settings written there to the page’s look

Writing <link> in <head> is for the sake of this flow. <head> is where you write the page’s setup information. By telling the browser “here’s the instruction sheet for the look” before it displays the body (<body>), the page appears looking neat from the very start.

Does the file have to be named style.css?

Actually, the name itself is up to you. main.css or piyo.css both work. There are just two rules, though.

  • Make the extension .css (this is the mark of a CSS file)
  • Match the name in href to the actual file name character for character (uppercase and lowercase are distinguished too)

That said, style.css is the standard name used all over the world. If you’ve no particular reason to hesitate, we recommend going with this name to start.

Summary of this lesson

  1. Write CSS in a separate file like style.css
  2. Connect it inside <head> with <link rel="stylesheet" href="style.css">
  3. Only once connected does the CSS take effect on the page

Try it: create style.css and connect it

Let’s prepare a style.css for Shima’s page. Create a new file in the same folder as index.html.

(working folder)
├─ index.html
└─ style.css

Just like this, as long as the two files sit side by side, you’re good. Write this inside style.css.

body {
  background-color: pink;
}

Then add the connecting line to index.html’s <head>.

<head>
  <link rel="stylesheet" href="style.css">
</head>
Browser view. The whole page’s background has turned pink
If the whole page turns pink, that’s proof it connected successfully. The color itself can still be whatever for now—this time it’s enough just to confirm that it’s connected.

FAQ

What if I wrote CSS but nothing changes?
First, check that the name in the link tag's href matches the actual file name character for character, and that index.html and style.css are in the same folder. If fixing that doesn't help, try reloading the browser too.
Where in the HTML do you write the link tag?
Inside the head tag. That's where the page's setup information goes, so you don't write it inside body.
Can I write CSS directly inside the HTML file?
You can with a style tag, but to keep content and look easy to manage separately, we recommend the standard approach—a separate file (style.css) connected with a link tag.