What is a style.css File?
A style.css file is a separate file that contains CSS (Cascading Style Sheets) code.
CSS is used to control the look and feel of a webpage — things like colors, fonts, spacing, and layout.
How it Works
- HTML Structure Your webpage is built with HTML, which defines the content (like headings, paragraphs, images).
- CSS Styling The style.css file defines how that content should appear — for example:
body {
background-color: lightblue;
font-family: Arial, sans-serif;
}
h1 {
color: darkblue;
text-align: center;
}
3. Linking the CSS File You connect the CSS file to your HTML using a <link> tag in the <head> section:
<head>
<link rel=”stylesheet” href=”style.css”>
</head>
Why Use a Separate CSS File?
- Cleaner Code: Keeps HTML and styling separate.
- Reusability: You can use the same CSS file for multiple pages.
- Easier Maintenance: You only need to update one file to change the look of your whole site.
Here’s a simple example of a webpage using a separate style.css file:
HTML File (index.html)
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>My Simple Webpage</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage styled with an external CSS file.</p>
</body>
</html>
CSS File (style.css)
body {
background-color: #f0f8ff;
font-family: Verdana, sans-serif;
margin: 40px;
}
h1 {
color: #2e8b57;
text-align: center;
}
p {
font-size: 18px;
color: #333;
}
What It Does
- Sets a light blue background for the page.
- Uses the Verdana font for all text.
- Centers the heading and gives it a green color.
- Styles the paragraph with a larger font and dark text.
You just need to save both files in the same folder and open index.html in your browser to see the result!
