Explain like I’m five: how to style a website

Bekah McDonald
Nov 4 · 7 min read

So last time we spoke, I told you that making a website is just writing some words and telling the internet where you saved them. And then I told you about some of the different languages we need to write to speak to computers in a way that they understand us.

You wrote some words in a text editor in a language called HTML, saved the words in a file called index.html on your computer and opened it in a browser. It was your first website! And two parrots were really proud of you! Do you remember? I remember it like it was yesterday. Which it wasn’t, because I’ve been busy and it’s actually been a few weeks I think. Don’t yell at me, I’ve been making some cool stuff.

Anyway, here’s how to make your website look nice.

Pictures

Adding pictures to your website is a really easy way to make it look nice. You could add a picture of your cat. Or a picture of a drawing your sister’s kid did for you, of a website that sells cats.

img

We can add images with HTML. We just need to tell the computer that it’s an image, and tell it where the image is. Super easy. It looks like this:

<img src="cat.jpg">

It look like nonsense now, but what if I told you that there are just some vowels missing? img means image. src means source (that is, where the image is saved on your computer) and .jpg means jumping because the image is of a cat jum… no I’m just making that up now. .jpg is just one of the words that computers call pictures. Yours might be called .png or .jpeg or .gif.

src

The easiest way to add an image is to find one you like on the internet, copy the link and paste it in the src bit. I’m going to use this one:

https://www.bekahmcdonald.com/images/e70.png

This is what the HTML looks like. The bit in bold is the src, which is the link to the image.

<img src="https://www.bekahmcdonald.com/images/e70.png">

alt

There’s one really important bit we’ve forgotten though. We need to add some text that describes the image for people who can’t see it. Some people use technology that reads webpages aloud for them, because they have trouble seeing. We need to give the image some alternative text that could be read out, so the person knows what the picture is of. Like this:

<img alt="A blue and pink stripy cat with an orange face and yellow tail" src="https://www.bekahmcdonald.com/images/e70.png">

As I mentioned, this is the easiest way to add an image, but when we build websites, we might want to use images that we have on our computer. Maybe something we made ourselves.

In an upcoming post, I’ll teach you how to make a whole folder of things into a website! But not yet. First I’m going to teach you about CSS…


Colours

Colours are another way we can make our website look good. It’s really easy to add them too, and you can add as many as you like!

First, let’s decide what colours we want to add. Then let’s find out what the computer calls them.

Remember, computers don’t speak the same language as us. They understand some basic English, like ‘red’ and ‘white’, but they don’t understand ‘Iron Man red’, or ‘Kermit the Frog green’. So for us to explain colours to them, we use codes. One of these codes is called hex values, and they look like this.

Colours for my cat website

There are lots of ways to find out what the hex value is for the colour you want to use, but this is my favourite way.

Once you have the code, we can use it to tell the computer where to put that colour. But first, we need to learn a new language…

CSS

Look at the website you’ve created so far. It has some words, and some pictures, but that’s it! What if you want to make some text bigger? Or bright pink? Or if we want to put some things on the left and some on the right?

That’s where CSS comes in. CSS is the computer language we use to style the website. Let’s use some CSS to add our colours.

If we are writing lots of CSS, we would normally put it in a different file so that it doesn’t get really long and messy, but we aren’t writing much yet so let’s just add it to our index.html file. It has to go in a special place so that the computer knows where to look for it.

style

Inside your index.html, you have a head and a body. The CSS goes inside the head, like this.

<!DOCTYPE html>
<html>
<head>
<title>My website</title>
<style>
body {
background-color: #ffdf00;
}
h1 {
color: #9370db;
}
</style>
</head>
<body>
<h1>Cat website</h1>
<img alt="A blue and pink stripy cat with an orange face and yellow tail" src="https://www.bekahmcdonald.com/images/e70.png">
</body>
</html>

Let’s have a look at what we wrote.

So first we have some new tags — <style> </style>. This tells the computer that we’re going to be writing some CSS and it should pay attention.

Curly braces

Then we have two separate blocks. They both begin with the name of the HTML tag we want to style. If you look at the HTML, it has a body and inside that it has a h1 (which means heading 1, or the biggest heading on my page) and an img which is our cat image.

In the CSS style block, we put the name of the tag we want to style (eg. body), then we use some squiggly brackets (called curly braces, but I prefer squiggly brackets) to tell the computer what styles we want to give that HTML.

CSS properties

Then inside the curly braces, we put the name of a CSS property, and then a value for that property. There are hundreds of CSS properties that you can use and you should definitely have a look at this list of them all.

First we write the name of the property (like background-color), then a colon : then the value (like the colour hex value), and then a semi-colon ; which tells the computer we’ve finished that style.

Make sure you add the semi-colon and colon in the right place! Computers get very stroppy about punctuation…

Applying our styles

The body is the whole webpage. So we are telling the computer that we want our whole webpage to have a background-color of #ffdf00. We spell color wrong because computers think they are American and that’s how Americans spell colour. (That is, they spell it wrong.) Here’s a list of all the possible styles, and how they’re spelled.

The text that says ‘Cat Website’ is in a h1 tag, which means ‘heading 1’, which means ‘the biggest and most important heading on my page’. We want to make this purple.

So, first we tell the computer which tag we want to style, and give it some curly braces where we can write our code.

h1 {}

In between the curly braces, we write the name of the property we want to use, followed by a colon.

Then we write the hex value of the purple, which we wrote down earlier, followed by a semi-colon to tell the computer we’ve finished.

h1 {
color: #9370db;
}

Nearly finished

Let’s look at our work! Check over your code and make sure it matches the example I gave earlier. It’s really easy to accidentally forget a semi-colon or curly brace, which will confuse your computer and your website might not work.

Make sure you’ve saved your work (it should be called index.html ) and then open it like you did before. It should open in your internet browser, but if it doesn’t, just drag the file to your browser icon and drop it. That should work!

And it should look like this!

If it doesn’t, that’s okay. Double check you remembered all your curly braces, colons and semi-colons. Compare your code to my example letter by letter.

This is all part of making websites. We don’t ever stop making mistakes, we just get quicker at fixing them.

Bekah Makes Websites

Front end developer at Taylor/Thomas

Bekah McDonald

Written by

Front End Developer at Taylor / Thomas

Bekah Makes Websites

Front end developer at Taylor/Thomas

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade