Why <link/> is not working?

Herbie24 · Jan 1, 2020

this is my code for html im trying to use link to create a link to the main.css page but for some reason its not connecting
im new to html and dont know the factors that play into it im an expirenced coder
i got this info from a video on youtube and did the exact same syntax

HTML:

<!doctype html>
<html>
       
        <head>
            <title>my webpage </title>

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

            <style type="text/css">
                body {
                backround:red;
                font-family: arial
                }

            </style>

            </head>
           
       
   
        <body>
            <h1>big</h1>
           
                   
            <p>
            this is <strong>bold</strong>
            this is <em>italic</em>
            </p>
            <p>
            this is <strong>bold</strong>
            this is <em>italic</em>
            </p>

            <a href="[URL]http://www.google.com[/URL]">google.com</a>
            <br> <ul>
                <li><a href="page2.html">tshirts</a></li>
                <li><a href="page3.html">Hoodies</a></li>
            </ul>
            <br>

           

            <div></div>
            <span></span>

                <br><img src="[URL]https://addapinch.com/wp-content/uploads/2017/07/old-fashioned-vanilla-ice-cream-recipe-DSC_4239-500x375.jpg[/URL]">
</body>


this is the main.css page 



body {
    backround:#999;
    font-family: arial
}

sunfighter · Jan 2, 2020

Herbie lets correct this first:
You have these two lines

Code:

<a href="[URL]http://www.google.com[/URL]">google.com</a>
and
<br><img src="[URL]https://addapinch.com/wp-content/uploads/2017/07/old-fashioned-vanilla-ice-cream-recipe-DSC_4239-500x375.jpg[/URL]">

The URL and /URL are hurting the links. Use

Code:

<a href="http://www.google.com">google.com</a>
and
<br><img src="https://addapinch.com/wp-content/uploads/2017/07/old-fashioned-vanilla-ice-cream-recipe-DSC_4239-500x375.jpg">

As far as linking to a CSS file.
You don't need the /> at the end. This shows me your watching an old video. If you can learn from text - read https://www.w3schools.com/

What you have shown is good and should work IF your file is in a folder entitled "styles" and that folder is in the main folder that is holding your HTML.

In other words if you look into the folder that has the "index.html" file - you will also see a folder entitled "styles". Most common mistake is to have two files "index.html" and "main.css" in the same folder. If that is the case you could leave things alone and use
<link rel="stylesheet" type="text/css" href="main.css">

independent · Jan 2, 2020

additional

you forgot to use semicolon after arial.
and the more correct usage should be like this

<style type="text/css">

body {background-color: #999; font-family: arial; }

</style>

sunfighter · Jan 2, 2020

Thanks independent for the style tag reminder. The type="text/css" was mandatory for HTML4, but is optional in HTML5 which means it's on it's way out and I'd suggest you don't use it. Not needed and just adds unneeded text.
You can also use this:
<link rel="stylesheet" href="style.css">

Herbie you missed a "g" in backround:red; and as a tag on in backround:#999;
You also forgot the </html>

krypton · Jan 4, 2020

sunfighter said:
Herbie lets correct this first:
You have these two lines

Code:

<a href="[URL]http://www.google.com[/URL]">google.com</a> and <br><img src="[URL]https://addapinch.com/wp-content/uploads/2017/07/old-fashioned-vanilla-ice-cream-recipe-DSC_4239-500x375.jpg[/URL]">

The URL and /URL are hurting the links. Use

Code:

<a href="http://www.google.com">google.com</a> and <br><img src="https://addapinch.com/wp-content/uploads/2017/07/old-fashioned-vanilla-ice-cream-recipe-DSC_4239-500x375.jpg">

As far as linking to a CSS file.
You don't need the /> at the end. This shows me your watching an old video. If you can learn from text - read https://www.w3schools.com/

What you have shown is good and should work IF your file is in a folder entitled "styles" and that folder is in the main folder that is holding your HTML.

In other words if you look into the folder that has the "index.html" file - you will also see a folder entitled "styles". Most common mistake is to have two files "index.html" and "main.css" in the same folder. If that is the case you could leave things alone and use
<link rel="stylesheet" type="text/css" href="main.css">

Also are they in the same folder?

Justify-content not working	1	Mar 29, 2021
Buttons lining up	1	Feb 6, 2022
Slideshow not working properly	2	Jan 7, 2023
Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
I need help fixing my website	2	Oct 15, 2023
Border attribute not working	1	Sep 3, 2018
Different font sizes inside same div	2	Dec 3, 2023
HTML Anchor tag not working	2	Dec 15, 2020

Why <link/> is not working?

Herbie24

sunfighter

independent

sunfighter

krypton

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads