Styling HTML with CSS

Learning Goals

At the end of this Lesson you will be able to:

Link a web page (HTML file) to a stylesheet (CSS file).
In a text editor, save an existing web page with a new name.
Create a new, blank stylesheet with your text editor.
Reset default web browser styles in a stylesheet.
Add a comment in a stylesheet.
Create heading and paragraph styles in a stylesheet.

You can view a finished version of this exercise by clicking the image below.

Your two work files: base-1.html and base-1.css

In this Lesson you will work with these two files:

The web page named base-1.html. This is a copy of the base-0.html file from the previous Lesson.
The stylesheet named base-1.css. This will be a new file you will create with your text editor.

First, let’s edit the HTML file from your previous Lesson:

In your text editor, open the file named base-0.html.
Use the File | Save As command to save your base-0.html file with this new name: base-1.html You can now make changes to this new base-1.html file without affecting the base-0.html file from your previous exercise.
In the <head> of your new base-1.html file, change the title as follows:
```
<title>Web page with desktop-only styles</title>
```

Also in the <head>, change the description as follows:

<meta name="description" content="A sample web page with desktop-only styles in a linked stylesheet.">

Finally, in the <head>, add the following new line. This will link your web page (HTML file) to your stylesheet (CSS file).
```
<link rel="stylesheet" href="base-1.css">  
```
Typically, this line is added after the author line. In Visual Studio Code, you can use the following shortcut to add a link from an HTML file to a CSS stylesheet.
- On a new. blank line, press the letter l key to display a pop-up menu with the link:css option already selected.
- Click this option with the mouse, or press either the Enter or Tab key.
- The link code is added to your HTML file.
- Edit the CSS file name of style.css, as required.
- Sometimes the link to a stylesheet is written with the rel part first, and then the href part. Other times, you will see the href part placed before the rel part. Either is allowed. For example, the following two lines, although written differently, have exactly the same effect.
- You are now finished making changes to your HTML file. Save the file with the File | Save command. Or press the Ctrl key (Windows) or Command ⌘ key (Apple) and press the s (for Save) key.

Next, we will create a new, empty CSS file.

In your text editor, choose the File | New command.
Choose the File | Save As command, and save your new, empty file with this name in the websites folder: base-1.css

You are now ready to work with your new web page (base-1.html) and stylesheet (base-1.css).

Resetting default web browser styles

In the previous Lesson, you added some markup to the text of your HTML file. When you saved your file and displayed it in a web browser, you could see the text styled with headings and paragraphs.

Where did these styles come from?

The answer is that these are default styles created by the web browser.

To create and apply your own styles to a web page, you need to follow these steps:

Create a CSS file (stylesheet).
At the top of the CSS file, reset (‘zero’) the built-in default styles of the web browser.
In the remainder of the CSS file, create your own styles for headings, paragraphs and so on.
And, in the <head> of your web page, add a link to your CSS file. You have already completed this step above.

Let’s begin by resetting the web browser default styles. After you do this, the only styles that will be applied to your web page will be the ones you create yourself.

At the top of your empty CSS file named base-1.css, paste the following two lines:
```
/* ==== BROWSER RESETS  ==== */
* { padding: 0; margin: 0; border: 0; font-weight: normal; font-size: 16px }  
```
The first line is simply a comment to remind you of the purpose of this part of the stylesheet file. The second line contains the actual style resets.
Save your CSS file.
Display your web page base-1.html file in a web browser. It should look as shown below. As you can see, all the styles have been removed.

Adding styles to your CSS file

Let’s begin by adding styles for the three levels of heading (h1, h2 and h3) to your CSS file.

Under the browser resets section of your CSS file, copy-and-paste the following three styles.

/* ==== HEADINGS ==== */
h1 {
   font-family: serif;
   font-weight: bold;
   font-size: 40px;
   line-height: 1.3;
   letter-spacing: -1px;
   margin-top: 20px;
   margin-bottom: 32px;
}

h2 {
   font-family: serif;
   font-weight: bold;
   font-size: 32px;
   line-height: 1.3;
   margin-top: 40px;
   margin-bottom: 12px;
}

h3 {
   font-family: serif;
   font-weight: bold;
   font-size: 28px;
   line-height: 1.3;
   margin-top: 32px;
   margin-bottom: 6px;
}

Next, copy-and-paste the following style for text paragraphs into your CSS file.

/* ==== PARAGRAPHS ==== */
p {
   font-family: sans-serif;
   font-weight: normal;
   font-size: 16px;
   line-height: 1.6;
   margin-bottom: 12px;
}

Save your CSS file.
Reload your web page in your web browser. It should now look as shown below.

Setting the web page width

