Yup, definitely !…
Whenever you use an external style sheet, you separate your HTML content from formatting (CSS). That makes it easy to handle HTML and CSS separately and, it also makes it easy to use the same styles for two or more documents.
So,
You also want to know how to write the correct HTML syntax for referring to an external CSS style sheet. Right?
Let’s directly get to the point.
The following HTML syntax is used for referring to an external style sheet:
<link rel="stylesheet" href="styles/main.css">
Now, let’s understand the meaning of each and every term of the above syntax.
In the above syntax, you code a link tag/element that refers to an external style sheet.
External style sheet is basically a separate file that contains the CSS for the page ( i.e., the HTML page).
And, as you already know, the <link> tag basically describes the connection (link) between the current HTML document and an external resource (which is CSS here).
The <link> element is an empty element (elements having no content to display in the web page), it contains attributes only.
So, as you can see in the above syntax, first attribute we are using is the rel (relationship) attribute, this attribute is used for a link element that links to an external file with a value of "stylesheet".
"stylesheet" is one of the value of the rel attribute.
And, this rel attribute specifies the relationship between the current document and the linked document.
The second attribute, href is used to specify the link’s destination which is basically the URL of the page the link goes to.
And, one thing to keep in mind is that the URL which specifies the link’s destination is relative in nature to the current HTML file.
Now, you might be wondering, why the URL is relative here. Right?
It’s only because, Let’s suppose you are creating a web page, definitely there will be so many files which will describe that web page such as HTML file, CSS file and JavaScript file and many more… but the root domain of the web page is unique (example: https://some_name.extension/).
So, as just CSS is one of such file that’s why we do not need to specify the whole file name with the root domain name rather we just need to specify the path of the file where it is saved.
And as you know, a relative URL is simply a type of URL that does not use the full web address but it only contains the location of the file in the same root domain.
And, the link you add refers to a file on the same site and is part of the same root domain.
As a result, the relative URL in the above syntax goes down one folder to the styles folder and locates a file named main.css.
So, Long story short, the href attributes are usually coded with a URL that is relative to the current file and it specifies the URL of the page the link goes to.
? Note: Make sure you have the correct path in the href attribute with the correct CSS file name.
Now, one more question might be arising in your mind. i.e., where you should place this complete <link> (the above) tag in your HTML document. Right?
As this <link> tag is just used for the linking purpose, it does not contain any content to display in the web page or it is not the part of the body of the web page.
So, It should be within the <head> tag of the HTML document.
It would look something like this…
<head>
...
<link rel="stylesheet" href="styles/main.css">
...
</head>
Conclusion:
In this article, you learned how to write the HTML syntax for referring to an external CSS style sheet.
So,
I really hope that you liked my article and got your answer.
Now, It’s your turn!
If you have any question, feel free to ask in the comment section below right now.
And, and, and…
Don’t forget to share this article to your friends.
Coz, as you know, Sharing is Caring! ?… Right?