ADVERTISEMENTS

External CSS

External CSS is a way of including CSS rules in a separate file that is linked to the HTML document. With external CSS, you can define styles that apply to multiple pages on a website, which allows for consistent styling across the site. External CSS is typically used for larger websites or pages where you want to keep the CSS code separate from the HTML code.

How to use external CSS

  • Create a new file and name it styles.css. This file should contain all the CSS rules that you want to apply to your HTML document.
  • Open the style.css file in a text editor and add your CSS rules. For example :
h1 {
   color: blue;
   font-size: 24px;
}

p {
   color: green;
   font-size: 16px;
}
  • In your HTML document, add a <link> tag in the <head> section to link to the external CSS file. The <link> tag should include the rel attribute set to stylesheet, the type attribute set to text/css, and the href attribute set to the file path of the external CSS file.
<!DOCTYPE html>
<html>
<head>
	<title>My Webpage</title>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
	<h1>Welcome to my webpage</h1>
	<p>This is some text in a paragraph.</p>
	<p>This is another paragraph.</p>
</body>
</html>

The <link> tag specifies the location of the external CSS file using the href attribute. The rel attribute indicates the relationship between the HTML document and the CSS file. In this case, the rel attribute value is stylesheet because the CSS file is used to style the HTML document.

By using external CSS, you can keep the CSS code separate from the HTML code, making it easier to maintain and update. You can also apply the same styles to multiple HTML pages by linking to the same CSS file.

ADVERTISEMENTS