By default, web browsers add a small amount of ‘white space’ at the left and right of the web browser window. You can see this in the base-0.html web page you created in an earlier Lesson.

In your current base-1.html file, however, you have removed all the default web browser styling by including web browser resets at the top of the base-1.css stylesheet. You therefore need to add some left and right ‘white space’ to the stylesheet.

As you can see from the four examples below, modern websites with a single column of text and images typically have generous left and right margins when displayed on desktop/laptop screens.

Let’s add some ‘white space’ at the left and right of your web page.

In the CSS file, under the browser resets section, add the following.

/* ==== PAGE WIDTH ==== */
body {
   padding-left: 20%;
   padding-right: 20%
}

Save your CSS file.
Reload your web page in your web browser. It should now look as shown below.

You added 20% of white space to the left and right of the web page content. The width of the single column of content is now 60% of the total screen width.

The structure of a CSS file

Some CSS files are only 30-50 lines long. Others may have as many as 50,000 lines. In every case, they all have a similar structure.

All CSS files consist of so-called selectors. Each has a selector name (such as h1 or p). They begin with an opening curly brace ( { ) and end with a closing curly brace ( } ).

A selector and its two braces is known as a declaration block.

CSS selectors

You use a selector in a CSS file to ‘target’ elements in a linked web page. For example:

In the simplest case:

The h3 selector in a CSS file will apply its styles to all h3 elements in a linked web page. It does not matter whether there is one or several h3 headings in the web page, all will be styled by the same h3 selector in the CSS file.
Similarly, all text paragraphs in a web page will be styled by the p selector in the linked CSS file.

CSS properties and values

Inside every CSS declaration is at least one style rule that consists of two parts: a property and a value. Below you can see two sample rules, each on a line of its own. The font-weight and font-size are the properties, and normal and 16px are the values.

   font-weight: normal;
   font-size: 16px;

Every property must be separated from its associated value by a colon (:) character.

As you can see from the example below, it makes no sense to enter a property on its own without a value.

 /* Any particular value? 16px maybe? Or perhaps 64px */
 h2 {
    font-size
 }

Conversely, a value entered on its own without a property also makes no sense. As the following example makes clear.

 /* Size of what? Font? Bottom margin? Left margin? */
 h2 {
    24px
 }

Rules must be separated from one another by a semi-colon character (;). Otherwise, the web browser cannot tell when one rule ends and the next rule begins.

As for the last rule before a closing curly brace, you can follow it with a semi-colon. But it is unnecessary. The following two examples have exactly the same effect.

   font-weight: normal;
   font-size: 16px;
}

   font-weight: normal;
   font-size: 16px
}

When a selector contains just one, two or three rules, it is often typed on a single line. See the example below.

p {
   font-family: sans-serif; font-size: 16px; margin-bottom: 12px
}

Indentation guides

Both Visual Studio and Sublime Text display vertical lines called indentation guides to help you visually organise blocks of indented text.

Indented text is text that is ‘pushed’ in from the left margin, either by pressing the Spacebar or the Tab key.

Here are the steps to following when creating a new style in a CSS file:

Type the selector (such h1, h2 or whatever) directly against the left margin, and follow it with a single space and then type an opening curly brace. Your text-editor will automatically follow the opening curly brace you typed with a closing curly brace.
Press the Enter key a few times to create some blank lines.
Now, type the various CSS property and value rules. In each case, indent the rule from the left margin by pressing the Tab key.

Indentation guides can also help you identify errors such as missing (or extra) opening or closing curly braces. In the example below, you can see that the opening and closing curly braces line up correctly.

In the two examples below, the first is missing a closing curly brace, while the second has two closing braces.

About text paragraph styles

Let’s examine the various style values for paragraphs of text in your CSS file – font-family, font-size, font-weight, line-height and margin-bottom.

font-family

The two basic values for font-family are serif and sans-serif. Serif fonts have small lines or ‘squiggles’ at the ends of their characters. ‘Sans’ is French for ‘without’. Sans-serif fonts do not have these features on their characters.

For printed documents – books, newspapers, magazines and so on – serif fonts are generally used for long paragraphs of text. This is because the serifs help the human eye to recognise whole words rather than sequences of individual letters. For headings and short blocks of text, either serif or sans-serif fonts are equally appropriate choices.

In web pages, however, there is no evidence that paragraphs of text are more readable in serif fonts. So you will see fonts of either the serif or sans-serif family used for various elements of web pages.

   font-family: sans-serif;

font-size

The ‘standard’ font-size of text displayed by web browsers is 16 pixels (px). For mobile phone screens, web designers often reduce this to 15px or even 14px. Smaller values can be difficult for users to read.

   font-size: 16px;

