Home > OS >  why doesn't this code CSS work in my browser everything is linked properly
why doesn't this code CSS work in my browser everything is linked properly

Time:09-04

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.menu-container {
  color: #fff;
  background-color: #5995DA;  /* Blue */
  padding: 20px 0;
  display: flex;
  justify-content: center;
}

.menu {
  border: 1px solid #fff;
  width: 900px;
  display: flex;
  justify-content: space-around;
}
<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'/>
    <title>Some Web Page</title>
    <link rel='stylesheet' href='/css/style.css'/>
  </head>
  <body>
    <div class='menu-container'>
      <div class='menu'>
        <div class='date'>Aug 19, 2016</div>
        <div class='signup'>Sign Up</div>
        <div class='login'>Login</div>
      </div>
    </div>
  </body>
</html>
this is my html it works fine in my browser my biggest issue is my css when i try checking that my code works in my google browser only my html shows up no matter when i do but when i past the code in the stack overflow snippit it works i dont understand it. im still new to coding.

CodePudding user response:

Go the inspect page section and check whether the css file is imported properly.

  1. Right click on the text that is displayed on the web page and click Inspect

  2. Elements Tab Select the Elements tab as show in the image

  3. On the below Please select the Style Tab. There you can see the CSS style that you used in the css file.(Not the whole will be displayed. Only the HTML used inspect will be displayed.) Style Tab

Additional note: style image If you are seeing like this(check the above image) click that and it will take you the css file. If it's now displaying then check the import of the css file in the tag.

Check the CSS file Name - style.css and check the page and folder name - **/css/style.css

Please like the answer

CodePudding user response:

You can view the css currently in use by the loaded webpage in the developer tools of your browser by right-click and inspecting the opened page.

You can see what, if any, css file is loaded, experiment with different values, and figure out where to go from there

  • Related