Style Class

Introduction

The CSS rules for the style sheet are defined in the style sheet's body.
To be able to separate the HTML5 from CSS3 code, a CSS selector is used to clearly indicate the content that will be formatted based on a rule.
The body of a rule within a style sheet is always delimited by the curly braces ({ }).

A dot (.) always precedes declration of a style-class. It helps to define any style which in turn can be applied to HTML5 content. These concepts are shown in detail in the next example.

Any style defined by the author takes precedence over styles defined by the user, and also user over user agent. Styles declared for parent elements are inherited by child elemenet. See for example, the child em inherits from its parent. The rendered code on the browser is viewed as shown below:
===========================================================

List of courses offered online:

HTML5
Javascript
CSS

Here the hyperlink (Online Course) will be shown in color "red" as per the HTML tagg rule.

Online Course

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

The code is here to try out

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

	<html>

		<head>

			<title> CSS3 </title> 

			<style type = "text/css"> 

	
			body 	{font-family: arial, sans-serif;}
			a:hover	{background-color: red; }
			li		{font-weight: bold;}
			h2, em		{font-family: arial, sans-serif; text-decoration: underline;}
			p		{font-family: calibri; sans-serif;
				font-size: 20px;}
			ol		{font-size: 14px;}
	
			</style> 

		</head> 

		<body> 

			<h2> List of Courses offered online are:  </h2> 

			<ol> 

			<li>HTML</li> 

			<li>JavaScript</li> 

			<li>CSS</li> 

			</ol> 

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

			Online Course </a> 

			</p> 

		</body> 

	</html>

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

For more details, please contact me here.