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

Question

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>

I suggest you learn a bit more CSS. Look for ids and classes (ex. `#myId` or `.myClass`). — JCOC611, Jan 02 '14 at 03:40
Yeah, I'm in intro to css in codeacademy. I barely started to learn ID but what is class used for? — user3130676, Jan 02 '14 at 03:46
Suggest you to read this: http://stackoverflow.com/questions/544010/css-div-id-vs-div-class — He Hui, Jan 02 '14 at 03:49

score 1 · Answer 1 · answered Jan 02 '14 at 03:40

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.

So I would need to 'name' each div by using id and use that name to style it? Can I name it whatever I want? Thanks in advance. — user3130676, Jan 02 '14 at 03:44
yes, generally you can name it whatever you want, just refer to those names in your CSS correctly to style. for CSS id naming conventions see here http://stackoverflow.com/questions/70579/what-are-valid-values-for-the-id-attribute-in-html — gaurav5430, Jan 02 '14 at 03:59

score 1 · Answer 2 · answered Jan 02 '14 at 03:41

1

Use a different id for each one.

Then for your css

Div#first {

}

div#second {

}

answered Jan 02 '14 at 03:41

Laurence Quinn

61
3

score 1 · Answer 3 · answered Jan 02 '14 at 03:44

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/

score 0 · Answer 4 · answered Jan 02 '14 at 03:42

0

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>

answered Jan 02 '14 at 03:42

Josh Beam

19,292
3
45
68

score 0 · Answer 5 · answered Jan 02 '14 at 03:48

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.

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

5 Answers5