Why <link/> is not working?

Discussion in 'HTML and CSS' started by Herbie24, Jan 1, 2020.

  1. Herbie24

    Herbie24

    Joined:
    Jan 1, 2020
    Messages:
    1
    Likes Received:
    0
    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

    Code (HTML5):

    <!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
    }
     
     
    Last edited by a moderator: Jan 1, 2020
    Herbie24, Jan 1, 2020
    #1
    1. Advertisements

  2. Herbie24

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    115
    Likes Received:
    17
    Herbie lets correct this first:
    You have these two lines
    Code (Text):

    <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 (Text):

    <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">
     
    sunfighter, Jan 2, 2020
    #2
    1. Advertisements

  3. Herbie24

    independent

    Joined:
    Nov 23, 2019
    Messages:
    63
    Likes Received:
    1
    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>
     
    independent, Jan 2, 2020
    #3
  4. Herbie24

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    115
    Likes Received:
    17
    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>
     
    sunfighter, Jan 2, 2020
    #4
  5. Herbie24

    krypton

    Joined:
    Jan 4, 2020
    Messages:
    10
    Likes Received:
    0
    Location:
    Ilorin, Kwara, Nigeria
    Also are they in the same folder?
     
    krypton, Jan 4, 2020
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.
Similar Threads
Loading...