How do I link my CSS stylesheet to HTML file?


#1

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.