|
|
 |
 |
| |
| Where to out your stylesheet in <HTML> |
Simple explanation of how to use a Stylesheet
|
| Media-type : |
|
| screen | for presentation on non-paged color computer screens (default) |
| aural | for speech synthesizers |
| projection | for projected presentations |
| braille | for presentation on braille tactile feedback devices |
| print | for output to a printer |
| embossed | for paged braille printers |
| tty | for character cell displays using a fixed-pitch font |
| tv | for televisions |
| handheld | for handheld devices (small screen, like pda's, celphones) |
| all | for all output devices |
Examples HTML :
|
| <LINK rel="stylesheet" href="style.css" type="text/css" media="screen"> |
| <LINK rel="stylesheet" href="style.css" type="text/css" media="screen, embossed"> |
| <LINK rel="stylesheet" href="other.css" type="text/css" media="handheld"> |
| <LINK rel="stylesheet" href="tv.css" type="text/css" media="tv"> |
| <LINK rel="stylesheet" href="aural.css" type="text/css media="aural"> |
| <LINK rel="stylesheet" href="yourstyle.css" type="text/css" media="print, handheld"> |
Examples XTML strict :
|
| <link rel="stylesheet" href="style.css" type="text/css" media="screen" /> |
| <link rel="stylesheet" href="style.css" type="text/css" media="screen, embossed" /> |
| <link rel="stylesheet" href="other.css" type="text/css" media="handheld" /> |
| <link rel="stylesheet" href="tv.css" type="text/css" media="tv" /> |
| <link rel="stylesheet" href="aural.css" type="text/css media="aural" /> |
| <link rel="stylesheet" href="yourstyle.css" type="text/css" media="print, handheld" /> |
| Where to put it : |
|
| | <html> |
| | <head> |
 |
<LINK rel="stylesheet" href="whatever.css" type="text/css" media="screen"> |
| | </head> |
| | <body> |
| | The content of your page... |
| | </body> |
| | </html> |
| Note : |
|
| | - Media type names are case-insensitive. |
| | - Some browsers (IE3 for Windows 95/NT4) may not support |
| | background images or colors from linked style sheets |
| | -> A:hover { COLOR: #AA55FF } |
| Attribute |
Property |
Explanation |
| A: | * | this is the name for a link |
| HOVER | * | as it says, when your mouse moves over (hovers) it, it will use it's given attributes |
| TEXT-DECORATION: | none; | not underlined |
| BACKGROUND-COLOR: | #d5e7f4; | this is the color of this background |
| FONT-WEIGHT: | bold; | the font will be bold |
| FONT-FAMILY: | Arial, Helvetica; | sets the font family |
| FONT-SIZE: | 95%; | sets the font size |
| FONT-COLOR: | #0000B7; | sets the font color |
| PRE | * | Preformatted, the text displayed will look the same as it is typed in the html file |
Example stylesheet
| Note : |
|
| | You can make your own class by simply adding a dot in front of it (.whatever) in the stylesheet file, |
| | then this class can be used in a html file like this:
|
| | <font class="whatever"> this text has a whatever class </font> |
| | When you define your class in the html file, the dot is excluded, |
| | but so necessary in the stylesheet file. |
|
|
|
|
 |
 |
|
|
