DEV Community

Cover image for Learn CSS: Create the YouTube Logo
Jennifer Bland
Jennifer Bland

Posted on • Originally published at jenniferbland.com on

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:

YouTube Logo

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

current logo

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;
}
Enter fullscreen mode Exit fullscreen mode

Updating our triangle

If you look at our logo now, the play button triangle has all sides to be the same length. It looks like this:

current logo

This is not really what I want. I want it to be longer and not have equal sides.

Luckily this can be easily fixed by changing one line. Update the border-left property to be this:

border-left: 120px solid white;
Enter fullscreen mode Exit fullscreen mode

Final Logo

If you view your index.html file in a browser you should see the completed YouTube logo:

youtube logo

Let's Connect!

Thanks for reading my article today. You can get the source code here.

If you like my content, please consider buying me a coffee ☕.

Top comments (1)

Collapse
 
mirovlad profile image
mirovlad

Again, thank you for your article! :)
Have you also tried to achieve the curvature of all sides of the red div? (not just the corners)