CSS External Stylesheet
An external stylesheet keeps all your CSS in a separate .css file that any number of pages can link to, making it the standard way to style a whole site.
What an external stylesheet is
An external stylesheet is a plain text file ending in .css that contains only CSS rules, with no HTML around them. You connect it to a page with a <link> element placed inside the <head>. One file can style every page that links to it.
Linking the stylesheet
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
</body>
</html>The <rel> attribute tells the browser this is a stylesheet, and <href> points to the file's location, just like a normal link.
Inside the .css file
The file itself holds ordinary CSS rules. No <style> tags and no HTML belong here.
styles.css
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
color: #333;
}
h1 {
color: #00643c;
}
</style>
</head>
<body>
<h1>Welcome</h1>
<p>This paragraph uses the base font and color from the stylesheet.</p>
</body>
</html>Why it is the preferred method
- One file styles many pages, so the look stays consistent
- Update the design in a single place instead of editing every page
- The browser caches the file, so repeat visits load faster
- Keeps HTML clean and focused on content
