When creating a webpage, it's essential to style it so that it looks appealing to the eye. While styling using inline CSS might be an option for smaller projects, using an external style sheet is highly recommended for large-scale websites. This method separates the presentation of the content from the structure of the HTML document. This means that updates can be made to the presentation, creating consistency on the website or even across multiple websites.
In this article, we will discuss how to refer to an external style sheet with HTML code examples.
What is an External Style Sheet?
An external style sheet is a separate file containing all the styles that you want to apply to an HTML document. These styles are defined in a CSS file with a .css extension. An external style sheet can be accessed across multiple pages on a website and provides the following benefits:
- Consistent styling across all pages of a website
- Allows for easier maintenance and updates to the website
- Reduction in the file size of HTML documents
- Improvement in website accessibility by using keywords instead of presentational markup
How to Link an External Style Sheet with Your HTML File?
To link an external style sheet to an HTML file, you must use the tag in the
section of the HTML document. The tag tells the browser to load a file located at a specific URL. The tag contains three attributes that specify the relationship between the HTML and the CSS file.The first attribute is the href attribute. The href attribute specifies the URL of the CSS file.
<link rel="stylesheet" href="style.css">
The second attribute is the type attribute. The type attribute specifies the MIME type of the file. In this case, it should be set to text/css.
<link rel="stylesheet" href="style.css" type="text/css">
The third attribute is the rel attribute. The rel attribute specifies the relationship between the HTML and the CSS file. In this case, set the value to stylesheet.
<link rel="stylesheet" href="style.css" type="text/css" rel="stylesheet">
When linking an external style sheet to your webpage, you must ensure that the path to the CSS file is correct. If the CSS file is located in a subdirectory, you must provide the correct path.
<link rel="stylesheet" href="css/style.css">
You can also link multiple style sheets to a single HTML document. This is done by adding multiple tags to the
section of your HTML file.<head>
<link rel="stylesheet" href="css/style1.css">
<link rel="stylesheet" href="css/style2.css">
</head>
Where to Place the Link Tag in the HTML Document?
The tag should be placed in the
section of your HTML document. This is because the section is used to include meta information about the document, such as the title, character set, and CSS.<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" rel="stylesheet">
<title>My Webpage</title>
</head>
<body>
<h1>Welcome to My Webpage</h1>
<p>This is the content of my webpage.</p>
</body>
</html>
Conclusion
Linking an external style sheet to an HTML document is an essential step for styling your website. Using external style sheets provides consistency across all pages of a website, allows for easier maintenance and updates, reduces file size, and improves website accessibility. Using the tag in the
section of your HTML document properly is the correct way to link an external style sheet. With this article, you have learned how to link an external style sheet using HTML code examples. Happy styling!I can provide more information about the topics discussed in the previous article. Here you go:
External Style Sheets
An external style sheet is a separate CSS file that contains all the styles that you want to apply to an HTML document. These styles are defined separate from the HTML document, allowing you to create consistent styles across multiple pages on a website. External style sheets are stored in files with the .css extension and contain CSS code that specifies the styles for the various HTML elements.
External style sheets are the preferred way of styling web pages because they provide many benefits compared to inline styles or embedded styles. External style sheets help in creating a cleaner and more organized codebase since CSS is separated from HTML. It also reduces the size of HTML documents, improving page load times.
To link an external style sheet to your HTML file, you must use the tag in the
section of the HTML document and specify the path to the CSS file using the href attribute. The type attribute is used to specify the MIME type of the file, and the rel attribute is used to specify the relationship between the HTML and CSS files.<link rel="stylesheet" href="styles.css" type="text/css" />
Inline Styles
Inline styles are those that are defined directly in the HTML element using the style attribute. The style attribute contains one or more CSS declarations separated by semicolons.
<p style="color: red; font-size: 18px;">This is a paragraph with inline styles.</p>
Inline styles are useful when you want to apply specific styles to a particular element that is unique to that element. However, the disadvantage of inline styles is that they can make the HTML document difficult to read and maintain. Also, if you have multiple elements with the same styles, you will have to repeat the styles in each element.
Embedded Styles
Embedded styles are those that are defined inside the
section of an HTML document, using the