CSS Fundamentals

Adding CSS

⏱ 7 min read📖 Beginner

There are three ways to add CSS to an HTML page: inline, internal, and external. Most real websites use external CSS — a separate file that keeps styles organized and reusable.

We're going to add CSS to our HTML. Since we're building a Netflix clone, let's start by creating a simple page that just says Netflix.

Create a new file called index.html and add this:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Netflix Clone</title>
</head>
<body>

  <h1>Netflix</h1>

</body>
</html>

Save it and open in your browser. You'll see plain text on a white background. That's our starting point — no styling yet.

1. Inline CSS

The simplest way to add CSS is directly inside an HTML tag using the style attribute.

<h1 style="color: red;">Netflix</h1>

The style attribute tells the browser "I'm about to write some CSS directly for this element." Inside the quotes, you write CSS — here, color: red makes the text red.

💡

Click Try It Yourself to see inline CSS in action. Try changing red to another color.

💡

Inline CSS works, but it gets messy fast. We only use it for quick tests or one-off tweaks, not for building a full page.

2. Internal CSS

You can also write CSS inside the HTML page using a <style> tag. This goes inside the <head> section.

<head>
  <style>
    h1 {
      color: red;
    }
  </style>
</head>

Inside the <style> tag, h1 means "target the heading." The curly brackets hold the styles. Here we're saying "make the heading text red."

3. External CSS

This is how real websites are built. You keep all your CSS in a separate .css file and link it to the HTML.

Create a new file called style.css and add this:

h1 {
  color: red;
}

Now connect it to your HTML by adding a <link> tag inside the <head>:

<link rel="stylesheet" href="style.css">

💡

From here on, we'll use external CSS for everything. It's the method used in real projects — it keeps your HTML and CSS clean and separate.

The color Property

The color property changes the text color. You can use color names like red, blue, or green, but in real projects we usually use hex codes.

A hex code starts with # followed by six characters. Each code represents one exact color:

h1 {
  color: #E50914;
}

That's the Netflix red. Hex codes are precise — every browser reads them the same way.

💡

Click Try It Yourself and change #E50914 to a different hex code. Try #ffffff for white or #0000ff for blue.

background-color

To change the background color, use the background-color property. We want the whole page to be black, so we'll apply it to the body tag. The body covers the entire webpage, so anything set here affects the full screen.

body {
  background-color: #000000;
}

💡

Click Try It Yourself to see the black background. Try changing the color value.

Next up: you'll learn hex codes, RGBA, background images — and give your Netflix page a real dark cinematic look.

Learn about CSS colors →

Have anything to say about this lesson?

Your feedback helps improve these tutorials. If something was confusing or missing, let us know.

Adding CSS

1. Inline CSS

Netflix

2. Internal CSS

3. External CSS

The color Property

Netflix

background-color

Netflix

Unlimited movies, TV shows, and more

Have anything to say about this lesson?