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

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.

Use a different id for each one.

Then for your css

Div#first {

}

div#second {

}

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/

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>

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.