You can apply an external CSS stylesheet to multiple HTML documents by using a <link> element in each HTML file. In the <link> tag, set the rel attribute to “stylesheet” and the href attribute to the relative or absolute path of the stylesheet. While it’s generally preferred to use relative URL paths, absolute paths can also be used. In HTML5, the type attribute can be omitted.
It’s recommended to place the <link> tag in the <head> section of the HTML file so that the styles are loaded before the elements they style. This prevents users from seeing un styled content when the page loads.
For example, in your HTML file (index.html), you would include the following code in the <head> section:
<div class="code-block cc-ceksvt">
<div class="cc-9n57oc">
<div class="cc-v2tmjh">
<div role="presentation"> </div>
<div role="presentation">
<div> </div>
</div>
</div>
</div>
<pre><span class="prismjs cc-49loy0" data-code-lang="xml" data-ds--code--code-block="" data-testid="renderer-code-block"><code class="language-xml"><span class="" data-testid="renderer-code-block-line-1" data-ds--code--row=""><span class="token doctype token punctuation"><!</span><span class="token doctype token doctype-tag">DOCTYPE</span> <span class="token doctype token name">html</span><span class="token doctype token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-2" data-ds--code--row=""><span class="token tag token tag token punctuation"><</span><span class="token tag token tag">html</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-3" data-ds--code--row=""><span class="token tag token tag token punctuation"><</span><span class="token tag token tag">head</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-4" data-ds--code--row=""><span class="token tag token tag token punctuation"><</span><span class="token tag token tag">meta</span> <span class="token tag token attr-name">charset</span><span class="token tag token attr-value token punctuation attr-equals">=</span><span class="token tag token attr-value token punctuation">"</span><span class="token tag token attr-value">utf-8</span><span class="token tag token attr-value token punctuation">"</span> <span class="token tag token punctuation">/></span><br>
</span><span class="" data-testid="renderer-code-block-line-5" data-ds--code--row=""><span class="token tag token tag token punctuation"><</span><span class="token tag token tag">link</span> <span class="token tag token attr-name">rel</span><span class="token tag token attr-value token punctuation attr-equals">=</span><span class="token tag token attr-value token punctuation">"</span><span class="token tag token attr-value">stylesheet</span><span class="token tag token attr-value token punctuation">"</span> <span class="token tag token attr-name">type</span><span class="token tag token attr-value token punctuation attr-equals">=</span><span class="token tag token attr-value token punctuation">"</span><span class="token tag token attr-value">text/css</span><span class="token tag token attr-value token punctuation">"</span> <span class="token tag token attr-name">href</span><span class="token tag token attr-value token punctuation attr-equals">=</span><span class="token tag token attr-value token punctuation">"</span><span class="token tag token attr-value">style.css</span><span class="token tag token attr-value token punctuation">"</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-6" data-ds--code--row=""><span class="token tag token tag token punctuation"></</span><span class="token tag token tag">head</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-7" data-ds--code--row=""> <span class="token tag token tag token punctuation"><</span><span class="token tag token tag">body</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-8" data-ds--code--row=""> <span class="token tag token tag token punctuation"><</span><span class="token tag token tag">h1</span><span class="token tag token punctuation">></span>This is the HTML Web Page<span class="token tag token tag token punctuation"></</span><span class="token tag token tag">h1</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-9" data-ds--code--row=""> <span class="token tag token tag token punctuation"><</span><span class="token tag token tag">p</span><span class="token tag token punctuation">></span> External CSS has been added in this HTML Web Page<span class="token tag token tag token punctuation"></</span><span class="token tag token tag">p</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-10" data-ds--code--row=""> <span class="token tag token tag token punctuation"></</span><span class="token tag token tag">body</span><span class="token tag token punctuation">></span><br>
</span><span class="" data-testid="renderer-code-block-line-11" data-ds--code--row=""><span class="token tag token tag token punctuation"></</span><span class="token tag token tag">html</span><span class="token tag token punctuation">></span></span></code></span></pre>
</div>And in your CSS file (style.css), you can define styles for elements like headings and paragraphs:
h1 {
color: red;
text-decoration: underline;
}
p {
font-size: 25px;
font-family: 'Trebuchet MS', sans-serif;
}
Ensure that you provide the correct path to your CSS file in the href attribute. If the CSS file is in the same folder as your HTML file, no path is required. Otherwise, specify the folder name followed by the file name like
<link rel="stylesheet" type="text/css" href="folder/style.css">
Using external stylesheets is the preferred method for managing CSS. Why? Imagine you have a website with 100 pages, all controlled by one stylesheet. If you need to change the link colors from blue to green, it’s much simpler to update the CSS file once and have the changes apply across all 1000 pages.
Conversely, modifying each page individually would be tedious and time-consuming. Moreover, if you decide to completely overhaul your website’s appearance, you only need to modify this one file.
You can link as many CSS files as necessary in your HTML page. For instance:
<link rel="stylesheet" type="text/css" href="style1.css">
<link rel="stylesheet" type="text/css" href="style2.css">
CSS rules follow a specific order, with later rules overriding earlier ones. For example, if you have a style1.css file with styling for paragraphs with the class ‘red’:
p.red { color: #FF0000; }
You can override this in another CSS file, such as style2.css:
p.yellow { color: #FFFF00; }
Now, paragraphs with the ‘yellow’ class will be displayed in a yellow color.
Additional concepts like the ‘!important’ rule, specificity, and inheritance also play a role in CSS styling.
When a visitor accesses your website, their browser downloads the HTML and linked CSS file. Subsequent page visits only require downloading the HTML, as the CSS file is cached. This caching improves page loading speed, resulting in a smoother user experience.