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.