Adding style to an HTML page using CSS

Overview

• HTML is good for basic web page formatting, however, to make web pages look professional you need to add some styling.
• With styling elements, we can control the colour, font size and spacing between elements on a web page, and much more.
• Style elements can be incorporated in HTML documents in three different ways:
  • Inline – by using the style attribute inside HTML elements
  • Internal – by using the style tags within the head section of the HTML document
  • External – by using a link tag to point to an external CSS file
• If you want to find more information on HTML and CSS, then check out W3Schools.com

Learning Objectives

• Learn how to add styles to HTML pages using an external Cascading Style Sheet (CSS)
• Learn how to add styles to HTML document using inline style elements
• Learn how to link to and create multiple HTML pages

Creating an HTML document ready for styling

• In this example we will create a HTML page that contains some additional elements in preparation for an external style sheet.

Create a HTML page with example content

• Navigate to the techschool directory using the File Manager.
• Right mouse button click and select New Folder.

• Name the folder botanica-park-lake

• You should see the new name for the folder appear.
• This is where we will start creating our new web site with multiple HTML pages.

• Open Geany from the Raspberry Pi main drop-down menu Programming selection.
• Select Create a new file

• Navigate to the /home/pi/techschool/botanica-park-lake directory.
• Enter the file name index.html and press Enter.

• You will end up with a blank file named index.html shown in the page tab.

• Write the following code using the example below.
• The code contains simple HTML tags for formatting such as header tags and paragraph tags.
• Save the file by clicking on the Save the current file button, or by using the File drop down menu and selecting Save.

• Switch to the File Manager on the Raspberry Pi.
• Find the file index.html and right mouse button click on the file.
• Select Chromium Web Browser.
• This will open up the index.html file in the Raspberry Pi Browser.

• You should see the following display when the Browser opens.

Styling HTML pages using external style elements

• In the following example we are going to prepare an HTML document that can accept styles from an external CSS file.
• We normally use an external CSS file because we can use a single CSS file to format multiple HTML pages.
• It also reduces the amount of style related coding in the HTML page.
• Later, we will also experiment with an inline style element within the body tag of the HTML file.

• To use an external style sheet we need to add a link tag to the head section of the HTML file.
• We also need add a div tag to our HTML document.
• The div tag helps to separate the HTML content into different sections or divisions.
• Separate styling rules can then be applied to each section.

Adding a link to an external CSS file

• Navigate to the index.html file in Geany.
• In the head section add the following link tag and elements.

<link rel=”stylesheet” type=”text/css” href=”mystyles.css” /> Here is a brief explanation of these elements: link – link tag defines a relationship between the current document (HTML) and an external resource. rel – short for relationship. I this case we want to establish a persistent relationship with an external stylesheet type – is for media type of the linked document. Here it is text based. href – is a location pointer (href = Hypertext REFerence). In this case href points to a local file called mystyles.css