My css is not working but there is no error-CodePudding

i'm using vs code i tried :
-removing all other styles but one
-checking all semicolons and tags
-using another browser
none of these worked.

please reply if you have a plausible answer :) thanks!

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>
    <a class = "one" href = "/index.html">MAIN</a>
  </head>
  <body>
    <p id="p1">Websites by Froggy Sites!</p>
    <p id="p2">Nelson Mandela - The Promotion</p>
<style>
  html {
    background-color: #0096FF;
    }
  @font-face {
    font-family: neonclubmusic_bold;
    src: url(NEON\ CLUB\ MUSIC_bold.otf);
    }
  @font-face {
    font-family: neonclubmusic;
    src: url(NEON\ CLUB\ MUSIC.otf);
    }
  a.one:link, a.one:visited, a.one:active {
    font-family: "neonclubmusic_bold";
    font-size: 20px;
    color: black;
    text-decoration: none;
    }
  a.one:hover {
    color: black;
    font-size: 25px;
    text-decoration: underline brown 5px;
    }
  .p1 {
    font-family: "neonclubmusic_bold";
    font-size: 30px;
    text-align: center;
    }
  .p2 {    
    font-family: "neonclubmuic";
    font-size: 20px;
    text-align: left;
  }

</style>
</body>
</html>

CodePudding user response：

Your are probably using your CSS without including it or in wrong place.

Try using in style tag in head section above your body or create a new file named for example index.css and connect this file to your code.

If you use external version. For example

<!DOCTYPE html>
<html lang="en">
<head>

    <link rel="stylesheet" href="index.css" />
    <title>My site</title>
</head>

<body>

  Other HTML STUFF HERE

</body>
</html>

Or if you use style tag

<!DOCTYPE html>
<html lang="en">
<head>

    <style>

        all styling here
        body {
            margin: 0;
        }
    </style>
    <title>My site</title>
</head>

<body>

   All HTML HERE

</body>
</html>

CodePudding user response：

You are trying to access a class name while using: .p1, however it looks like your html is set up with p1 as an id. To access IDs in css you will need to change the "." to a "#".

ex. #p1{ ... } instead of .p1{ ... }

CodePudding user response：

As stated above first you should make sure to reference the elements in the proper way, either if you need to do it by class (".") or by Id ("#") in the CSS code.
I have give some standard order to your code within the HTML structure for improving readability.
Also there are some typos and invalid spaces.

Check the following code:

<!DOCTYPE html>
<html>
  <head>
    <link rel="shortcut icon" href="/body_favicon.ico" type="image/x-icon"/>

      <style>
        html {
          background-color: #0096FF;
          }
        @font-face {
          font-family: neonclubmusic_bold;
          src: url(NEON/CLUB/MUSIC_bold.otf);
          }
        @font-face {
          font-family: neonclubmusic;
          src: url(NEON/CLUB/MUSIC.otf);
          }
        a.one:link, a.one:visited, a.one:active {
          font-family: "neonclubmusic_bold";
          font-size: 20px;
          color: black;
          text-decoration: none;
          }
        a.one:hover {
          color: black;
          font-size: 25px;
          text-decoration: underline brown 5px;
          }
        .p1 {
          font-family: "neonclubmusic_bold";
          font-size: 30px;
          text-align: center;
          }
        .p2 {    
          font-family: "neonclubmuic";
          font-size: 20px;
          text-align: left;
        }

    </style>

    <title>Main</title>
  </head>
  <body>
      <a class="one" href="index.html">MAIN</a>
      <p class="p1">Websites by Froggy Sites!</p>
      <p class="p2">Nelson Mandela - The Promotion</p>
  </body>
 </html>

I left the HTML and CSS in one single file as it is in your initial example.