Style Rules
Embedding a Style sheets
External Style Sheets
Importing a Style sheets
Styles Inline
Class
ID
SPAN and DIV
Quick Reference Table
HTML Tutorial
Databases and ASP
    


Embedding a Style Sheets

There are various ways of linking these style rules to your HTML documents, but the simplest method for starting out is to use HTML's STYLE element. This element is placed in the document HEAD, and it contains the style rules for the page.
Create a basic HTML page in a text editor and add some style sheets in the document head.

<HTML>
<HEAD>
<TITLE>Embedding style sheets</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { color: red; font-family: verdana; font-size: 20pt }
P { font-family: arial; font-size: 10pt; color: blue }
-->
</STYLE>
</HEAD>
<BODY>
<H1>Web developer's library</H1>
<P>Stylesheets can save a lot of work!</P>
</BODY>
</HTML>

Click here to see the result ..... Impressed!

Note:
The TYPE="text/css" attribute specifies the MIME type and the comment tag is also important since some old browsers will not recognize STYLE element, would normally show its contents as if they were part of the BODY, thus making the style sheets visible to the user. To prevent this, the contents of the STYLE element should be contained within a comment tag. You could also put a comment tag for your own reference within the style sheets code eg:

P { font-family: arial; font-size: 10pt; color: blue } /*This will be used for the index page*/