Learn CSS: Create the Microsoft Logo (Version 1)

One of the best ways to learn CSS is by creating something useful while you learn. I will show you how to use the following CSS items by creating the Microsoft logo:

CSS Grid
Multiple CSS Classes

What we will be creating

We will create the Microsoft logo in pure CSS. It will look like this:

Create our starter files

Let's start by creating two files called index.html and style.css. In your index.html file add the following starter code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

In my previous articles on creating a logo using pure CSS, I used Flexbox to center the logo on the screen. Since I will be using CSS Grid in this article, I am giving you the equivalent code.

In the style.css file add the following starter code:

body{
  margin: 0;
  padding: 0;
  height: 100vh;
  display: grid;
  place-items: center;
  background: azure;
}

CSS Grid

CSS Grid is a two-dimensional grid-based layout system that, compared to any web layout system of the past, completely changes the way we design user interfaces. CSS Grid is the very first CSS module created specifically to solve the layout problems we have all been hacking our way around for as long as we have been making websites.

To create the Microsoft Logo, we need 4 colored squares. The squares are laid out in a design of 2 rows and 2 columns. The gap between the columns and the rows is the same size.

I will show you how to lay this out using CSS grid but first, we need to add HTML code for the squares and the container for the logo.

Multiple CSS Classes

Inside the body tag in our index.html file we need to add the necessary code to display our Microsoft logo.

First, we will need a container that will wrap around each of the four squares in the logo. Inside this container, we will have four div elements. Each of these elements will represent one of the squares in the logo.

Each square will have multiple CSS classes assigned to it. The first class will be our square class that will define its height and width. The second class will be a color assigned to that square.

Update your index.html file so it looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Microsoft Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="microsoft-logo">
        <div class="square red"></div>
        <div class="square green"></div>
        <div class="square blue"></div>
        <div class="square yellow"></div>
    </div>
</body>
</html>

Updating our styles

Previously I talked about CSS grid and creating a layout that has 2 rows and 2 columns. In the style.css file add the following code to create our grid layout:

.microsoft-logo{
    display: grid;
  grid-template-columns: 200px 200px;
  grid-row: auto auto;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

The last thing we need to do with our styles is to define our square class and set colors for each square. For this demo, I am going to set the square to be 200px in width and height.

Add the following code to your style.css file:

.square {
    width: 200px;
    height: 200px;
}

.red{ background-color:#F35325; }
.green{ background-color:#81BC06; }
.blue{ background-color:#05A6F0; }
.yellow{ background-color:#FFBA08; }