DEV logo with HTML and CSS

#html #css

Hey! I am going to show you how to make a simple CSS - HTML (mostly CSS) logo.

First, simply make an HTML file with this code in it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>DEV logo</title>
</head>
<body>
    <main>
        <p>DEV</p>
    </main>
</body>
</html>

Here we will just get "DEV" printed out on our webpage.

Next, we have to make a file called style.css (we linked "style.css" before) and add some properties to form the text.

First, we have to remove all automatically added margins, because it can scramble our code:

*{
    margin: 0;
}

Now we can work on the text itself, we have to make it thick with the font-weight operator, make the text bigger with the font-size operator and I found a font family that's similar to the DEV logo's style, so we can add that as well:

p{
    font-family: 'Trebuchet MS';
    font-weight: 900;
    font-size: 50px;
}

After that, we can put a rounded box around the text with the following code:

p{
    border: 5px solid black;
    border-radius: 10px;
    background-color: black;
    color: white;
}

And in the end we can put the logo in the middle of the screen:

body {
    text-align: center;
}
main{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}

So the whole style.css would look like this:

*{
    margin: 0;
}
body {
    text-align: center;
}
main{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
}
p {
    font-family: 'Trebuchet MS';
    font-weight: 900;
    font-size: 50px;
    padding: 21px 5px;
    border: 5px solid black;
    border-radius: 10px;
    background-color: black;
    color: white;
}

And here is the finished DEV logo: