Skip to content Skip to sidebar Skip to footer
Home / Css / Html

Css To Change Color From Grey To #330000

Post a Comment
So I am new to this, but I grabbed this from W3 schools and I am trying to apply a colour to the class - so I created the style section and tried to apply color but its not working

Solution 1:

You have 3 problems

  1. The selector is not good. <span class="label label-default">. If you want to select this, you need to write .label.label-default

You should use a multi class selector , read here -> multi class selector

Read more about CSS Selectors

  1. The background color style is not correct either. You need to write background-color

Read more here -> background-color

  1. h1 tag has to be closed with </h1>

Read more here -> HTML Elements

My own question -> Why use a span inside the h1 if you don't split the content or is there some other reason ? For eg <h1><span class="font-light">Light</span>Not Light</h1>.

If you have no special reason to use span inside the h1, you should add the classes directly on the h1

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  
  .label.label-default {
  background-color:#330000;
  }
  
  </style>
  
</head>
<body> 
 


  <h1><span class="label label-default">Survey</span></h1>
  


</body>
</html>

I know this is linked to an outside style sheet, so maybe thats overriding what I want to do -> the linked is a bootstrap . To check if that overwrites your own custom css, inspect your code in developers console and see if your styles are cut out. Then they are overwritten.

I have googled for an hour or so -> Then you should learn how to ask google. The problems you have are pretty basic. Google-ing multi class selector css or even 2 classes css + background color css would've given you a lot of results and answers


Solution 2:

First of all, you are missing . in your class selector, next you have to remove the space between selectors since they are applied to the same element. You also have to add -to background-color property. Finally close the h1 tag and you're done:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <style>
  
  .label.label-default {
  background-color:#330000;
  }
  
  </style>
  
</head>
<body> 
 


<h1><span class="label label-default">Survey</span></h1>
  


</body>
</html>

Solution 3:

Your css is incorrect, first of all its is "background-color" not "background color"

and second if you want to apply css for same div classes then you should not give space for class name like ".label .label-default"

you have to write class names without spaces like this ".label.label-default"

try this

  <style>
  .label.label-default {
      background-color:#330000;
  }
  </style>

instead of this

  <style>
  .label .label-default {
      background color:#330000;
  }
  </style>

Post a Comment for "Css To Change Color From Grey To #330000"