Search code examples
htmlcssjsfiddle

jsfiddle not working or my css/html?

The hover effect is not working, list style type is still bullet, and the flexbox isn't working how I want. For some reason I have to specify the font family in both BODY and A or else it wont appear. Is anything wrong with the way I imported the google font? Is something wrong with my code or is it something to do with jsfiddle?

HTML:

<body>

<ul class="container">
  <li class="item"><a href="">Home</a></li>
  <li class="item"><a href="">About</a></li>
  <li class="item"><a href="">Services</a></li>
  <li class="item"><a href="">Contact</a></li>
</ul>

</body>

CSS:

@import url('https://fonts.googleapis.com/css?family=Kumar+One');

//GENERAL

body{
  font-family: 'Kumar One', cursive;
}

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}

//CLASSES AND ID'S

.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}

//INTERACTION

.item:hover{
  background-color: #0b6c70;
}
Solution

  • Seems like the problem is with the comments you've added in a wrong syntax for CSS.

    Here is a fixed code working on jsfiddle

    @import url('https://fonts.googleapis.com/css?family=Kumar+One');

a{
  text-decoration: none;
  font-family: 'Kumar One', cursive;
}

.container{
  display: flex;
  justify-content: space-around;
  list-style-type: none;
}

.item{
  width: 8em;
  text-align: center;
  background-color: #10999e;
}


.item:hover{
  background-color: #0b6c70;
}