View source for 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'''.

[[File:Screen Shot 2021-12-21 at 8.23.49 am.png]]

* Name the folder '''botanica-park-lake'''

[[File:Screen Shot 2021-12-21 at 8.27.07 am.png]]

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

[[File:Screen Shot 2021-12-21 at 8.27.58 am.png]]

* Open '''Geany''' from the Raspberry Pi main drop-down menu Programming selection.
* Select '''Create a new file'''

[[File:Screen Shot 2021-12-21 at 8.35.56 am.png]]

* Navigate to the '''/home/pi/techschool/botanica-park-lake''' directory.
* Enter the file name '''index.html''' and press Enter.

[[File:Screen Shot 2021-12-21 at 8.37.51 am.png]]

* You will end up with a blank file named index.html shown in the page tab.

[[File:Screen Shot 2021-12-21 at 8.42.17 am.png]]

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

[[File:Screen Shot 2021-12-21 at 8.43.59 am.png]]

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

[[File:Screen Shot 2021-12-21 at 5.00.26 pm.png]]

* You should see the following display when the Browser opens.

[[File:Screen Shot 2021-12-21 at 5.01.19 pm.png]]

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

‎<syntaxhighlight lang="html" line>
<link rel=”stylesheet” type=”text/css” href=”mystyles.css” />
‎</syntaxhighlight>

* 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

[[File:Screen Shot 2021-12-21 at 5.11.02 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.13.15 pm.png]]

=== 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'''

[[File:Screen Shot 2021-12-21 at 5.14.58 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.16.04 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.20.35 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.22.01 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.22.52 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.23.50 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.24.47 pm.png]]

=== 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:

‎<syntaxhighlight lang="html" line>
<body style=”background-color:grey” >
‎</syntaxhighlight>

[[File:Screen Shot 2021-12-21 at 5.26.49 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.28.11 pm.png]]

== 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:

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

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.

[[File:Screen Shot 2021-12-21 at 5.30.01 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.31.31 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.33.12 pm.png]]

* 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'''.

[[File:Screen Shot 2021-12-21 at 5.34.37 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.36.29 pm.png]]

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

‎<syntaxhighlight lang="html" line>
<img src=rainbow-lorikeet.jpg alt=”Rainbow Lorikeet” width=”100%” />
‎</syntaxhighlight>

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

[[File:Screen Shot 2021-12-21 at 5.38.38 pm.png]]

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

[[File:Screen Shot 2021-12-21 at 5.39.43 pm.png]]