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.

Updating Font and Text CSS Properties

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

• Use the W3Schools web site to test different values for each CSS Property.

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

https://www.w3schools.com/Css/css_font.asp

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

Styling the Anchor tag

• 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

• The result is shown below.

Choosing colours using different color values

• In the examples previously shows colour values were chosen using simple words.
• Typical examples for colours include: white, red, green, purple.
• Computers can display millions of different colours by mixing different ratios of Red, Green and Blue.
• In the example below form W3Schools three different color values are used.
• In the last example the color value is expressed in rgb format which is short for (red, green, blue).
• Try each of these examples and see what effect it has on your web page.

• In this last example the a:link color is red and the a:visited color is orange.

• Congratulations on exploring the wonderful world of CSS!