CODEWITHSUNDEEP
htmlcss
Robbbbbi
Robbbbbi

Reputation: 59

Different colors in multiple boxes

I want to make the boxes in the following script to have different colors.

I have this html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title> </title>
    <link rel="stylesheet" href="mycss.css"/>
</head>

<body>

     <div id="Box"> 
        <div class="Box1">
            <div class="box">
                <h2> Heading 3</h2>

            </div>
        </div>
        <div class="Box2">
            <div class="box">
                <h2>Heading 2</h2>
            </div>
        </div>
        <div class="Box3">
            <div class="box">
                <h2>Heading 3</h2>
            </div>
        </div>
    </div>
</body>

And this is the css for the boxes and their shape:

#Box
{
width:100%;
margin: 0 auto;
margin-top:75px;
height:250px;
}
   .Box1, .Box2, .Box3 {
     float:left;
      width:25%;
    background-color:red;
 }

 .box{
height: 250px;
background-color: red;
border:1px solid #bdbdbd;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 10px #bdbdbd;
-webkit-box-shadow: 0 0 10px #bdbdbd;
box-shadow: 0 0 10px #bdbdbd;
 }

How can I make Box1 Box2 Box3 have different color? For example red, blue, green respectively.

Upvotes: 1

Views: 3086

Answers (2)

osman Rahimi
osman Rahimi

Reputation: 1497

you just need add some attribute (backgroundcolor) in your class :.box1,.box2,.box2

and Delete default background-color in Box class .

note :try use lower letter to class name See Example 

#Box {
  width: 100%;
  margin: 0 auto;
  margin-top: 75px;
  height: 250px;
}
.Box1,
.Box2,
.Box3 {
  float: left;
  width: 25%;
}
.box {
  height: 250px;

  border: 1px solid #bdbdbd;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-box-shadow: 0 0 10px #bdbdbd;
  -webkit-box-shadow: 0 0 10px #bdbdbd;
  box-shadow: 0 0 10px #bdbdbd;
}
.Box1 {
  background-color: red;
}
.Box2 {
  background-color: lime;
}
.Box3 {
  background-color: yellow;
}
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <link rel="stylesheet" href="mycss.css" />
</head>

<body>

  <div id="Box">
    <div class="Box1">
      <div class="box">
        <h2> Heading 3</h2>

      </div>
    </div>
    <div class="Box2">
      <div class="box">
        <h2>Heading 2</h2>
      </div>
    </div>
    <div class="Box3">
      <div class="box">
        <h2>Heading 3</h2>
      </div>
    </div>
  </div>
</body>

Upvotes: 1

Kamil
Kamil

Reputation: 2005

Use this CSS code:

.Box1 {
    background-color:red;
}
.Box2 {
    background-color:blue;
}
.Box3 {
    background-color:green;
}

Upvotes: 1

Related Questions