Example of External CSS linked to HTML

Introduction

Web developers usually create external style sheets containing CSS rules that are totally separated from the HTML5 document.
This a modular approach (also known as skinning) wherein if there is a need to change the CSS file, there is no need to make any changes on the HTML5.
Pseudoclasses allow web developers to access to content that has not been declared.
The hover pseudoclass is activated when the mouse cursor is over a specific part of the page. An exampe of an external CSS file is shown here:

	/* Style sheets */ 

	/* external style sheet */ 

		body {font-family: arial, sans-serif;}
		a:hover	{text-decoration: underline; }
		li	{font-weight: bolder;}
		h2, em	{font-family: arial, sans-serif; text-decoration: underline;}
		p	{font-family: calibri; sans-serif;
			 font-size: large;}
		ol	{font-size: larger;}

Now, let's see how an external link get established within an HTML5 page. A keyword link element is used, in addition to the attribute.

List of courses offered online:

HTML5
Javascript
CSS

Here the hyperlink (Online Course) is shown underline as per the CSS (no need to click on the hyperlink).

Online Course

The way it is done when writing the code, the programmer needs to have two links: (1)HTML file and (2) CSS file containing formating details. For example, in your page, your will have these 2 links: < href="..\HTML Pages\External style sheets2.html"> rel </a>
< href="..\Style Sheets\External style sheets2.css"> the external style sheet </a>

===========================================================
Here is the code of the HTML file:
===========================================================

		<html> 

		<head> 

		<title> Linking to an eternal CSS document </title> 

			<link rel="stylesheet" type = "text/css" href="..\Style Sheets/External style sheet.css"> 

		</head> 

		<body> 

			<h2>List of courses offered online:</h2> 

			<ol> 

				<li> HTML5 </li> 

				<li> Javascript </li> 

				<li> CSS </li> 

			</ol> 

	
		<p> <a class="hover" href ="http="http://www.google.com"> 

		Online Course </a> 

		</p> 

		</body> 

		</html>

===================================================================

The code for the CSS is already listed above.

For more details, please contact me here.