More CSS coding - Revision history

EdmondLascaris: /* Styling the Anchor tag */

2021-12-30T20:12:12Z

Styling the Anchor tag

@@ Line 107: / Line 107: @@
 * 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.
+* '''a:link''' represents a '''CSS psudo-class'''. A pseudo-class lets you apply a style to an element. In this case the Anchor Tag
 [[File:Screen Shot 2021-12-31 at 6.57.14 am.png]]
 * The result is shown below.

EdmondLascaris: /* Styling the Anchor tag */

2021-12-30T20:07:18Z

Styling the Anchor tag

← Older revision		Revision as of 20:07, 30 December 2021
Line 103:		Line 103:
	* 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.		* 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 '''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'''.		* The Anchor tag text '''changes colour''' based on certain situations, such as '''unvisited, clicked and visited''' https://www.w3schools.in/html-tutorial/anchor/
	* 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		* 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.		* Make the following edits to your CSS code.

EdmondLascaris: /* Using W3Schools tutorials as a guide */

2021-12-30T19:57:57Z

Using W3Schools tutorials as a guide

← Older revision		Revision as of 19:57, 30 December 2021
Line 79:		Line 79:

	[[File:Screen Shot 2021-12-31 at 6.44.56 am.png]]		[[File:Screen Shot 2021-12-31 at 6.44.56 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.51.04 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.52.04 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.53.40 am.png]]

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

			[[File:Screen Shot 2021-12-31 at 6.57.14 am.png]]

			* The result is shown below.

EdmondLascaris: /* Using W3Schools tutorials as a guide */

2021-12-30T19:45:27Z

Using W3Schools tutorials as a guide

@@ Line 59: / Line 59: @@
 === 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.
+* Using the search engine '''Duck Duck Go''' enter '''w3schools border-radius''' in the search bar.
 * Select the first response generated by the search engine.

EdmondLascaris: Created page with "== 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 g..."

2021-12-30T19:40:15Z

Created page with "== 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 g..."

New page

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

[[File:Screen Shot 2021-12-31 at 6.23.10 am.png]]

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

[[File:Screen Shot 2021-12-31 at 6.27.35 am.png]]

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

[[File:Screen Shot 2021-12-31 at 6.29.10 am.png]]

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

[[File:Screen Shot 2021-12-31 at 6.30.09 am.png]]

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

[[File:Screen Shot 2021-12-31 at 6.36.52 am.png]]

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

[[File:Screen Shot 2021-12-31 at 6.38.17 am.png]]

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

[[File:Screen Shot 2021-12-31 at 6.39.20 am.png]]

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