|
A. Style code placed directly into the HEAD and BODY of your HTML page is a good test for starting out. There is a better way in the second section.
1. Copy and paste this code directly onto a HTML page, strip out the spaces around the HTML Tags (I added spaces so it doesn't convert to code), and run it.: |
< HTML >
< HEAD > < TITLE > < /TITLE >
< STYLE >
BODY { background-color: white; font-size: 12pt; font-weight: normal; }
H2 { color: navy; text-align: center; font-size: 24pt; }
.title { color: black; background: silver; font-weight: bold; }
.exc { font-size: 10pt; color: black; background: silver; }
.rd { color: red; font-weight: bold; font-size: small; }
A:link { color: navy; font-weight: bold; }
< /STYLE >
< /HEAD >
< BODY >
< CENTER >
< H2 >TITLE USING THE H2 STYLE< /H2 >
This is the sample using the < SPAN CLASS=title >.title style< /SPAN >.< p >
This is a sample using the < SPAN CLASS=exc >.exc style< /SPAN > . This is a sample using the < SPAN CLASS=rd >rd style< /SPAN >.< p >
And finally, this is a sample using the < a href="../index.html" >link style< /a >. < p >
< /BODY >
< /HTML > |
| 2. This is what it looks like when you copy the code, strip out the spaces, and run it: |
TITLE USING THE H2 STYLE
This is the sample using the .title style.
This is a sample using the .exc style. This is a sample using the rd style.
And finally, this is a sample using the link style. |
NOTE: If your background color does not show correctly, then take it out of the style, and in your BODY add BGCOLOR="white".
B. Stylesheets called from a separate page are almost always the preferred method because when you make a change to the Style, you never have to go to the HTML pages and edit the code!
1. Put this in a plain text file, like Notepad: |
BODY { background-color: white; font-size: 12pt; font-weight: normal; }
H2 { color: navy; text-align: center; font-size: 24pt; }
.title { color: black; background: silver; font-weight: bold; }
.rd { color: red; font-weight: bold; font-size: small; }
A:link { color: black; font-weight: bold; }
A:visited { color: gray; font-weight: bold; }
A:active { color: yellow; font-weight: bold; } |
|
2. Save it on your drive as stylewhite.css. Upload it to your site.
3. Then, open up a new HTML page and copy this (stripping out spaces between < and > brackets). It's the same HTML as above, except instead of STYLE, we have a META link: |
< HTML >
< HEAD >< TITLE >< /TITLE >
< META http-equiv="Content-Style-Type" content="text/css" >
< LINK type="text/css" rel="stylesheet" href="stylewhite.css" >
< /HEAD >
< BODY >
< CENTER >
< H2 >TITLE USING THE H2 STYLE< /H2 >
This is the sample using the < SPAN CLASS=title >.title style< /SPAN >.< p >
This is a sample using the < SPAN CLASS=exc >.exc style< /SPAN > . This is a sample using the < SPAN CLASS=rd >rd style< /SPAN >.< p >
And finally, this is a sample using the < a href="../index.html" >link style< /a >. < p >
< /BODY >
< /HTML >
|
| 4. Run it. You will find that you get exactly the same result as you got from putting the Style information on the same page. However, you can now change the Style file "stylewhite.css", and all pages that call the file will have their styles changed. It's just that simple. Please try it, and let me know what you think. I am 100% positive that you will never code a HTML page again without it!
|