CSS Web Page Styling in HTML5 (Practical Exercise)

Document Reference: TN201310002 - Rev: 4.11 - Last Update: 06-07-2017 13:50 GMT - Downloaded: 16-Apr-2024 10:48 GMT

This exercise makes use of the style (`<style>...</style>`) element, often referred to as internal style sheet.

CSS is the abbreviation for cascading style sheet and is the language used to describe the presentation (formating and layout) of a web page.

Practical Exercise Objective

Upon completion of this practical exercise you will be able to:

Understand the purpose of the <style> HTML tag.
Understand the CSS syntax.
Understand the meaning of:
- Rule Set,
- HTML Tag Selector Type,
- Declaration Block,
- Declaration,
- Property Name and
- Property Value.

Task 1: Create a Basic HTML5 Web Page Document

Create a new folder and rename this folder as Internal Style Sheet HTML5. We'll use this folder to save all our files that we will create and/or use for this practical exercise.
Open your standard plain-text editor (Notepad, TextEdit or similar).

Type the code listed below to make use of the basic HTML web page template with a HTML5 Document Type Definition:

 <!DOCTYPE html>
 <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>CSS Exercise: CSS Style Rule Sets in HTML5 Head</title>
 <!-- *******************************************************************
  * *
  * FILE NAME: exercise.htm *
  * FOLDER NAME(s): Internal Style Sheet HTML5 *
  * AUTHOR: Your Name *
  * DATE: Today's Date *
  * *
  * DESCRIPTION: *
  * First Steps: CSS Styling and Layout in HTML5 *
  * *
  ******************************************************************* -->
  </head>
  <body>
  This is my first cascading style sheet exercise in HTML5.
  </body>
 </html>

Save this code as exercise.htm in to your Internal Style Sheet HTML5 folder.
Examine the saved file name to ensure that it was saved with the *.htm extension.

Task 2: Add Style (`<style>...</style>`) Element

A style element allows us to add any number of CSS rule sets to our web page document. These elements start with an opening tag (<style>) and end with a closing tag (</style>). Nested within the head element, a style element must not contain any other HTML elements.

Starting in code line 17, between the HTML comment and the </head> closing tag, insert two new code lines.

Type the opening tag (<style>) into the first new code line and type the closing tag (</style>) into the second new code line. E.g.:

 <!DOCTYPE html>
 <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>CSS Exercise: CSS Style Rule Sets in HTML5 Head</title>
 <!-- *******************************************************************
  * *
  * FILE NAME: exercise.htm *
  * FOLDER NAME(s): Internal Style Sheet HTML5 *
  * AUTHOR: Your Name *
  * DATE: Today's Date *
  * *
  * DESCRIPTION: *
  * First Steps: CSS Styling and Layout in HTML5 *
  * *
  ******************************************************************* -->
  <style>
  </style>
  </head>
  <body>
  This is my first cascading style sheet exercise in HTML5.
  </body>
 </html>

HTML5 requires to specify the style sheet language of the style element's content. To comply, we'll add the type attribute with the value text/css to the <style> opening tag, e.g.:
```
  <style type="text/css">
```

Check and see if your code matches this code example:

 <!DOCTYPE html>
 <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>CSS Exercise: CSS Style Rule Sets in HTML5 Head</title>
 <!-- *******************************************************************
  * *
  * FILE NAME: exercise.htm *
  * FOLDER NAME(s): Internal Style Sheet HTML5 *
  * AUTHOR: Your Name *
  * DATE: Today's Date *
  * *
  * DESCRIPTION: *
  * First Steps: CSS Styling and Layout in HTML5 *
  * *
  ******************************************************************* -->
  <style type="text/css">
  </style>
  </head>
  <body>
  This is my first cascading style sheet exercise in HTML5.
  </body>
 </html>

CSS Syntax

CSS is generally case-insensitive. However, there are some exceptions such as values of the id and class HTML attributes (e.g. <div id="wrapper">). These HTML attributes are not used in this practical exercise.

CSS Rule Set

A CSS rule set consists of one or more selectors and one declaration block. Any number of CSS rule sets can be included in a style element. Each CSS rule set defines one specific style.

Selectors

Selectors allow us to apply the CSS rule set to any HTML element. There are different types of selectors. In this practical exercise, we will use the HTML tag selector type.

Declaration Block

A declaration block contains any number of declarations and starts with one left curly bracket ({) and one right curly bracket (}). Declarations are seperated by a semi-colon (;).

Declaration

A declaration consists of one property name and property value(s). Property name and property value(s) are seperated by a colon (:).

Property Name and Property Value

There are many different properties to style and layout web page content, see the Commonly Used CSS Properties page for commonly used property names and property value examples. Some of the available properties are 'shorthand properties', allowing to specify values of several related properties with a single property.

Task 3: Add CSS Rule Set

We will now create a CSS rule set with two declarations. One declaration will set the colour of the displayed font to blue. The other declaration will set the background colour of our body element to silver.

Any content displayed on a web page document is part of the body element. This allows us to make use of just one CSS rule set to change the font colour and background colour.

Starting in code line 18, between the <style> opening tag and the </style> closing tag, insert four new code lines into the style element. E.g.:
```
  <style type="text/css">
  
  
  
  
  </style>
```
Add the HTML tag selector type body into code line 18, followed by one left curly bracket ({) to start the declaration block. E.g.:
```
  <style type="text/css">
 body {
  
  
  
  </style>
```
Next we add a declaration to set the font colour to blue. Type into code line 19 the property name color, a colon (:), the property value blue and a semi-colon (;) to seperate this declaration from any following declarations. E.g.:
```
  <style type="text/css">
 body {
 color: blue;
  
  
  </style>
```
Note the US style spelling of 'color'.
Now we add a declaration to set background colour to silver. Type into code line 20 the property name background-color, a colon (:) and the property value silver. Although this is the last declaration for this declaration block, it is considered as good practice to complete the last line with a semi-colon (;). E.g.:
```
  <style type="text/css">
 body {
 color: blue;
 background-color: silver;
  
  </style>
```

Type into code line 21 one right curly bracket (}) to complete the declaration block. E.g.:

  <style type="text/css">
 body {
 color: blue;
 background-color: silver;
  }
  </style>

Check and see if your code matches this code example and save your code:

 <!DOCTYPE html>
 <html lang="en">
  <head>
  <meta charset="utf-8">
  <title>CSS Exercise: CSS Style Rule Sets in HTML5 Head</title>
 <!-- *******************************************************************
  * *
  * FILE NAME: exercise.htm *
  * FOLDER NAME(s): Internal Style Sheet HTML5 *
  * AUTHOR: Your Name *
  * DATE: Today's Date *
  * *
  * DESCRIPTION: *
  * First Steps: CSS Styling and Layout in HTML5 *
  * *
  ******************************************************************* -->
  <style type="text/css">
 body {
 color: blue;
 background-color: silver;
  }
  </style>
  </head>
  <body>
  This is my first cascading style sheet exercise in HTML5.
  </body>
 </html>

Open the saved file in a web browser. Observe how the text is displayed in blue color and the complete body background is displayed in silver.

First Steps: CSS Styling in HTML5

This exercise makes use of the style (<style>...</style>) element, often referred to as internal style sheet.