Question 292217 in Html Question posted in
Some basic documentation can be found here.

how to add external css to html

I’m beginner in html . I try to add simple external css file to my html which should grey menu bar and the item that I select will turn green. However , the result quite different.

html :


<!DOCTYPE html>


<html>
<head>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> 
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<header> 
  <div class = "home_bar">
  <a class="active" href="#"><i class="fa fa-home"></i></a>
  <a href="#"><i class="fa fa-search"></i></a>
  <a href="#"><i class="fa fa-envelope"></i></a>
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a>
  </div>
 
</header>
<nav></nav>
<body></body>
</html>

css


header {margin:0;}

.home_bar-bar {
    width: 100%; /* Full-width */
    background-color: #555; /* Dark-grey background */
    overflow: auto; /* Overflow due to float */
}
  
.home_bar-bar a {
    float: left; /* Float links side by side */
    text-align: center; /* Center-align text */
    width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
    padding: 12px 0; /* Some top and bottom padding */
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; /* White text color */
    font-size: 36px; /* Increased font size */
}
  
.home_bar a:hover {
    background-color: #000; /* Add a hover color */
}
  
.active {
    background-color: #04aa20; /* Add an active/current color */
}

how could i resolve this issue ?

Tags:

2

Answers


  1. 0

    Your HTML and CSS code has a small inconsistency that’s likely causing the issue with the styling not applying as expected. Here’s a breakdown of what needs to be fixed:

    1. Class Name Mismatch: In your HTML, the class for the div containing the menu items is "home_bar", but in your CSS, you’ve written .home_bar-bar. These should match exactly for the CSS to apply correctly.

    2. Element Placement: The <header> tag is outside of the <body> tag. Usually, the <header> is part of the <body>.

    Here’s how you can correct your code:

    Updated HTML:

    <!DOCTYPE html>
<html>
<head>
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'> 
<link rel="stylesheet" href="home.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
  <header> 
    <div class="home_bar">
      <a class="active" href="#"><i class="fa fa-home"></i></a>
      <a href="#"><i class="fa fa-search"></i></a>
      <a href="#"><i class="fa fa-envelope"></i></a>
      <a href="#"><i class="fa fa-globe"></i></a>
      <a href="#"><i class="fa fa-trash"></i></a>
    </div>
  </header>
  <nav></nav>
</body>
</html>

    Updated CSS:

    header {margin:0;}

.home_bar {
    width: 100%; /* Full-width */
    background-color: #555; /* Dark-grey background */
    overflow: auto; /* Overflow due to float */
}
  
.home_bar a {
    float: left; /* Float links side by side */
    text-align: center; /* Center-align text */
    width: 20%; /* Equal width (5 icons with 20% width each = 100%) */
    padding: 12px 0; /* Some top and bottom padding */
    transition: all 0.3s ease; /* Add transition for hover effects */
    color: white; /* White text color */
    font-size: 36px; /* Increased font size */
}
  
.home_bar a:hover {
    background-color: #000; /* Add a hover color */
}
  
.active {
    background-color: #04aa20; /* Add an active/current color */
}

    This should fix the issue with the menu bar and active item coloring. Remember that the class names in HTML and CSS must match exactly for the styles to apply correctly. Also, ensure that your home.css file is located in the correct directory relative to your HTML file.

    Login or Signup to reply.
  2. 0

    Problem is in the link line of html file.
    To link CSS file:

    1. You should save the CSS and HTML file in the same folder.
    2. In HTML file, link your CSS using
      NOTE: inside the href use the exact name as your CSS file name.
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search