Styling Web Pages with CSS

Learning Goals

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

• Download a CSS file from the Internet.
• Link CSS stylesheet files to HTML web pages.
• Update the style rules in a CSS file and view the effect on a linked web page.

You can view finished versions of the four sample web pages you style with four sample CSS files in this Tutorial by clicking the links below. The finished samples will each open in a new tab of your web browser.

page-1.html

page-2.html

page-3.html

page-4.html

The common CSS properties

In the previous Introduction to CSS tutorial you were introduced the CSS properties most commonly used by web designers to format the content of web pages.

In this Tutorial you will apply these CSS properties to the four web pages you created in the Introduction to HTML Tutorial.

Downloading your four CSS files

Your first task is to download four stylesheet files, one for each of your four sample HTML pages. Here are the steps.

1. In Google Chrome or Mozilla Firefox Developer Edition, click the following web address:   https://2n2l.com/it4women/exercises/final-styling-css/before/style-1.css.   This first stylesheet file will open in a new tab of your web browser.
2. Right-click anywhere in the browser window, and from the context menu, choose Save as... (Chrome) or Save Page As... (Firefox).
3. Save the style-1.css stylesheet file in your websites folder.
4. Repeat the above steps for the following three other stylesheet files.   https://2n2l.com/it4women/exercises/final-styling-css/before/style-2.css.   https://2n2l.com/it4women/exercises/final-styling-css/before/style-3.css.   https://2n2l.com/it4women/exercises/final-styling-css/before/style-4.css.
5. Check that your websites folder contains the four sample HTML files from the Introduction to HTML Tutorial and the four downloaded CSS files.

In the remainder of this Tutorial you will work with these four CSS files along with the four corresponding HTML web page files.

Styling your first sample web page

You will use the style-1.css stylesheet file to style the sample page-1.html web page.

1. In Visual Studio Code, open the page-1.html file.
2. Before you can apply styles from a stylesheet to a web page, you first need to link the stylesheet flle to that page.   VS Code provides the following shortcut to help you do this.   In the head section of the page-1.html file, at the end of the description details, click with the mouse and press the Enter key to open a new, blank line. Click at the beginning of this new line, press the letter l key to display a pop-up menu with the link:css option already selected.
3. Click this link:css option with the mouse, or press either the Enter key to select it.   VS Code adds the stylesheet link code to your web page.
4. As you can see, VS Code gives the default name of style.css to the linked stylesheet file.   Edit the default name to style-1.css.  
   DO NOT type the name of stylesheet file with an upper-case ‘S’ as in Style-1.css.
   And DO NOT use some other mixture of upper and lower-case letters, such as STYLE-1.CSS or style-1.CSS or whatever.
   Also, DO NOT enter any blank spaces in the name of your file: type style-1.css NOT style- 1.css or style -1.css.
   The head section of your web page should now look as shown below.
5. Save your page-1.html file.

Your page-1.html web page is now linked to your style-1.css stylesheet file.

In your web browser, display the page-1.html web page.

It should look like the web page at the following web address:

page-1.html (before CSS style updates).

You can close your page-1.html web page in VS Code.

Format of the HTML link code

Note that the link from a web page to a stylesheet has two parts: a ref part and a href part.

• Sometimes you will see the rel part written first, and then the href part.
• Other times, you will see the href part placed before the rel part.

Either is allowed.

So, this is correct HTML code:

<link rel="stylesheet" href="dark-theme-style.css">  

And so too is this.

<link href="dark-theme-style.css" rel="stylesheet">  

Updating the CSS style rules: sample page one

Let’s update the linked style-1.css stylesheet file and see the effect on your web page.

1. In VS Code, open the style-1.css file.
2. For the h1 selector, inside the curly braces, copy-and-paste these extra new style rules:

      text-align: center;
      font-weight: normal;
      letter-spacing: -2px;
      margin-top: 0;
      margin-bottom: 32px;
   

   Your h1 selector and its six style rules should now look as shown below.
3. For the p selector, inside the curly braces, copy-and-paste these extra new style rules:

      font-family: sans-serif;
      line-height: 1.6;
      margin-top: 0;
   

   Your p selector and its four style rules should now look as shown below.
4. Save your style-1.css stylesheet file.

Display your page-1.html web page in your web browser.

It should now look like the web page at the following web address:

page-1.html (after CSS style updates).

You can now close your style-1.css file in VS Code.

Styling your second sample web page

Next, you will apply the style-2.css stylesheet file to the sample page-2.html web page.

