Adding style to an HTML page using CSS

From Sensors in Schools
Revision as of 20:09, 20 December 2021 by EdmondLascaris (talk | contribs) (Created page with "== 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 contr...")
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
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. 1. Create a HTML page with example content Navigate to the techschool directory using the File Manager. Right mouse button click and select New Folder.