My first HostGator based website is not connecting html and css

I'm trying to connect my HTML homepage to my CSS stylesheet. It works on my computer but it does not seem to work in the Hostgator server. I don't know what I'm doing wrong.

I tried looking around for answers and I came up with one solution which was to create a subfolder for the CSS under the public_html folder. I tried doing it but it didn't seem to work. When I refresh the page it's still the normal (unstylized) text of the HTML file. Here's my website: humanref.com . I've also tried routing the HTML to the proper location, which I think I'm doing successfully, it's just still not working.

Here is how the file organization looks on my host gator server:


-public_html
  -cgi_bin
  -css
    -style.css***
  -HumanRef
  -Default.html***

I want to connect the stared ones.

---(Note: I havent re-routed the UL yet because i want to make sure the css is working.)----

Listed below is the file called Default.html

<!DOCTYPE html>
<html>
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<nav>
<div class="topnav">
<ul>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/Home/Home2.html">Home</a></li>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/Explore/ExploreMain.html">Exlpore</a></li>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/How to Help/DonateYourFace.html">How To Help</a></li>
    <li><a href="C:/Users/trevo/Desktop/Documents/GitHub/HumanRef/HumanRefrence/Pages/About Us/about.html">About Us</a></li>
</ul>
</div>
</nav>
</body>
<link href="/css/style.css" rel="stylesheet" type="text/css" /></html>
<title>Welcome to HumanRefrence</title>
<link href="https://fonts.googleapis.com/css?family=Roboto+Slab" rel="stylesheet" />
<div class="title">
<h1>Welcome to HumanRefrence</h1>

<p>Refrence the Diverstiy of Humanity</p>

<p><button class="button">Start Exploring</button></p>
</div>

<div class="Purpose">
<h2>This Sites Purpose</h2>

Like I said before it shows up as plain HTML without any stylization. What I expect is for the HTML and CSS to connect properly like how I have it on my computer. I don't know what I've done wrong.

3 answers

  • answered 2019-10-15 15:43 sao

    really basic answer, but instead of figuring out the file system, have you considered placing your CSS inside a style tag in your HTML file?

    <style>
       .box {
          color: green;
          border: 2px solid black;
        }
    </style>
    

  • answered 2019-10-15 16:06 Sun

    Basic HTML structure

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <ul>
            <li><a href="pages/site1.html"></a></li>
            <li><a href="pages/site2.html"></a></li>
            <li><a href="pages/site3.html"></a></li>
            <li><a href="pages/subpage/subpage1.html"></a></li>
        </ul>
    </body>
    </html>
    

    More info: Introduction to HTML

    Folder structure should something like:

    public_html
        index.html
        css
            style.css
        pages
            page1.html
            page2.html
            page3.html
            subpages
                subpage1.html
    

    I recommend using relative paths instead of absolute paths.

  • answered 2019-10-16 14:26 Erinn

    We'd love to help you figure this out. If you could please email us at reputation@endurance.com and share the primary email address on your account and the best phone number to reach you we'll do our best. Thank you.

    Erinn Customer Advocate at HostGator