How do i link my css stylesheet to my html?

How do i link my css stylesheet to my html?
0

#1
<link rel="stylesheet" href="What will the href be ?? "

#2

The name of the CSS file, if they’re in the same directory.


#3

Its for when you host your style sheet somewhere else.
For example you host it on a different site, the href will be the URL link to were the style sheet is.

<link rel="stylesheet" href="https://www.myhost.co.uk/style.css">

#4

if it’s a local css file you can also do…

<link rel="stylesheet" href="styles.css">

If your styles and html are in the same directory…


#5

the href should be where the css file is. Example: if you have a folder to your css, the href should be href=“myCss/style.css” where “myCss” is the name of the folder


#6

Just an added note as I’ve seen this mistake happen commonly, if you are not using the full url in href put style.css and not /style.css or it will attempt to load style.css from the root of the directory and this has problems if you are loading the file from a subfolder. None of the examples above have this issue but just adding here just in case that type of issue occurs :slight_smile:


#7

Href must be a name of an CSS file , example :
href=“beauty.css”

+NOTE: that CSS stylesheet MUST be in same FOLDER like your html file!.


#8

@harsh124 I usually put my CSS files in this folder under my project folder:

/home/user/project_folder/resources/css/style.css

Then, I link to it in my index.html file (located in /home/user/project_folder/) like this:

<link rel="stylesheet" type="text/css" href="./resources/css/style.css">