Här nedan ser du mallen som är inlagd inom head-taggarna i detta dokument. Observera att det kan bli oavsiktliga radbrytningar i exempelkoden.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Min hemsida</title>
<style type="text/css">
<!--
body { background-color: white; margin-left: 2cm }
h1 { font: 30pt "courier new", geneva, verdana; color: green; text-align: center }
li { font-size: 14pt; color: fuchsia }
A:hover { color: red }
A { text-decoration: none; color: blue }
p { font: 10pt geneva, verdana; color: black }
p.a { font: 10pt geneva, verdana; color: blue }
.stor { font-size: 62pt; color: blue }
select { font: 11pt arial, helvetica; background-color: #FF0000; color: #0000FF }
.text { font: 11pt arial, helvetica; background-color: #FF0000; color: #0000FF }
-->
</style>
</head>
<body>
Här kommer ditt dokument.
</body>
</html>
Dokumentets bakgrundsfärg är angiven till vit samt en 2 cm bred vänstermarginal. Rubriken h1 ska vara 30 pt hög, olika teckensnittsalternativ är angivna, färgen grön samt centrerad. Vanliga stycken ska ha svart text, 10 pt samt har olika teckensnittsälternativ angivits. Blåa länkar samt en *hover*-effekt för Explorer. Här nedan följer en lista med färgade listrader
Detta stycke blir blått! Som du ser i den inbäddade style sheets-mallen finns en klass som skapats för p med blå text, här kallad p.a.
Här har den klassen p.a anropats via
<p class=a>
Stort
Hur jag fixade dessa stora tecken? Jag skapade en klass .stor (se i exempelkoden ovan för den inbäddade style sheets-mallen) som ska ge extra stor text (62pt) samt blå textfärg. Sedan när jag
ville skriva dessa stora tecken skrev jag så här i editorn
<p class=stor>Stort!</p>.
Eftersom det är en klass som inte är bundet till ett visst element skulle jag kunna använda det till exempel att göra en länk med lika stor stil,
<a class=stor href="styltext.html#Exempel">Tillbaka</a>
Dessa två exempel nedan funkar bara i Explorer. Menyboxen är färgad och likaså textruten nedan.
Tillbaka