Learn CSS: Create the YouTube Logo

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 YouTube logo:

flexbox
border-radius
how to create a triangle in CSS

What we will be creating

We will create the YouTube 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>Youtube Logo</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

</body>
</html>

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

body {
    margin: 0;
    padding: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: azure;
}

Flexbox

We will be using flexbox to center our logo on the screen. Then we will use flexbox to also center the play button in the center of the red background.

Flexbox has a main axis and a cross axis. The main axis is the direction that the content is laid out. The default main axis in flexbox is the horizontal row. If you have the main layout to be column then the main axis is the vertical column.

To center items along the main axis, you use the flexbox property justify-content. To center items along the cross axis, you use the flexbox property align-items.

If you look at the starter code we put in our style.css file you will see that it sets both of these properties to the value of center. This centers our content in the middle of the screen. We want to center the play button in the middle of our red background.

Adding our code for logo

We need to add code to our index.html file for the red background and the play button. Add the following code inside the body tag:

    <div class="youtube-logo">
        <div class="playBtn"></div>
     </div>

border-radius

In previous articles, I have shown how to use border-radius to style all four edges of an element. For my red background, I want all four corners to have the same edge. To make all edges the same I will set the border-radius property to 50px.

Add the following code to your style.css file:

.youtube-logo { 
    background-color: firebrick; 
    width: 300px;
    height: 200px;
    border-radius: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}

This is what our code looks like now in the browser:

Create a triangle in CSS

CSS Tricks and Tips website has a great article on how to create a triangle in CSS. You can read the article here.

In that article, they provide the following CSS code for a triangle pointing to the right. This is exactly what we want for our play button. So I just copied their code and made one change - I changed the color of the triangle from green to white.

Add this code to your style.css file:

.playBtn { 
    width: 0; 
    height: 0; 
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid white;
}