CODEWITHSUNDEEP
htmlcss
user9459487
user9459487

Reputation:

Attempting to link a website to my Stylesheet

I have recently been working on a website. I just started on it and I can't get the style.css to work. I have done quite harsh digging through the interwebs to search for a solution but I can't look hard enough. To get straight to it, here is my index.html code. 

    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
    <link rel="stylesheet"
    href="https://cdnjs.cloudflare.com/ajax/libs/
fontawesome/4.7.0/css/fontawesome.min.css">
    </head>
    <body>

    <!-- Load an icon library -->

    <div class="navbar">
    <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a> 
    <a href="#"><i class="fa fa-fw fa-search"></i> Search</a> 
    <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a> 
    <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
    </div>

So, when I went to my website (halifaxdevelopers.dx.am), I checked Inspect Element and found that for some reason, my things were moved into my <body>.

Anyways, here is my style.css

/* Style the navigation bar */
.navbar {
width: 100%;
background-color: #555;
overflow: auto;
}

/* Navbar links */
.navbar a {
float: left;
text-align: center;
padding: 12px;
color: white;
text-decoration: none;
font-size: 17px;
}

/* Navbar links on mouse-over */
.navbar a:hover {
background-color: #000;
}

/* Current/active navbar link */
.active {
background-color: #4CAF50;
}

/* Add responsiveness - will automatically display the navbar vertically 
instead of horizontally on screens less than 500 pixels */
@media screen and (max-width: 500px) {
.navbar a {
float: none;
display: block;
}
}

| I hope you guys can help me.

Upvotes: 0

Views: 140

Answers (3)

Akash
Akash

Reputation: 697

Your code should look like the one I have shared below:

<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css" media="screen">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>

<body>

  <!-- Load an icon library -->

  <div class="navbar">
    <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>
    <a href="#"><i class="fa fa-fw fa-search"></i> Search</a>
    <a href="#"><i class="fa fa-fw fa-envelope"></i> Contact</a>
    <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>
  </div>

</body>

</html>

The output will look exactly like this: enter image description here

Upvotes: 1

Klymenko Kyrylo
Klymenko Kyrylo

Reputation: 661

Change your html structure to something like this:

<html>
<head>
  <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/fontawesome/4.7.0/css/fontawesome.min.css">
  <link rel="stylesheet" href="style.css" type="text/css"/>
</head>
<body>
....
</body>
</html>

Upvotes: 1

Spikeedoo G
Spikeedoo G

Reputation: 31

It looks like you linked 'stylesheet.css' instead of 'style.css'

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

to

<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>

Upvotes: 0

Related Questions