Linking Styles to Documents

There are various ways that style sheets may influence an HTML document.

Using the 'LINK' element to link an external style sheet.

<HEAD>	<Title>Introduction to Style Sheets</Title>
	<LINK	rel	=  STYLESHEET
		href	= "http://www.domainname.com/stylesheet.css"
		Type	= "text/css"	>
</HEAD>

Style information can be stored in an external file and referenced by any number of Web pages. To use an external style sheet, create a file with your style definitions, save it with a .CSS file extension, and link to it from your Web page. You can use the same style sheet for any number of pages on your site.

Placing a 'STYLE' element inside the 'HEAD' element.

To embed a style sheet, you add a <STYLE> </STYLE> block at the top of your document, in the <HEAD> element. This allows you to change the appearance of a single Web page. The <STYLE> tag has one parameter, TYPE, which specifies the Internet Media type as "text/css".

The <STYLE> tag is followed by any number of style definitions and terminated with the </STYLE> tag. Older browsers will ignore the <STYLE> element, but its content will be treated as part of the document body, and rendered as such. <STYLE> element content may be hidden using SGML comments:

<Style Type	= "text/css">
<!--
	BODY	{	background:	#ffff99;	}
	H1	{	color:		#33ff33;	}
	P	{	color:		#330000;
			font-family:	Garamond, serif;
		}
-->
</Style>

Using a 'STYLE' attribute on an element inside 'BODY'.

Inline style definitions affect individual occurrences of a tag. These are embedded within the tag itself using the STYLE attribute. The following HTML code colors a specific <P> tag:

<P STYLE="color: red">
This line will be red.
<P>
This line will not be red.

Result:

This line will be red.

This line will not be red.

If the inline style conflicts with an embedded or linked style, the inline style overrides for that particular occurrence. For example, if the line above appears on a Web page that defines <P> to be green through a linked style sheet, all paragraphs will be green except for the <P> above, which will be red.

css linking styles