How to Set Up a CSS File

Step 1: Create Your Files

You need two files:

index.html
style.css

Illustration

project-folder/ │ ├── index.html └── style.css

Step 2: Link the CSS File to HTML

Add this line inside the <head> section of your HTML file:

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

Illustration

Step 3: Write CSS Rules

Open style.css and add styles.

Example CSS

body {
    background-color: lightblue;
    font-family: Arial;
}

h1 {
    color: darkblue;
}

Illustration

HTML Element → CSS Rule → Visual Change <h1>Title</h1> ↓ h1 { color: darkblue; } ↓ Blue Title Appears

Step 4: Open the HTML File

Save both files in the same folder, then open index.html in your browser.

What Happens?

Browser reads: 1. HTML structure 2. CSS styles 3. Combines them into a styled webpage

Complete Example

index.html

<!DOCTYPE html>
<html>
<head>
    <title>My Website</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <h1>Welcome!</h1>
    <p>This page uses CSS.</p>
</body>
</html>

style.css

body {
    background-color: lightgray;
}

h1 {
    color: green;
}

p {
    font-size: 20px;
}