CODEWITHSUNDEEP
htmlcss
bali208
bali208

Reputation: 2267

background color inside my <div> element using CSS

I have created a <div> tag css table as required. But I am stuck up at one particular place. I need to fill a background color inside my <div> element. Which attribute is to be used to do so?

My code is as follows:

<htmL>

<head>
    <style>

        div.table{
            display: table;
        }
        div.row{
             display: table-row;
            border-style:solid;
            border-color: black;
            border-width:15px;
            padding-top:35px;
            padding-bottom:35px;
            padding-right:50px;
            padding-left:50px;
            margin-top:25px;
            margin-bottom:25px;
            margin-right:50px;
            margin-left:50px;
        }

        
        div.cell{
            display: table-cell;
            border-style: solid;
            border-width:15px;
            padding-left: 30px;
            padding-right: 30px;
            padding-top: 30px;
            padding-bottom: 30px;
            font-weight:5000;
            font-size:200%;
            
            
        }

    </style>
</head>
<body>
    <div id="table" class="table">
        
        <div id="r1" class="row">
            <div id="sys55" class="cell">55
            </div>
            <div id="sys56" class="cell">56
            </div>
            <div id="sys57" class="cell">57
            </div>
            <div id="sys58" class="cell">58
            </div>
            <div id="sys59" class="cell">59
            </div>
            <div id="sys60" class="cell">60
            </div>
            <div id="sys61" class="cell">61
            </div>
            <div id="sys62" class="cell">62
            </div>
            <div id="sys63" class="cell">63
            </div>
            <div id="sys64" class="cell">64
            </div>
            <div id="sys65" class="cell">65
            </div>
        </div>

        <div id="r2" class="row">
            <div id="sys54" class="cell">54
            </div>
            <div id="sys53" class="cell">53
            </div>
            <div id="sys52" class="cell">52
            </div>
            <div id="sys51" class="cell">51
            </div>
            <div id="sys50" class="cell">50
            </div>
            <div id="sys49" class="cell">49
            </div>
            <div id="sys48" class="cell">48
            </div>
            <div id="sys47" class="cell">47
            </div>
            <div id="sys46" class="cell">46
            </div>
            <div id="sys45" class="cell">45
            </div>
            <div id="sys44" class="cell">44
            </div>
        </div>

        <div id="r3" class="row">
            <div id="sys43" class="cell">43
            </div>
            <div id="sys42" class="cell">42
            </div>
            <div id="sys41" class="cell">41
            </div>
            <div id="sys40" class="cell">40
            </div>
            <div id="sys39" class="cell">39
            </div>
            <div id="sys38" class="cell">38
            </div>
            <div id="sys37" class="cell">37
            </div>
            <div id="sys36" class="cell">36
            </div>
            <div id="sys35" class="cell">35
            </div>
            <div id="sys34" class="cell">34
            </div>
            <div id="sys33" class="cell">33
            </div>
        </div>

        <div id="r4" class="row">
            <div id="sys32" class="cell">32
            </div>
            <div id="sys31" class="cell">31
            </div>
            <div id="sys30" class="cell">30
            </div>
            <div id="sys29" class="cell">29
            </div>
            <div id="sys28" class="cell">28
            </div>
            <div id="sys27" class="cell">27
            </div>
            <div id="sys26" class="cell">26
            </div>
            <div id="sys25" class="cell">25
            </div>
            <div id="sys24" class="cell">24
            </div>
            <div id="sys23" class="cell">23
            </div>
            <div id="sys22" class="cell">22
            </div>
        </div>

        <div id="r5" class="row">
            <div id="sys11" class="cell">11
            </div>
            <div id="sys12" class="cell">12
            </div>
            <div id="sys13" class="cell">13
            </div>
            <div id="sys14" class="cell">14
            </div>
            <div id="sys15" class="cell">15
            </div>
            <div id="sys16" class="cell">16
            </div>
            <div id="sys17" class="cell">17
            </div>
            <div id="sys18" class="cell">18
            </div>
            <div id="sys19" class="cell">19
            </div>
            <div id="sys20" class="cell">20
            </div>
            <div id="sys21" class="cell">21
            </div>
        </div>

        <div id="r6" class="row">
            <div id="sys10" class="cell">10
            </div>
            <div id="sys09" class="cell">09
            </div>
            <div id="sys08" class="cell">08
            </div>
            <div id="sys07" class="cell">07
            </div>
            <div id="sys06" class="cell">06
            </div>
            <div id="sys05" class="cell">05
            </div>
            <div id="sys04" class="cell">04
            </div>
            <div id="sys03" class="cell">03
            </div>
            <div id="sys02" class="cell">02
            </div>
            <div id="sys01" class="cell">01
            </div>
        </div>
    </div>
</body>
</html>

My Current output is as follows:

Table

I need to fill a 'red' color or a 'green' color inside the white space you can see. Suggest me the best possible options using CSS to do so.

Upvotes: 5

Views: 71442

Answers (4)

abinaya
abinaya

Reputation: 93

You can use this

.row .cell{

background-color:red; // Use red or green as per your requirement

}

Upvotes: 0

JunM
JunM

Reputation: 7160

http://jsfiddle.net/p2mWX/1/

Add - background-color: green;

   div.cell{
        display: table-cell;
        border-style: solid;
        border-width:15px;
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 30px;
        padding-bottom: 30px;
        font-weight:5000;
        font-size:200%;
        background-color: green;


    }

Upvotes: 1

Karuppiah RK
Karuppiah RK

Reputation: 3964

add background: green; in your div.cell{}

FIDDLE

Upvotes: 9

darthmaim
darthmaim

Reputation: 5158

Use background-color: <color>. (https://developer.mozilla.org/en-US/docs/Web/CSS/background-color)

Upvotes: 2

Related Questions