How to build a nicer web page with HTML and CSS

ยท

11 min read

We have learned how to build a plain web page, in this tutorial, we are going to learn how to make it look nicer with CSS (Cascading Style Sheets).

What does CSS do?

You might think HTML is just a harder way to write a Word document. It is true, whatever you do on a plain HTML page, you can probably achieve the same thing with Word. So what's the point? CSS is the point. With CSS, we can make the "Word document" pretty. Check out this website to see what kind of magic you can do with CSS.

Take this website for example, it looks nice, right?

Let's see what the HTML page without CSS looks like. In the browser menu, select Javascript Console.

Now copy the code below.

document.querySelector("head").remove();

Paste it in the console and hit "Enter". What this code does is remove CSS from the web page.

See? It's just an ugly "Word document".

What is CSS

Now that we see the magic of CSS, we might ask what is it exactly?

CSS is the language that we use to style a web page. HTML is a language, CSS is another language, and together they make nice web pages.

Check out this W3School explanation of CSS.

How to write CSS with our HTML page

Before anything, we should already have a very simple index.html there so we can see the changes after adding CSS. If you don't, create something like this.

Create CSS file

Next to the index.html file, create a new file named index.css.

Hit "Enter" and now you have an empty CSS file.

Create some styles

Copy the code below and paste it into the CSS file.

body {
  background-color: pink;
}

What this code does is find the body element, and give the element a background colour of pink.

If you refresh the page now, you won't see a pink background on the page.

Why???

Because we have to let the HTML code know that it must use the styles coming from the CSS code.

How???

Copy the code below.

<link rel="stylesheet" href="index.css" />

Paste it to index.html right after <title></title> element.

The <link /> element is telling the HTML code to find the CSS file named index.css and use it as stylesheet. And now you should see our web page with pink background.

Important concepts of CSS

Now we have linked the CSS file to the HTML file, we will learn how to write CSS exactly.

CSS Syntax

Let's have a look at the CSS we created earlier.

body {
  background-color: pink;
}

Selector

The body here is to tell the browser, we want to give body element some styles, and it will affect everything inside body element, in our case - the whole page including the header and the context. The body here is called a selector, which we use to select an element on the page to style.

Declaration block

Then, we put a {} after the selector body to say, in between the curly brackets are the styles I want to apply to body, otherwise how does the browser know where the styles end if we have more styles for other elements on the page? The curly brackets are the boundary of the declaration block.

Declaration, property and value

And in between the {}, we can add multiple styles and each of them is called a declaration. Each declaration is a property-value pair. In our example, background-color is a property, it says we want to change the background colour of the body element. And pink is the value here, meaning we want to give this property background-color a value pink, so we want to make the background of the body element pink.

This whole block [selector] { [property]: [value]} is called a CSS rule.

A CSS rule consists of a selector and a declaration block.

Lastly, in one CSS file, we can have as many CSS rules as we like so we can style every single element on the web page, and in each CSS rule, we can have as many declarations as we like, so we can style every aspect of each element.

Here is the W3School explanation of CSS syntax.

CSS Selectors

Name selector

Let's talk about CSS selectors a little more as it's very important. What we did before is a name selector, which is to select an element by its name directly, like body, h1 or p, etc. This is useful when we want to style all the h1 or all the p in the HTML code, because the browser will try to find all the elements named h1 or p and apply the styles to them.

For example here, we have h2 { color: aquamarine }, it will find all three h2s on the page and make the colour aquamarine.

Id selector

But what if we only want all three headers to be different colours? We can use id selectors in this case. The id here is just like the id we use to check in at the airport or to go into a bar, it's unique for everyone. In the same way, we can give a unique id to our HTML elements and in our CSS, we can tell the browser to find the element by the id.

Originally our HTML elements look like this. remember all the elements has an opening tag <xxx> and a closing tag </xxx> and in between two tags, we have the text that we want to show on the page like this.

<h2>Make friends</h2>

How do we give this element an id?

Inside the opening tag <xxx>, we can add a space and make it look like this <xxx >, and then we add id="make_friends" after the space but before the closing > like this.

<h2 id="make_friends">Make friends</h2>

So now make_friends will be the id of this h2 element.

Very important note, you have to have the id in between the two quotes "", the quotes are the boundary of the name you give to the id, otherwise browser won't know where should the name end. And you cannot have spaces inside the name so you have to connect each word with - or _.

Wrong id=make_friends

Wrong id="make friends"

Correct id="make_friends"

Correct id="make-friends"

