External CSS
External CSS is a method of adding CSS styles to an HTML document by defining the styles in a separate CSS file and linking to it from the HTML document. This method is useful when you want to apply styles to multiple web pages throughout the website, without having to redefine the styles on each individual page.
To add external CSS, you need to create a separate CSS file with the desired styles and link it to the HTML document using the <link> tag within the head section of the HTML document. For example, you could create a file called styles.css with the following code:
h1 {
color: red;
text-align: center;
}Then, you would add the following code within the head section of the HTML document to link to the external CSS file:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<h1>Hello World!</h1>
<h1>Welcome to my website!</h1>
</body>
</html>In this example, the <link> tag is used to link to the styles.css file, which contains the CSS styles to be applied to the HTML elements within the body of the HTML document. The href attribute specifies the path to the CSS file, and the rel and type attributes indicate that this is a stylesheet link.
External CSS provides a more efficient and organized way of applying styles to multiple web pages within a website. It also allows for easier maintenance of the styles, as changes can be made in one central location (the CSS file) rather than having to make the same changes on each individual page.