Below you can see three examples of font-sizes for text paragraphs. All are shown for a 360 pixels-wide mobile phone screen. This is the width of the Apple iPhone 6, the HTC One and the Samsung Galaxy Nexus.

font-weight

The two basic values of font-weight are normal and bold. Typically, text paragraphs are set to normal weight and headings are set to bold.

   font-weight: normal;

line-height

This controls the spacing between lines of text with the same style. For text paragraphs on desktop screens, the most readable values of line-height are in the range from 1.4 to 1.7. On mobile phone screens, the inter-line spacing may be set to slightly smaller values.

   line-height: 1.6;

margin-bottom

The margin-bottom sets the vertical spacing that follows a particular style. For paragraphs of text, a typical value would be in the range 12px to 18px.

   margin-bottom: 12px;

Below is a visual guide to the heading and paragraph styles you have created in your CSS file.

Comparison with Microsoft Word

If you are familiar with Microsoft Word, you would recreate these CSS values for the text paragraphs in your web page using the dialog boxes displayed with the Font and Paragraph commands.

In the example of the Microsoft Word Font dialog box below, the CSS equivalents would be:

The font-family is set to the sans-serif value of Arial.
The font-weight is set to normal.
The font-size is set to 16px.

And in the example of the Microsoft Word Paragraph dialog box below, the CSS equivalents would be:

The margin-top, margin-left and margin-right are all set to 0.
The margin-bottom is set to 12px.
The line-height is set to 1.6.

CSS and the text-align property

In its Paragraph dialog box, you can see that Microsoft Word offers four values for the Alignment setting: Left, Centered, Right and Justified.

In CSS, the equivalent alignment values are:

   text-align: left;
   text-align: center;
   text-align: right;
   text-align: justify /* Not recommended */;

Below are examples of the left, center and right values of the text-align property in CSS.

The justify value for text-align is not recommended because web browsers do not distribute spacing between characters and word proportionally.

About heading styles

In a typical CSS file, there are a number of differences between styles for text paragraphs and those for headings:

font-size: The text in any heading is typically larger text in paragraphs. By default, most web browsers set h1 headings at 40px, h2 headings at 32px and h3 headings at 28px.
font-weight: Headings are usually in bold weight.
margin-top: Headings have a vertical spacing above them in addition to spacing under them (margin-bottom).

Updating the <head> of your web page

Before you validate your web page and upload it to GitHub, ensure the following details are correct within the <head> of your base-1.html file.

You have replaced the name ‘Mary Smith’ with your own name.
You have replaced the sample Google Tracking ID with your own Google Tracking ID. The instructions for viewing your website’s unique Google Tracking ID are here.

Validating your web page

To check the HTML in your web page is correct or valid, use the official W3C Markup Validation Service as follows.

Go to this web page: https://validator.w3.org.
Click the Validate by Direct Input tab.
Select your entire HTML file (both <head> and <body>), and copy-and-paste it into the box named Enter the Markup to validate.
Click the Check button.
If you see any errors, return to your base-1.html file in your text editor, fix the errors, save the file, and copy-and-paste the entire file again. In the HTML Validator, click the Back button of your web browser to again display the Validate by Direct Input tab. Click once in the tab and paste in your corrected HTML file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Validating your stylesheet

To check your CSS is correct, use the official W3C CSS Validation Service. Follow these steps.

Go to this web page: https://jigsaw.w3.org/css-validator.
Click the By direct input tab.
Copy and paste your CSS file into the box named Enter the CSS you would like validated.
Click the Check button.
If you see any errors, return to your base-1.css file in your text editor, fix the errors, save the file, and copy the entire file again. In the CSS Validator, click the Back button of your web browser to again display the By direct input tab. Click once in the tab and paste in your corrected CSS file. Your new, pasted-in file will replace the earlier version. Finally, click the Check button.

Uploading your two files to GitHub

After validating your web page and stylesheet, you are now ready to upload them to your account on GitHub.

Sign in to your account at GitHub.com. At the left of the screen, you can see a list of your repositories.
On your GitHub home page, click the name of the repository that holds your web pages. Its name will look as follows, where username is your chosen username on GitHub. username.github.io
On the next screen displayed, near the centre of the screen, click the Upload files button.
Select or drag-and-drop the two files base-1.html and base-1.css to upload them to your GitHub account.
After uploading your files, scroll down to the bottom of the screen, enter a short message in the Commit changes box and click the Commit changes button.

Your web page is now published on GitHub at a web address similar to the following, where username is the username you have chosen for your GitHub account:

https://username.github.io/base-1.html

It may take a few minutes for your uploaded files to appear on GitHub.

Contents >