CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML.
CSS is used to style all HTML tags, including the document’s body, headings, paragraphs, and other pieces of text. CSS can also be used to style the display of table elements, grid elements, and images.
External CSS is when you store your CSS rules in a separate file from your HTML file. Then you link to the CSS file from within your HTML file using the <link>
element.
External CSS benefits
The benefits of using External CSS are:
- It separates your content (HTML) from your presentation (CSS). This can make it easier to maintain and update your website because you only have to change one file instead of two files every time you want to make a change.
- It makes your website faster because the browser only has to download one file instead of two files every time someone visits your website.
- You can reuse the same CSS file on multiple HTML pages. So if you have ten different HTML pages that all use the same styles, you only need one CSS file instead of ten different ones.
To use External CSS, you first need to create a CSS file. Then, you can link to it from your HTML file using the <link>
element. The <link>
element goes in the document’s <head>
section.
How to link external CSS stylesheet
Here’s an example of how to link to an external CSS file:
<head>
<link rel="stylesheet" type="text/css" href="/path/to/style.css">
</head>
In the example above, the “rel” attribute stands for “relationship”. The value of “stylesheet” indicates that this is a CSS file. The “type” attribute tells the browser what type of file it is. The value of “text/css” means that it is a CSS file. And finally, the “href” attribute specifies the URL of where the CSS file is located.
Once you have linked to your CSS file from your HTML file, all of the rules in your CSS file will be applied to your HTML document.