CODEWITHSUNDEEP
htmlcss
user3130676
user3130676

Reputation: 1

How can I make more than one square using html and css?

I currently have a <div> square but don't know how to make another square with a different style. When ever I use <div> to make another square in css, the style would be the same as the first square.

CSS:                                  

div{                                  
 height:100px;
 width:95px;
 background-color:#B80000;
 border-radius:4px;
 text-align:center;
 margin-left:132px;
}

html:
<div>
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a></div>

Upvotes: 0

Views: 4026

Answers (5)

Frederik.L
Frederik.L

Reputation: 5620

You can put as much css classes as you like to an html tag. For example:

.square { display:block; width:100px; height:100px; }
.red { background:#f00; }
.green { background:#0f0; }
.blue { background:#00f; }

Then

<div class="square red">Red square</div>
<div class="square green">Green square</div>
<div class="square blue">Blue square</div>

This approach is also more verbose than having multiple repetitions of the same instructions.

Upvotes: 0

tester
tester

Reputation: 23149

Use classes instead of ids or the literal div selector in your CSS. Create a class that represents your square and two classes that represent your colors.

HTML:

<div class="square a">
    <a href="http://www.mcdonalds.com/us/en/home.html">
    <span>M</span>i'm lovin' it<l>™</l>
    </a>
</div>
<div class="square b">
    <a href="#">
    <span>B</span>bee<l>™</l>
    </a>
</div>

CSS:

.square {
    border-radius:4px;
    height:100px;
    width:95px;
    border-radius:4px;
    text-align:center;
    margin-left:132px;
}
.a {
    background-color:#B80000;
}
.b {
    background-color:#00ff00;
}

http://jsfiddle.net/mSA6E/

Upvotes: 1

Josh Beam
Josh Beam

Reputation: 19772

You can use the html "id" attribute. See this jsfiddle:

div {
    width: 100px;
    height: 100px;
}

#red {
    background-color: red;
}

#green {
    background-color: green;
}


<div id="red"></div>
<div id="green"></div>

Upvotes: 0

Laurence Quinn
Laurence Quinn

Reputation: 61

Use a different id for each one.

Then for your css

Div#first {

}

div#second {

}

Upvotes: 1

gaurav5430
gaurav5430

Reputation: 13882

try like this

CSS: 

#squareA{                                  
 height:100px;
 width:95px;
 background-color:#B80000;
 border-radius:4px;
 text-align:center;
 margin-left:132px;
}

#squareB{                                  
 height:100px;
 width:95px;
 background-color:#B8FFFF;
 border-radius:4px;
 text-align:center;
 margin-left:132px;
}

html:

<div id="squareA">
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a></div>

<div id="squareB">
<a href="http://www.mcdonalds.com/us/en/home.html"><span>M</span>i'm lovin' it<l>™</l></a></div>

Explanation:

you were styling all the divs in your css. the same style will apply to all the divs that you have in your markup. if you need to apply separate styles to separate elements, for e.g. two divs, one way is to give them both different ids and apply styles to particular ids.

P.S : there are a loads of other ways too. try to read more on CSS styling.

Upvotes: 1

Related Questions