Adding style to an HTML page using CSS

From Sensors in Schools
Revision as of 06:08, 21 December 2021 by EdmondLascaris (talk | contribs)
Jump to navigation Jump to search

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

Retrieved from "http://www.waterwaysinwhittlesea.org/index.php?title=Adding_style_to_an_HTML_page_using_CSS&oldid=366"