How do i get my css to link to my html fie?

Question

I'm using sublime text to create a website and my CSS file wont link to my HTML. I've looked this up and everything seems to be coded correctly (also saved in the same folder). So I'm unsure what I'm doing wrong?

HTML:

<head>
    <title>shannonkelseyann</title>
    <link href="styles/main.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <h1>My portfolio</h1>
    <ul>
        <li>Home</li>
        <li><a href="page2.html">page 2</a></li>
        <li><a href="page3.html">page 3</a></li>
    </ul>
    <h2>This is my homepage</h2>
    <p>And all of my homepage content</p>
</body>

CSS:

body {
 font-family: arial;
 background: red;
}

It being in the same folder is the problem. move the css file to the styles folder. or change the path/ href on the link tag to 'main.css' — Prikesh Savla, Apr 29 '20 at 14:15
"styles/" in the href would search for folder at the same level you have the HTML page stored. Remove the 'styles' and it should work. However, I recommend making a separate folder (I usually title them 'css') and store all of your CSS files in that. — Jeff Berlin, Apr 29 '20 at 14:21
Does this answer your question? [HTML not loading CSS](https://stackoverflow.com/questions/23992546/html-not-loading-css) — disinfor, Apr 29 '20 at 15:16

score 1 · Answer 1 · answered Apr 29 '20 at 14:17

1

If the CSS file is saved in the same folder as the HTML, you just have to use the file's name directly without /styles :

<head>
    <title>shannonkelseyann</title>
    <link href="main.css" rel="stylesheet" type="text/css" />
</head>

answered Apr 29 '20 at 14:17

Ahmed Hammad

2,798
4
18
35

score 1 · Answer 2 · answered Apr 29 '20 at 14:19

welcome to Stackoverflow.

If your css file really is in the same folder as your html file as you say in your question then you need to edit your link to reflect that. At the moment you have:

<link href="styles/main.css" rel="stylesheet" type="text/css" />

You're telling the browser that the style sheet is inside a folder "styles". If it really is in the same folder as your html then you'd use:

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

What the href should be will depend on the folder structure on your server of where the css is compared to the html and what URL you are accessing the html page from.

Great. Please go ahead an upvote any helpful answers and select one as your chosen answer :-) — Andrew, Apr 29 '20 at 14:39

How do i get my css to link to my html fie?

2 Answers2