The Style Element

Previous page...

So far you have seen the style Attribute applied to HTML Elements such as, <body>, <p>, <h1>, <b> etc.

There is also a style Element - <style>...</style>, which is placed in the Attribute applied to HTML head section of the HTML document and takes control of the presentation of the web page. The commands are the same as are used in the Style Attribute, which is known as inline style.

The following is an example of the style Element being applied to the whole of the document.

The HTML

<html>
<head>
	<title>The Style Element</title>
	
<style>

P	{
	color: Blue;
	font-family: fantasy;
	font-size: 12pt;		
}

H1	{
	color: Green;
	font-family: serif;
	font-size: 20pt;
	font-weight: bolder;
}

B	{
	color: red;
	font-family: sans-serif;
	font-size: 16pt;
	font-weight: bold;
}

EM	{
	color: Purple;
	font-family: cursive;
	font-size: 12pt;
	font-weight: lighter;
	font-variant : small-caps;
	letter-spacing : 10pt;
}

I	{
	color: Navy;
	font-family: cursive;
	font-size: 12pt;
	font-weight: normal;
}

</style>
	
</head>

<body>

<h1>The Style Element</h1>
	
<p>The Style Element can be included in the head section of the
HTML document and is applied to the whole of the document.

<p>It is a tidier way of applying style to the HTML document
than using In-line style via the style attribute.

<p>Any elements, such as
 <b>b - BOLD</b>,
 <i>i - ITALIC</i> and
 <em>em - EMPHASIS</em>,
 which have their style declared by the style element will adopt
 those styles for the whole of the document, unless they are overriden
 by an in-line style command.	

</body>
</html>

For a more detailed tutorial on using STYLE click here...