Building a Simple Meme with CSS

Aug 6, 2024

Everybody loves memes. Generally memes are created using tools like Photoshop, Canva, Figma and other creative app suites.

However, Memes can also be built using plain HTML & CSS. Let's build a simple meme.

HTML Boilerplate

Create a Blank HTML Boilerplate in VS Code by pressing '!' and the autocomplete will take care of the rest.

Let's give the title as Meme

<!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>Meme</title>
  </head>
  <body>
  </body>
</html>

Container

I'm going to add a simple container for our meme content and add a class of container to it

<body>
    <div class="container"></div>
</body>

CSS

Let's add basic CSS to our page and add height, width and border to our container.

I'm going to add flex box(display: flex; align-items: center; justify-content: center;) to the body so that our container will appear Center in the page.

Remember!!! without adding a height:100vh our container will appear at the top of the page like this

Let's add background of aliceblue for body and white color for container so that both of them will be differentiated.

I am using Arial Font Family you can always use a font of your choice

I also giving a border of 5px solid black for better visibility

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  background: aliceblue;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-family: Arial, Helvetica, sans-serif;
}

.container {
  background: #fff;
  width: 400px;
  height: 311px;
  border: 5px solid black;
}

Our page will look like this

Meme Background

Let's add a meme background to our container. But let's search for it in the first place.

I've downloaded the above template image. The dimension of this image is 400 X 311. Notice that I have already included that to our container class in the CSS.

.container {
  background: #fff;
  width: 400px;
  height: 311px;
  border: 5px solid black;
}

Let's change the background color from #fff to meme template background image

.container {
  background: url("./steve_carell.jpg");
  width: 400px;
  height: 311px;
  border: 5px solid black;
}

Meme Title

Now that we've got our template ready, let's add the title.

This is the title I'm gonna add

I changed all my passwords to "incorrect"

First things first, let's create another div tag inside our container and add a class of meme-content to it

<body>
    <div class="container">
      <div class="meme-content">
      </div>
    </div>
</body>

Now add a <h3> tag for writing our meme title and give it a class of meme-title as well

<body>
    <div class="container">
      <div class="meme-content">
        <h3 class="meme-title">I changed all my passwords to "incorrect"</h3>
      </div>
    </div>
</body>

The page will look like

I'm going to change the text color to white and also align the text

I am giving a font-weight of bold and add text stroke, text shadow properties as well

 .meme-title {
  color: #fff;
  font-weight: bold;
  -webkit-text-stroke-: 10px black;
  text-shadow: 2px 2px black;
}

We can clearly observe that our meme text is not aligned at Center and infact it's starting from the left. So I'm going to use flexbox.

Remember, the meme text is within the meme-content div and is a direct child of our container div.

<body>
    <div class="container">
      <div class="meme-content">
        <h3 class="meme-title">I changed all my passwords to "incorrect"</h3>
      </div>
    </div>
</body>

So I'm going to add flex box to our container

.container {
  background: url("./steve_carell.jpg");
  width: 400px;
  height: 311px;
  border: 5px solid black;
  display: flex;
  align-items: start;
  justify-content: center;
}

Since we've used justify-content: center property, the text has occupied center position. Also observe that I have used align-items:start so that the text appear at the top.

When I change the property to something like align-items:center, we get

Now let's make the text to move to the end with align-items:end

That's it. You now know how to build a simple meme with Plain HTML, CSS. Feel free to play around with your own image and title.