More CSS coding

Overview

The overall aim of this lesson series is to create a Dashboard so that we can monitor the water quality of a local lake – Peter Hopper lake in Mill Park.
In this lesson we will continue developing a Cascading Style Sheet (CSS) by referring to W3Schools.com tutorials and start developing some python code that will collect sensor data.

Now that we have create some simple HTML pages and Hyperlinks its a good idea to add some interesting styles to our web site.
In this example we will create a style sheet in a separate file named mystyles.css

Navigate back to Geany.
From the top menu bar, click on the 'Create a new file button.
Navigate to the peter-hopper-t3 directory and create a new file named mystyles.css

Enter the following code in mystyles.css
In this example we are adding styles for the background colour of the web page and text colour.
Save your changes.
To explore other interesting styles just Google W3Schools CSS styles

Now add some extra lines of code to the index.html file.
The additional code in the link tag tells the Browser where to find the style sheet mystyles.css
The div id=”maindiv” tells the Browser where in the HTML document to apply specific styles.
Don’t forget the closing div tag.
Save your changes.

We will add a few additional CSS Properties to the existing mystyles.css file.
Update your code using the example below, then Save your file.
In this example:
- border-radius – is termed the CSS Property
- 20 px; - is the value associated with the CSS Property (px is short for Pixels)

To view these changes first open the Raspberry Pi File Manager.
Navigate to the peter-hopper-t3 directory.
The right mouse button click on the index.html file and select Chromium Web Browser.

You can use the Chromium Web Browser on the Raspberry Pi to search for CSS Properties and Values.
Using the search engine Duck Duck Go enter w3schools border-radius in the search bar.
Select the first response generated by the search engine.

W3Schools will provide a simple description of the CSS Property border-radius and give some code examples that you can copy.
Viewing W3Schools using the Raspberry Pi Browser will also show fewer advertisements!
In addition, you can also click on the Try it Yourself button and experiment with some code through the W3Schools Web portal.
This is a great way to learn about each CSS Property.

Using the example below, update your CSS file to include CSS Properties for font-family, text-align and font-size.
Save the changes then view the result in your Browser.
Don’t forget to click Reload this Page.

The following W3Schools link provides a good description of the font-family Property

In our font-family code example only one font was specified.
Normally the font-family property can hold several names as a “fallback” system to provide redundancy.
If a Browser does not support the first font, it will use the second.
If a font name is made up of multiple words, then it must be quoted – e.g. “Times New Roman”

When coding in HTML we learned about the Anchor tag - a in HTML and how it is used to create a Hyperlink to other pages.
The anchoring from one page to another is achieved by the attribute href – short for hypertext reference.
The Anchor tag text changes colour based on certain situations, such as unvisited, clicked and visited https://www.w3schools.in/html-tutorial/anchor/
We can apply different styles of the Anchor Tag in our CSS file to change some of the default settings for Anchor Tag links
Make the following edits to your CSS code.
Ensure there are no spaces in a:link and a:visited
a:link represents a CSS psudo-class. A pseudo-class lets you apply a style to an element.
In this case the Anchor Tag