3 – Styling

🎯 Learning Objectives

Developing Programming and Development (learning strand) skills, specifically:

  • Understand that CSS is a model for formatting HTML web pages
  • Understand that CSS organises web contents in “boxes” – the box model
  • Be able to apply CSS box model to an element of a web page
💬 Key Vocabulary
  • Box model
  • Margin
  • Border
  • Padding
  • Content

📖 Styling

Now you have two web pages. They are not much to look at although you can navigate from one page to another. To build a good quality web site, you need to think about a few things carefully:

  • What do you want to be on your web site?
  • What do you want to be on your homepage?
  • What is your target audience?

Are layouts and choice of colours and fonts appropriate for the contents and target audience?

It is a common practice for web designers to sketch some layouts of web pages, then web developers use those designs to write html code.

The following image showing an example of such sketch of layout.

This is the original Twitter concept sketch!

📝 Design It

Sketch your own web page layout design. To do this:

  • You can use pencil and paper
  • You can use Word’s shapes or textboxes
  • You can also use the Paint program

Be sure to annotate the elements of your layout

The following is a sketch of layout for the homepage (index.html) this tutorial will use to make our homepage look nicer. It was created using Paint.

📖 Learn It

Web pages are made of different areas.

  • Some headers to say what the page is about.
  • Some links to take users to different pages.
  • The main area will be the place for the main content for that page.

You can say web pages are made of different shapes and sizes of boxes, and you are absolutely right. In this section, we are going to learn the box model of web design.

All HTML elements can be considered as boxes. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:

  • Margin: Clears an area around the border. The margin does not have a background colour, it is completely transparent.
  • Border: A border that goes around the padding and content.
  • Padding: Clears an area around the content.
  • Content: The content of the box, where text and images appear
  • Size: The size of the box can be defined by width and height in unit of number of pixels.

Follow this link to see how to style an element using this box model.

To give an idea of scale, the following shows a box with the size of 100×100 pixels as displayed in your browser.

📝 Code It

Step 1

There is a video tutorial for this week and next week’s coding to help you along.

Let’s create the layout shown above using the box model. First, we’ll define the top blue box.

  1. Open your index.html file with Sublime Text 3.

We will give the blue box a name, topbox. This will let the web browsers know which part of the webpage we are talking about when we write code for it.

2. Add the following lines just below the <body> tag.

<div id="topbox">
</div>

Your index.html should now look like this:

The <div> tag is for defining a division or section on a web page. In this case, we defined a section or division called “topbox“. Right now there is no information about the size, colour or content about the division yet.

Step 2

We’ll now create the layout using the box model, and style the top box.

We have our top box defined in the index.html file. But if you open the index.html file with a browser, it will not show up. The reason is we have not defined the size and colour of the box yet.

To do this, we need another new tag <style> plus some attributes to tell browsers the size and colour of our top box. Since <style> is not the actual content on the page’s body, we need to add this style information within the <head> tags.

  1. Add the following lines just below the <title> tag. Be careful with the spelling, it uses the US dictionary spelling of ‘color’.
<!DOCTYPE html>
<html>
<head>
<title>My Dog Jack</title>
<style> 
#topbox { 
width: 800px; 
height: 100px;
background-color: blue;
}
</style> 
</head>
<body>
<div id="topbox">
</div>
<p>My dog Jack is a miniature schnauzer. He is 8 months old.</p>
</body>
</html>

Step 3

  1. Create the layout using the box model – and then save the work and refresh your browser to see the changes.
  2. Save your index.html file and then open it with a browser. You should see something like this:

If you don’t see it, double check your index.html file to make sure there are no typos and unclosed tags: (use the following as your guide.)

The following is what you code should look like and what you web page should look like:

Step 4

Let’s now create the layout using the box model and add text to the box.

We now have a blank box with solid colour. Let’s add some text to the box as the heading to our home page. We are going to use a new tag, heading tag to do this.

Before we start, can you work out where we should place this heading text in the following lines?

Only partial code from index.html is shown.

<body>
<div id="topbox">
</div>
<p>My dog Jack is a miniature schnauzer. He is 8 months old.</p>
</body>
</html>

Since we want the heading to be inside the box, we need to put it in between the <div> tags. There are six different heading tags you can use, from <h1>, <h2> to <h6>, each resulting in a different font size with <h1> the biggest and <h6> the smallest.

You might have guessed correctly, we need to add the heading like so (I used h2 here):

Only partial code from index.html is shown.

<body>
<div id="topbox">
<h2>My Dog Jack</h2>
</div>
<p>My dog Jack is a miniature schnauzer. He is 8 months old.</p>
</body>
</html>
  1. After you added the heading to your index.html file, save your index.html file and open it with a browser or refresh your browser if you have it open already to see the effects.
  2. You should see something similar to this:

Step 5

We’ll now create the layout using the box model, adding style to the heading.

Our topbox now contains the heading. The heading text has the default colour black. We need to change the text location and colour to make the topbox of our home page look nicer.

To style the heading text, we need to add some style attributes to the heading tag. In this case the h2 tag.

  1. To style the h2 heading, add the following lines of code within the <style> tag. Be careful with the spelling, it uses the US dictionary spelling of ‘color’.
h2 { 
color: yellow; 
text-align: center; 
}

2. Save your index.html file and open it with a browser or refresh your browser if you have it open already to see the effects.

Note that two attributes are used to define the style of <h2>.

  • color: yellow; is the syntax for defining the heading text colour as yellow.
  • text-align: center; is the syntax for defining where the heading text should be placed inside the topbox.

You can also use text-align: right; if you want the heading text to be placed on the right-hand side part of the topbox.

If you don’t get the result right, here are some tips for debugging:

  • Check there are no spelling mistakes for attribute names and attribute values.
  • Check US dictionary spelling is used for the word color
  • Check there are no missing : , ; , or {, or } symbols.

Your page should now look similar to this…

📖 Keywords – Definitions

Box model: A box that wraps around every HTML element. It consists of: margins, borders, padding, and the actual content.

Margin: Clears an area around the border. The margin does not have a background colour, it is completely transparent.

Border: A border that goes around the padding and content.

Padding: Clears an area around the content.

Content: The content of the box, where text and images appear

💬 Summary

In this lesson, you…
  • Understand that CSS is a model for formatting HTML web pages
  • Understand that CSS organises web contents in “boxes” – the box model
  • Be able to apply CSS box model to an element of a web page
In the next lesson, you will…
  • Further develop understanding that CSS organises web contents in “boxes” – the box model
  • Be able to apply CSS box model to multiple elements of a web page and group boxes in a specific way to represent data in a specific way.

🏅 Badge it

learning strand: Programming and Development

  • Complete the tasks for this lesson. Save your work.
  • In lesson two you used the trust system to rate your own progress. Lets see how you are getting on.
  • If you find there are things you still cannot do, this will be the good chance to catch up by asking your teacher or re-read the instructions.
🥈 Silver Badge
  • You have created the topbox.
🥇 Gold Badge
  • You have added the text to the topbox.
🥉 Platinum Badge
  • You have changed the colour of the text and centre-aligned the text within the topbox.

When you are ready, click here to assess your progress.