My CSS Will Not Link To My HTML

Question

For some reason, my CSS file will not link to my HTML file. I have tried different paths and browsers. When I inspect the elements of the page and look under resources, it doesn't show up.

Here is my HTML:

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
    <link rel="stylesheet" herf="/CSS/fun.css" />
    <title>Task Sheet</title>
</head>
<body>
    <div class="w3-container w3-white middle border">
         <h2>Daily Task</h2>
         <button type="button" name="button" onclick="test()">Button</button>
         <form id="t1">
             <input type="checkbox" name="task1" value="task1"> Task 1 Test</input>
         </form>
    </div>
    <script src="/Users/ddjhende/Desktop/Fun Website/JavaScript/fun.js"></script>
</body>

And please, stop using the `/>` ending for self-closing tags. It's **not needed** Also, stop using capital letters in folder-names, and also spaces in folder-names for web-development. — junkfoodjunkie, Jan 22 '17 at 20:10
@junkfoodjunkie You're presenting personal preferences as fact. — ceejayoz, Jan 22 '17 at 20:12
Is it needed? No? Okay, then it's not a statement of personal preference, my statement was perfectly valid. As for the second sentence, using spaces in folder-names is a definite bad practice, and using upper-case in folder-names might bite you in the ass when you put the code somewhere where casing matters for file- and folder-names. — junkfoodjunkie, Jan 22 '17 at 20:14

score 0 · Answer 1 · edited May 23 '17 at 12:08

0

At line 5 you have written

<link rel="stylesheet" herf="/CSS/fun.css" />

instead you should try

<link rel="stylesheet" href="/CSS/fun.css">

Normally you also define a type

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

But to be honest i don't think that's necessary nowadays...

Edit: Since people seem to love the closing tag, I'd like to add this.

Use the closing tag as much as you like. However, if you have multiple links you should be consistent. Pick the version you want to use and use it in all cases, otherwise it can look confusing and that is not good practice under any circumstances.

edited May 23 '17 at 12:08

Community

1
1

answered Jan 22 '17 at 20:10

Oscar Lundberg

433
4
14

Type is not necessary, and the `/>` won't harm anything either - it's perfectly valid syntax. – ceejayoz Jan 22 '17 at 20:12
`type="text / css"` will break the stylesheet. Remove these spaces. – Oriol Jan 22 '17 at 20:14
1

Either way the href typo is the problem... – Oscar Lundberg Jan 22 '17 at 20:14
Why has this been downvoted?? He clearly addressed the issue the OP is having. – Matthew Jan 22 '17 at 20:16

score 0 · Accepted Answer · answered Jan 22 '17 at 20:36

The problem might be on the path.. What is the path of your css file and html file in your system? Could you explain more in order for us to help you? For example :

css file C:\myproject\css\style.css
html file C:\myproject\main.html

Before you check for your path you should also correct the typo:

<link rel="stylesheet" herf="/CSS/fun.css"/>

href not herf.

My CSS Will Not Link To My HTML

2 Answers2