1. In VS Code, open the page-2.html file.
2. In the <head> of your web page, just before the closing </head> tag, press the Enter key to open a new, blank line, and then copy-and-paste the following stylesheet link to this new line.

      <link rel="stylesheet" href="style-2.css"> 
   

   The <head> section of your web page should now look as shown below.
3. Save your page-2.html file.

Your page-2.html web page is now linked to your style-2.css stylesheet file.

In your web browser, display the page-2.html web page.

It should look like the web page at the following web address:

page-2.html (before CSS style updates).

You can close your page-2.html web page in VS Code.

Updating the CSS style rules: sample page two

Let’s update the linked style-2.css stylesheet file and see the effect on your web page.

1. In VS Code, open the style-2.css file.
2. For the h1 selector, inside the curly braces, copy-and-paste these extra new style rules:

      text-align: center;
      letter-spacing: 4px;
      font-family: sans-serif;
   

   Your h1 selector and its six style rules should now look as shown below.
3. For the h2 selector, inside the curly braces, copy-and-paste these extra new style rules:

      font-family: sans-serif;
      text-align: center;
      line-height: 1.4;
      text-transform: uppercase;
      font-weight: normal;
   

   Your h2 selector and its seven style rules should now look as shown below.
4. For the p selector, inside the curly braces, copy-and-paste this extra new style rule:

      line-height: 1.6;
   

   Your p selector and its three style rules should now look as shown below.
5. Save your style-2.css stylesheet file.

Display your page-2.html web page in your web browser.

It should now look like the web page at the following web address:

page-2.html (after CSS style updates).

You can close your style-2.css file in VS Code.

Styling your third sample web page

Next, you will apply the style-3.css stylesheet file to the sample page-3.html web page.

1. In VS Code, open the page-3.html file.
2. In the <head> of your web page, just before the closing </head> tag, press the Enter key to open a new, blank line, and then copy-and-paste the following stylesheet link to this new line.

      <link rel="stylesheet" href="style-3.css"> 
   

   The <head> of your web page should now look as shown below.
3. Save your page-3.html file.

Your page-3.html web page is now linked to your style-3.css stylesheet file.

In your web browser, display the page-3.html web page.

It should look like the web page at the following web address:

page-3.html (before CSS style updates).

You can close your page-3.html web page in VS Code.

Updating the CSS style rules: sample page three

Let’s update the linked style-3.css stylesheet file and see the effect on your web page.

1. In VS Code, open the style-3.css file.
2. For the h1 selector, inside the curly braces, copy-and-paste these extra new style rules:

      text-align: center;
      font-weight: normal;
      letter-spacing: 4px;
   

   Your h1 selector and its five style rules should now look as shown below.
3. For the h2 selector, inside the curly braces, copy-and-paste this extra new style rule:

      text-transform: uppercase;
   

   Your h2 selector and its four style rules should now look as shown below.
4. For the p selector, inside the curly braces, copy-and-paste these extra new style rules:

      font-family: sans-serif;
      line-height: 1.6;
   

   Your p selector and its four style rules should now look as shown below.
5. Save your style-3.css stylesheet file.

Display your page-3.html web page in your web browser.

It should now look like the web page at the following web address:

page-3.html (after CSS style updates).

You can close your style-3.css file in VS Code.

Styling your fourth sample web page

Next, you will apply the style-4.css stylesheet file to the sample page-4.html web page.

1. In VS Code, open the page-4.html file.
2. In the <head> of your web page, just before the closing </head> tag, press the Enter key to open a new, blank line, and then copy-and-paste the following stylesheet link to this new line.

      <link rel="stylesheet" href="style-4.css"> 
   

   The <head> of your web page should now look as shown below.
3. Save your page-4.html file.

Your page-4.html web page is now linked to your style-4.css stylesheet file.

In your web browser, display the page-4.html web page.

It should look like the web page at the following web address:

page-4.html (before CSS style updates).

You can close your page-4.html web page in VS Code.

Updating the CSS style rules: sample page four

Let’s update the linked style-4.css stylesheet file and see the effect on your web page.

1. In VS Code, open the style-4.css file.
2. For this web page, the task is to display all the headings, sub-headings and paragraphs of text with a font-family of sans-serif.   You could add the following style rule to each one of the CSS selectors:

      font-family: sans-serif;
   

   But because all the styles on the web page are to have the same font-family value, a quicker option is to add just one new rule to the body selector at top of the stylesheet file.

      body { font-family: sans-serif; }  
   

3. Save your style-4.css stylesheet file.

Display your page-4.html web page in your web browser.

It should now look like the web page at the following web address:

page-4.html (after CSS style updates).

You can now close your style-4.css file in VS Code.