Here’s an example of creating an external CSS file and connecting it with an HTML file:
1. Create the CSS file (style.css):
CSS file content is given below:
body {
font-family: Arial, sans-serif;
margin: 0; /* Remove default browser margins */
}
h1 {
color: blue;
font-size: 2em;
text-align: center;
margin-top: 20px;
}
p {
line-height: 1.5;
padding: 10px 20px;
border: 1px solid #ddd;
border-radius: 5px;
}
Explanation:
- This CSS file defines styles for the body, <h1>, and <p> elements.
- We set the font-family, margin, colors, font sizes, and other styles.
2. Create the HTML file (index.html):
<!DOCTYPE html>
<html lang=”en”>
<head>
<title>My Website with External CSS</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<h1>Welcome to my Website</h1>
<p>This is a paragraph with some content. It now has styles applied from the external CSS file.</p>
<p>This is another paragraph with the same styles.</p>
</body>
</html>
Explanation:
- We link the external CSS file (style.css) inside the <head> section using <link> the tag.
- The rel attribute specifies the relationship between the HTML document and the linked file (stylesheet in this case).
- The href attribute specifies the path to the CSS file relative to the HTML file.
3. File Structure and Location:
- Save both the HTML file (index.html) and the CSS file (style.css) in the same folder.
- When you open index.html in a web browser, the styles from style.css will be applied, resulting in a more visually appealing webpage.
Tip:
- You can place your CSS file in a separate folder dedicated to CSS styles. Just make sure to update the href attribute in the <link> tag accordingly (e.g., href=”cssfolder/style.css” if the CSS folder is named “cssfolder”).
By following these steps, you’ve successfully separated your styles from your HTML content, making your code more organized and easier to maintain.
