External CSS
External CSS allows you to keep the design and structure of a website separate. By linking a .css file to your HTML document, you can style multiple pages consistently and efficiently.
Example: Linking of an External CSS File
HTML File (index.html)
CSS File (example.css)
Output:
.webp)
Why Use External CSS ?
Syntax:
- Keeps HTML clean and focused on content.
- Allows style reusability across multiple HTML files.
- Enhances maintainability and performance.
Syntax:
<link rel="stylesheet" href="style.css">- Add this line inside the tag of your HTML file.
- "style.css" is the name of your external CSS file.
Example: Linking of an External CSS File
HTML File (index.html)
<!DOCTYPE html><html>
<head> <link rel="stylesheet" href="example.css"></head>
<body>
<h1>Welcome to</h1> <p>Quipoin.</p>
</body>
</html>CSS File (example.css)
body { background-color: lightblue;}
h1 { color: red; margin-left: 10px;}Note: Always remember to use the correct unit like px in properties such as margin-left.
Output:
Key Benefits
- Reusable Styles: Use the same CSS file for multiple HTML files.
- Clean Code: Keeps your HTML free from cluttered inline styles. Improved Load
- Times: CSS files are cached by browsers for faster page loads.