This post was originally published at https://www.blog.duomly.com/6-most-popular-front-end-interview-questions-and-answers-for-beginners-part-3/#how-to-give-css-link-in-html-file
In the previous section, we talked about what CSS external files are, how to create that, when it’s a good idea to use that method, and why.
It’s great you have that knowledge already, but when you know what’s that, and how to create it, you need to know one more, and probably the most important thing.
How to import CSS file in the HTML file, to be able to use it?
In this section, I would like to show you how we can add the external CSS file, and why in that place.
There are few ideas on how to import CSS into the files, and in the Front-End Interview Questions PART 2, I’ve shown you how to do it in React.js.
Now, let’s go into the HTML file.
In the code example, you can see the CSS file is added just as a link into the header.
In the head, we add the files that should be loaded before the page renders, so in most cases, it’s right for stuff like styles or critical js (in some cases).
You need to remember that the URL of the link can be added as the 3rd party styles, you can add the whole URL with HTTP or add just relative path to the file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Learn coding on Duomly.com</title>
<link rel="stylesheet" href="filename.css">
</head>
<body>
</body>
</html>
Thank you for reading,
Radek from Duomly
Top comments (0)