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.

Adding a cascading style sheet (CSS)

• 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

Creating a style sheet in a separate file

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

• Return to the index.html file in your Browser and Refresh your page.
• You should see all your new styles take effect. Congratulations!
• Don’t forget to explore W3Schools.

Adding a new CSS Property

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

• When the web browser opens you should see the updated page below.
• Note that the edges of the page have rounded edges.

Using W3Schools tutorials as a guide

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

• In this example the value assigned to border-radius is 25px.
• Click on the Run button to see the results.

• Now change the border-radius value to 1px and click Run to see the changes.