Adding style to an HTML page using CSS

From Sensors in Schools
Revision as of 21:41, 20 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.

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