Section 2 - Basics
Section 4 - Advanced
Fancy Lists
Forms
Advanced Tables
Frames
Style Sheets
Background
Text, Dimension
Border
Padding, list
Classification
Positioning
Misc.
Multiple CSS
You try it
Image Maps
Section 5 - Publishing
Section 6 - Extras
Appendices
Idea: Use Cascading Style Sheets on your site.
Here's How: This is an example of a document which uses CSS. In order to see it in all its glory, you need to download chkbx.gif.
| <html> <head> <title> Style on a Page </title> <STYLE TYPE="text/css"> h1 {color: #00ff00} h2 {color: #dda0dd} p.box {border-style: dotted; border-color: red #0000ff; margin-left: 2cm} ul.cute {list-style-type:circle; list-style-position:inside; list-style-image:url('chkbx.gif')} div.pic {float:right; width:120px; margin:0 0 15px 20px; padding:15px; border:1px solid black; text-align:center;} h1.shadow {position: absolute; top: 150px; left: 200px; color: #666666} h1.text {position: absolute; top: 153px; left: 203px; color: #00ff00} a.cool:link {color: #000066; text-decoration: none} a.cool:visited {color: #000066; text-decoration: none} a.cool:hover {color: #660033; text-decoration: line-through; background: #ccccff} a.cool:active {color: #660033; text-decoration: line-through; background: #ccccff} </STYLE> </head> <body> <h1 class="shadow"> Important! </h1> <h1 class="text"> Important! </h1> <h2> This page could save your life. </h2> If you are ever faced with a deadly hamster attack, the following items may be of use to you: <ul class="cute" > <li> Stay inside if at all possible </li> <li> Try not to smell like a hamster </li> <li> Set out hamster traps </li> </ul> Above all, please remember <h1> DON'T PANIC </h1> Be aware that these creatures are frightening. The following image gives a good idea as to the size of the threat. <a href="http://www.webhamster.com/" class="cool"> Follow this link! </a> </body> </html> |
Now it's your turn. Add style sheets to make your pages easier to format and beautify.
This page relied heavily on W3schools.com
|
|
|