Setup Your First CSS File
Setting up your first CSS file is a key step in learning web development. You'll create an HTML file and a separate CSS file, then connect them so that styles are applied correctly to your webpage.
1. Create the HTML File
Start with a basic HTML structure and save it as
index.html.
<!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 Page</title>
<link rel="stylesheet"
href="style.css">
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple web page
styled with CSS.</p>
</body>
</html>
2. Create the CSS File
Now, create a new file called style.css in the same folder. This file will contain your styling rules.
body {
background-color: #f0f4f8;
font-family: Arial, sans-serif;
color: #333;
padding: 20px;
}
h1 {
color: #1e40af;
}
p {
font-size: 18px;
}
3. Open in Browser
Save both files and open index.html in a browser. You should see the page styled according to your CSS rules.
4. Folder Structure (Example)
/my-first-css-project
│
├── index.html
└── style.css
Keep your CSS and HTML files organized for better maintainability, especially as your project grows.
Conclusion
You’ve now created and linked your first CSS file to an HTML page. This setup is the foundation for all web styling work. From here, you can start learning about selectors, properties, and more advanced CSS concepts.