Adding style to an HTML page using CSS

From Sensors in Schools
Revision as of 06:16, 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.
  • 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

  • The other tag we need to add is the div tag.
  • div is short for division.
  • A div tag creates a division or section within the HTML document where specific styling can be applied.
  • In this example the div tag includes h1 and paragraph tags and the associated content.
  • We also give the div tag a special id attribute – called an identifier with the name “maindiv”.
  • We can use any unique name, we just chose the name “maindiv”.
  • Each id attribute within a single HTML document must be unique.
  • We can’t use the same identifer name elsewhere in the document.
  • If you go back to the Browser and reload the page you won’t see any differences because we haven’t created the external CSS file yet.

Creating an external CSS file

  • Go back to Geany.
  • Create a New File and save it in the botanica-park-lake directory with the name mystyles.css

  • Add the following lines of code to the mystyles.css file as shown in the example below.

  • An explanation of some of the style elements follows:
    • margin – the space created around element (containers) in a web page

background-color – is the background colour of the page color – is the text colour border – will be the features of a border around the page (2 pixels wide and solid black) border-radius – is the roundness of the edges of the border Save this file, then go back to the Browser and reload the file so see the changes. You should see that the page is now dark blue, the text is white and the border edges are rounded.

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