Now in our CSS file, we can add a CSS rule using the id selector. And the way we use id selectors is a little different than the name selector, as we have to let the browser know that we want to use an id selector instead of a name selector. Unlike name selector h2, we have to add a # before the id for id selector, so it looks like this #make_friends. So when the browser sees the #, it will understand it needs to find an element whose id is make_friends instead of the name.

#make_friends {
  color: aquamarine;
}

And we can see on the web page, only the header "Make friends" is aquamarine colour now.

Class selector

Id selectors are useful in some cases but imagine if we want to make the whole first section aquamarine colour, including both the header "make friends" and the context "As much as it's about coding...", we have to add another id for the p element and write down exactly the same style in the CSS file again, and then if one day we want to change the colour to blue, we have to change it in two places. It's too much work and coders are lazy. So there is a better way to do this, class selectors. Class selectors allow you to give one or multiple HTML elements one class name and then apply styles to all the elements with the class attribute.

The difference between id selectors and class selectors is, each element has to have a unique id, but multiple elements can have the same class name.

So instead of doing id="xxx", we do class="xxx" like this.

<h2 class="section_one">Make friends</h2>
<p class="section_one">As much as it's about coding... </p>

In CSS file, we specify it's a class selector by adding a . instead of # like this.

.section_one {
  color: aquamarine;
}

Now, we can have the whole section in one aquamarine colour.

What's even better about class selectors is that we can even give one element multiple class names. And we can do so like this.

<h2 class="section_one header">Make friends</h2>

Inside the class attribute, we can put in all the names we want to give to the element and separate them by spaces, as many as we like.

class="section_one header another_class one_more"

And this comes in handy when we want to give all the headers the same styles and then each section has different styles.

Class selectors are the most versatile and we will be using them most of the time.

Here is the W3School explanation of CSS selectors.

Exercise:

In the webpage example we have been using, we want to update the styles:

  1. each section has a different colour, section one aquamarine, section two blueviolet and section three bisque.

  2. all the headers have a background colour of black.

So it should look like this in the end.

A follow-along exercise to familiarise yourself with more CSS styles

In this exercise, we will style the page we created last time to make it look nicer. If you don't have this index.html file, I would recommend you write it again as an exercise.

Firstly let's start with finding some nice colours to put on the page. I usually go to coolors.co to find a palette that's easy in my eyes. And I found this one. The code inside each colour block is the colour code of the colour that we can use as a CSS value.

Okay now I will make the background dark green and do a few things to make the page look nicer.

body {
  background-color: #264653;
  font-family: Arial, Helvetica, sans-serif;
  padding: 24px;
  color: white;
}

So I changed the background colour. To use the colour code in CSS, you go click on the colour block and click to copy the colour code and then have to add a # before it, so like #264653. font-family is for the font, literally. And padding is for spacing for the four sides inside body element.

If you want to find out how each style property works, just google something like css font-family or css padding, you will find everything you need to know, and W3School is usually a good source that you can trust.

Now I want the first section (both header and context) to have a different background colour than the rest of the page. I can give the header and the context a class and then give the style to the class, but it ends up looking like this. There is a gap between the header and the context.

We don't want the gap, it doesn't look good. What can we do? Now if you remember in the previous post we talked about every HTML element is like a container, can we have a container that contains both the header and the context in section one? Yes! we can do something like this.

    <div class="section_one">
      <h2>Make friends</h2>
      <p>
        As much as it's about coding, our workshop is also about bringing people together. And we believe when people come together and share some experience, magic can happen.
      </p>
    </div>

A div element that contains h2 and p element, and now it looks like what we want.

Let's do the same for the other two sections.

What else can we do to make it look better? Can we give them more spacing in each section around the text? Can we make the corners of each section rounded? Yes, let's try it on section one first.

Yes that looks better, now how do we do the same for the other two sections? do we copy line 10 and 11 and paste them into the styles for the other two sections? That's too much duplication, and remember coders are lazy, if one day we have to come back and change something, we don't want to have to change them in three different places.

So what we can do here is to give the three sections the same class and we can add the CSS rule for all elements with that class. Something like this.

Let's add a greenish line below each header so it looks more classy.

So we give all the headers a class header and we add border-bottom rule for the class.

But the lines are too long, can we make it as long as the header goes but not beyond?

Yes we can use the display property. It's nicely explained here so I won't go into it too much but just show you how it will fix our lines.

With a few steps, you have just made a nice-looking web page. Nice work! Check out the source code here.

Exercise:

Now go creative and make yourself a personal website. Check out some examples here for inspiration ๐Ÿ˜Š

Try out more CSS styles in W3School

  1. Opacity

  2. Shadows

  3. Backgrounds

  4. More

ย