Adding style to an HTML page using CSS - Revision history

EdmondLascaris: /* linking to another HTML page */

2021-12-21T06:40:56Z

linking to another HTML page

← Older revision		Revision as of 06:40, 21 December 2021
Line 162:		Line 162:
	[[File:Screen Shot 2021-12-21 at 5.28.11 pm.png]]		[[File:Screen Shot 2021-12-21 at 5.28.11 pm.png]]

	== ~~linking~~ to another HTML page ==		== Linking to another HTML page ==
	* One of the most powerful features of web pages is the ability to link to other web pages.		* 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.		* Creating links to other web pages allows people to find information more easily by making information resources more accessible.

EdmondLascaris at 06:40, 21 December 2021

2021-12-21T06:40:16Z

@@ Line 113: / Line 113: @@
 * An explanation of some of the style elements follows:
-** margin – the space created around element (containers) in a web page
+** '''margin''' – the space created around element (containers) in a web page
-background-color – is the background colour of the page
+** '''background-color''' – is the background colour of the page
-color – is the text colour
+** '''color''' – is the text colour
-border – will be the features of a border around the page (2 pixels wide and solid black)
+** '''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
+** '''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.
+* Save this file, then go back to the Browser and reload the file so see the changes.

EdmondLascaris at 06:16, 21 December 2021

2021-12-21T06:16:20Z

@@ Line 17: / Line 17: @@
 * 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'''.
@@ Line 76: / Line 75: @@
 === 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.
-<link rel=”stylesheet” type=”text/css” href=”mystyles.css” />
+* The other tag we need to add is the '''div tag'''.
-Here is a brief explanation of these elements:
+* '''div''' is short for division.
-link – link tag defines a relationship between the current document (HTML) and an external resource.
+* A div tag creates a division or section within the HTML document where specific styling can be applied.
-rel – short for relationship. I this case we want to establish a persistent relationship with an external stylesheet
+* In this example the div tag includes h1 and paragraph tags and the associated content.
-type – is for media type of the linked document. Here it is text based.
+* We also give the div tag a special id attribute – called an identifier with the name “maindiv”.
-href – is a location pointer (href = Hypertext REFerence). In this case href points to a local file called mystyles.css
+* We can use any unique name, we just chose the name “maindiv”.

EdmondLascaris at 06:08, 21 December 2021

2021-12-21T06:08:02Z

← Older revision		Revision as of 06:08, 21 December 2021
Line 51:		Line 51:

	[[File:Screen Shot 2021-12-21 at 8.43.59 am.png]]		[[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.


			<link rel=”stylesheet” type=”text/css” href=”mystyles.css” />
			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

EdmondLascaris at 21:44, 20 December 2021

2021-12-20T21:44:29Z

← Older revision		Revision as of 21:44, 20 December 2021
Line 41:		Line 41:

	[[File:Screen Shot 2021-12-21 at 8.37.51 am.png]]		[[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]]

EdmondLascaris at 21:41, 20 December 2021

2021-12-20T21:41:34Z

← Older revision		Revision as of 21:41, 20 December 2021
Line 14:		Line 14:
	* Learn how to link to and create multiple HTML pages		* Learn how to link to and create multiple HTML pages

	== ~~creating~~ an HTML document ready for styling ===		== 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.		* In this example we will create a HTML page that contains some additional elements in preparation for an external style sheet.

EdmondLascaris at 21:38, 20 December 2021

2021-12-20T21:38:22Z

@@ Line 14: / Line 14: @@
 * Learn how to link to and create multiple HTML pages
-== creating an HTML document ready for styling
+== 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.
+* In this example we will create a HTML page that contains some additional elements in preparation for an external style sheet.
-. Create a HTML page with example content
-Navigate to the techschool directory using the File Manager.
+=== Create a HTML page with example content ===
-Right mouse button click and select New Folder.
+* Navigate to the techschool directory using the '''File Manager'''.

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

2021-12-20T20:09:24Z

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

New page

== 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.
1. Create a HTML page with example content
Navigate to the techschool directory using the File Manager.
Right mouse button click and select New Folder.