In HTML, you can use external CSS (Cascading Style Sheets) to separate the style from the HTML content. This is achieved by creating a separate CSS file and linking it to your HTML document. Here are the steps to use external CSS in HTML:
1. Create a CSS File:
Create a new file with a .css extension, for example, style.css. In this file, you can define your styles.
body { font-family: Arial, sans-serif; background-color: #f4f4f4; } h1 { color: blue; } .container { width: 80%; margin: 0 auto; }
2. Link CSS File in HTML:
In your HTML file, use the <link> element within the <head> section to link the external CSS file.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<title>External CSS Example</title>
</head>
<body>
<div class="container">
<h1>Hello Code2Night</h1>
<p>This is an example of using external CSS.</p>
</div>
</body>
</html>
3. Serve the HTML File:
Make sure that both the HTML file and the CSS file are in the same directory, or adjust the path in the <link> tag accordingly. Open the HTML file in a web browser to see the styled content.
Uses Of External CSS:-
This separation of HTML and CSS enhances maintainability, readability, and reusability of your code. It also allows you to apply the same styles to multiple HTML files by linking to the same external CSS file.
20231114111829.png)
20231114111841.png)
20231114115118.png)