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.

• 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.

Adding more styles to the external CSS file

• We can add more style elements to the mystyles.css file.
• Make the following additions to mystyles.css
  • font-family, font-size, text-align – are all font related attributes
  • padding – creates space around the text content (within the container/border). This has the effect of adding some buffer space between the border and the text.

• You can go to the Browser and reload the file to see the effect.

• In the mystyles.css file set the page to half the size of the screen with the code width:50%;

• In the browser, this will reduce the width of the content within the div element (container).

Styling html pages using inline style elements

• In the following example we will add inline style elements within the HTML body tag.
• These changes are made to the index.html file in Geany.
• Modify the body tag to the following:

‎

<body style=”background-color:grey” >
‎

• Save the index.html file and see the changes in the Browser.
• You should see that the background-color of the web page body is now grey.
• Note that background-color of the div container is still darkblue.

Linking to another HTML page

• One of the most powerful features of web pages is the ability to link to other web pages.
• Creating links to other web pages allows people to find information more easily by making information resources more accessible.
• To create links to other web documents we need to the anchor tag, which defines a hyperlink.
• The most important attribute in the anchor tag element is the href (hypertext reference) attribute which points to the link destination.

• In the index.html file, change the last paragraph tag to the following:

‎

<p><a href=”birds.html”>What bird is this?</a></p>
‎

The addition of the anchor tag has added a link to a new page named birds.html Clicking on the text What bird is this? will activate the link.

• If we look at these changes in the Browser we see that the text “What bird is this?” now appears in a different colour and the mouse pointer responds to the text as if it were a hyperlink.
• Clicking on the hyperlink will generate an error because we haven’t created the birds.html file.
• The What bird is this? hyperlink is difficult to see against the darkblue background.
• We will fix this later.

Create a birds.html file

• In Geany, click on the Create a new file button.
• Save the untitled file in the botanica-park-lake directory as birds.html
• Go to the index.html file and copy all the code and paste it in the birds.html file
• Modify the text within the body tags so that it looks like the following example.

• In the Browser you can now click on the What bird is this? link and it should take you to the birds.html file.
• If the link doesn’t work, make sure that the birds.html link and file are named the same, and that the index.html file and birds.html file are in the same directory.

Adding an image to birds.html

• In the File Manager, navigate to the techschool directory.
• Copy the rainbow-lorikeet.jpg file and past it in the ~/techschool/botanica-park-lake directory
• If you don’t have an image, go to Pixabay.com and search for Rainbow Lorikeet and download the smallest image resolution.

• Go to the birds.html file in Geany.
• Add the following code after the h2 header tag:

‎

<img src=rainbow-lorikeet.jpg alt=”Rainbow Lorikeet” width=”100%” />
‎

• The img tag accepts the following attributes:
  • src – the name of the image file and path or location. In this case it is in the same directory as birds.html
  • alt – alternative text that will display in case the image cannot be shown.
  • width – occupy 50% of the container width.

• In the Browser you should be able to see the image of the rainbow lorikeets.
• Navigation is currently limited, but to go back to the index.html page just click on the Back button in the Browser.
• Congratulations! You’ve created your first linked multi-page web site. Just follow the examples in this lesson to create more pages and content.