Det finnes tre forskjellige metoder for å definere style elementer på en nettside. Vi har tidligere sett på hvordan man kan inkluderer style som en parameter til et hvilket som helst HTML-flagg, men det finnes flere metoder.
Inline CSS
Denne metoden er den mest innlysende. Inline CSS defineres for hvert enkelt HTML-flagg ved hjelp av style= parameteren. De vanligste stedene å benytte seg av inline CSS er med [p]-flagget og med [a]-flagget.
<p style="background-color: grey; font-weight: bold; font-size: 16pt; margin-left: 1in; margin-right: 1in; border: 3px dashed; padding: 4px;">
Velkommen til min hjemmeside. Klikk for å se <a href="bilder.html" style="color: blue; background: yellow">bilder fra sommerferien min</a>.
</p>
Koden overfor definerer at avsnittet skal ha grå bakgunnsfarge, fet 16 punkters tekst, høyre og venstre marg på 1 tomme, en stiplet ramme med tykkelse på 3 punkter og 4 punkters mellomrom mellom rammen og teksten i avsnittet. I tillegg vil hyperkoblingen ha blå tekst med gul bakgrunnsfage:
Velkommen til min hjemmeside. Klikk for å se bilder fra sommerferien min.
Intern CSS
Problemet med inline CSS er at style attributtene må defineres for hvert flagg det skal benyttes i. Dette kan bli en nøysommelig jobb når innholdet på siden vokser og man ønsker å endre på formateringene. Det er her interne CSS definisjoner kommer inn i bildet. Interne CSS blir definert av det spesielle HTML-flagget [style]. [style] er et lukket flagg og plasseres mellom HTML dokumentets [head] og [/head]-flagg. Definisjonene i [style]-flagget gjelder for hele dokumentet. Ved hjelp av [style]-flagget er det mulig å omdefinere utseendet på eksisterende HTML-flagg, samtidig som det er mulig å definere egne klasser av eksisterende HTML-flagg.
<head>
<title>Min CSS hjemmeside</title>
<style type="text/css">
p
{
background-color: black;
color: #ccc;
}
a
{
color: red
}
p.spesiell
{
background-color: red;
color: blue:
border: 1px solid;
}
.overskrift
{
font-weight: bold;
text-decoration: undeline;
}
</style>
</head>
Første linje gir alle avsnitt en svart bakgrunnsfarge og grå tekst dersom det ikke defineres annerledes i avsnittet, mens andre linje gir alle koblinger en rød farge. De to neste linjene definerer CSS klasser. p.spesiell sier at alle avsnitts flagg i klassen spesiell skal ha rød bakgrunnsfarge, blå tekst og en enkel 1 punkters bred ramme. Siste linje formaterer samtlige flagg i klassen overskrift med fet og understreket tekst.
Du kan enkelt fortelle et HTML flagg hvilken klasse den tilhører ved hjelp av parameteren class. For å inkludere et paragraf flagg i klassen overskrift, benytter du følgende HTML kode:
Class parameteren vil bli gjennomgått nærmere i kapittel 2.3.
Ekstern CSS
Eksterne CSS definisjoner benyttes på samme måte som interne CSS definisjoner. Forskjellen er at de plasseres i en egen fil. Dersom du ønsker å benytte samme CSS definisjoner for en hel nettside lønner det seg å plassere definisjonene i en egen fil og deretter koble hvert enkelt HTML dokument opp mot CSS filen. For å fortelle et HTML dokument hvor CSS definisjonene er lagret, benytter du deg av [link]-flagget:
Dermed trenger du kun å endre innholdet i stylesheet.css for å endre utseendet for hele nettsiden. Enklere en det blir det ikke!
This page
Other pages
Account
Administration