This tutorial will show you how to create a similar logo to the one of Microsoft, not the same, because we’re gonna use a simple font, which is Arial.

Final Result

Click on the image below to see a live demo.

Now we start with the following markup

    <div id="wrapper">
        <div id="logo"><div id="c1"></div><div id="c2"></div><div id="c3">
        </div><div id="c4"></div></div>
        <h1>Microsoft</h1>
    </div>

So as you see, I’ve created four empty <div> for squares and a <div id=”logo”> tag to enclose the whole squares, then the text between <h1></h1> tags, and I’ve framed everything in a <div> tag and gave it wrapper as an id.

The technique I’ve used to give the squares that form is display: inline-block, because  I don’t prefer to use float in such things. Here is the CSS code, some explanations are in comments

#logo, #c1, #c2, #c3, #c4{
    margin: 0;     /* to remove default margins and paddings */
    padding: 0;
}
#wrapper{
    width:  300px;
}
#c1, #c2, #c3, #c4{
    width: 25px;
    height: 25px;
    display: inline-block;
    *display: inline; /* for old versions of IE */
    zoom:1;           /* for old versions of IE */
    margin: 0 3px -2px 0;
}
#logo{
    width: 59px;
}
#logo, h1{
    display: inline-block;
    *display: inline;
    zoom:1;
    vertical-align: top;
}
#c1{
    background-color: #F65314;
}
#c2{
    background-color: #7CBB00;
}
#c3{
    background-color: #00A1F1;
}
#c4{
    background-color: #FFBB00;
}
h1{
    font-family: Arial, sans-serif;
    font-weight: normal;
    font-size: 37px;
    margin-top: 5px;
    color: #737373;
    letter-spacing: -0.8px;
}

DOWNLOAD FILE

Feel free to leave a comment if you have any question about this tutorial or just want to say thanks, Thank you for reading and have a great day !