How do I link my CSS stylesheet to HTML file?

Question

How do I link my CSS stylesheet to HTML file?

Answer

You can insert this tag in the <head> section of your HTML file:

<link rel="stylesheet" type="text/css" href="file-path-to-your-css-file" />

In order to determine what the filepath to your css file is, you need to determine where your html file is relative to your css file. Consider the four scenarios (NOTE: folderName and cssFilename are the names of your folders and css file):

  1. Your css file is in thesame folder as your html file.
    Then your file path will be: ./cssFilename.css
  2. Your css file is inside another folder that is in the same folder as your html file.
    Then your file path will be ./folderName/cssFilename.css
    If your css file is nested in more than one folder, then add another /folderName until you get to your file.
  3. Your css file is in another folder outside your html file.
    Then your file path is: ../cssFilename.css
    If your css file is in multiple folders outside your html file, then you will add a ../ for every folder that is outside.
  4. Your css file is inside a folder that is outside your html folder.
    Then your file path will be ../folderName/cssFilename.css.
    Here, you’ll be using a combination of 2 and 3.
14 Likes

i am not getting mine, even trying your code. :triumph:

2 Likes

worked for me

<!DOCTYPE=HTML>
<head>
<title>
 CSS
</title>
<link rel="stylesheet" type="text/css" href="./1.css" />
</head>
<body>
<h1>hello css</h1>
</body>

1.css in the same directory

h1 {
  color: green;
  font-size: 60px;
}

HELP!
Some reason I can’t link it. Do you see whats wrong?
link href="./Documents/The Streetz/csscontactusstyle.css" type=“text/css” rel=“stylesheet”

I know to close the link it but I tried everything and I saved my file as .css and it saved like that

https://www.youtube.com/watch?v=gr7kzZchs7k made it easy for me and worked

Isn’t the 3 & 4 are the same?? :thinking: :thinking: By the way I am win10 user…In my pc 3 and 4 doesn’t work perfectly

This is the no2 u r showing…Show the example of 3 and 4 where css file stored in completely different directory

1 Like

can i get a more specific explanation as to how ing works? say i’m styling an existing, running, operating website. if i link it via directory/relative path rather than hyperlink, wouldn’t every person using my website need to be on my computer where said directory is stored for the link to work? wouldn’t it fail to work on other computers since the browser will process the link to search for the file/directory and it will lead nowhere because on their device no such file exists?
or does something else occur that i, the person creating the link from my own computer files, cannot see when making my stylesheet? as in, when i link to a file, does it not direct the browser to look for the file in the computer, but instead upload said file’s data somewhere online (server? maybe? is that anything?)/in my code, hidden from view to me, the programmer, and to the audience looking at the website?
i hope i’m clear enough. i’m just on the first lesson of CSS so this might be real noob stuff, and i could go on without fully understanding it i guess, but i want to. thanks

It works just fine with or without the “./” initial characters… so what’s the difference, what are those for?

Thanks

./ denotes that the file/folder you are linking to is in the same directory as the current document. ./ can be omitted, however, I find it a bit confusing when it’s not there

Both href="style.css" and href="./style.css" are correct

When you deploy a website, you are uploading all the files/folders needed to make the website work. This includes your index.html, your style.css, etc. When the user agent is rendering your index.html, it will get instructed to apply the styles in the external stylesheet (the style.css). It will try to find the stylesheet in the location you specified in the href of the <link> element. If you haven’t changed the location of your stylesheet, it will be able to find it in the files/folders you uploaded.

Before you deploy a website, all the files/folders needed to render the website properly are stored locally. However, when you deploy a website, all those files/folders will be hosted somewhere. E.g. GitHub Pages, Heroku, Netlify, AWS, etc.