Globale linker

CSS

Hvordan sette inn CSS

Som tidligere skrevet, CSS kan brukes på fire forskjellige måter i et HTML-dokument.

Ekstern CSS

Et eksternt CSS-stilark er i de aller fleste situasjoner den beste måten å bruke CSS på. Ved å linke til stilarket, kan man raskt forandre formatteringer for en rekke dokumenter, ved å gjøre forandringene i stilarket, istedet for hver enkelt HTML-side. Man linker til stilarket i <head>-delen av et HTML-dokument ved å bruke <link>-taggen. <link>-taggen er en såkalt åpen tag og trenger ingen avslutningstag.

<head>
<link href="minStil.css" type="text/css" rel="stylesheet" / >
</head>

Nettleseren vil lese stildefinisjonene fra filen minStil.css, og formattere dokumentet deretter.

Et eksternt stilark kan skrives i en hvilkensomhelst teksteditor. Filen skal ikke inneholde noen HTML-tagger. Filen skal lagres med .css filetternavn. Et eksempel på stildefinisjoner i et css-dokument kan være:

hr {/*horisontal rule får en sienna farge*/
color: sienna
} p {/*alle avsnitt skal ha en 20 Pixlers venstremarg*/
margin-left: 20px
} body { /*bakgrunnsbilde skal være back40.gif */
background-image: url("images/back40.gif")
}

Importert CSS

Det er egentlig ikke store forskjellen på ekstern og importerte stilark. Fordelen med importerte er at definiasjonen «skjules» for IE 4 og Netscape 4. Så hvis man må støtte IE 4, så kan man altså importere et stilark (som da IE 4 ikke vil lese) og linke til et annet (som IE 4 vil lese).

Plasseres i <head>:

<style type="text/css">
@import url("../skjultforIE4.css");
</style>

Det finnes forskjellige måter å skrive denne import-snutten på som skjuler for forskjellige eldre nettleserversjoner. Les mer hos W3development.

NB! Hvis du bruker XHTML 1.1 strict (som valideres som XML) som doctype må innholdet mellom <style>-taggene deklareres som en CDATA (unparsed character data)-seksjon:

<style type="text/css">
/*<![CDATA[*/
@import url("../skjultforIE4.css");
/*]]>*/
</style>

/* og */ brukes for å skjule [CDATA]-taggene fra CSS'en

Intern (embedded) CSS

Et internt stilark bør brukes når et dokument skal ha en unik stil. Du definerer stilene i <head>-seksjonen i et HTML-dokument ved å bruke <style>-taggen:

<head>
<style type="text/css">
<!--
hr {
color: sienna
}
p {
margin-left: 20px
}
body {
background-image: url("images/back40.gif")
}
-->
</style>
</head>

Nettleseren vil lese stildefinisjonene og formattere dokumentet deretter.

Selve stildefinisjonene er kommentert ut fordi de eldre browserne ikke støtter <style>-taggen. De eldre browserne vil ignorere <style>-taggen, men innholdet i taggen vil bli skrevet ut hvis man ikke har kommentert ut selve definisjonene.

Inline CSS

Ved å bruke en inline-stil mister du mange av fordelene ved stylesheets ved at du må inn i taggen for å redigere stilen. Bruk dette bare i ytterste nødfall. Eller for å si det på en annen måte; skal du bruke en stil mer enn 2 ganger, putt det i et eksternt stylesheet.

Skriv inn stildefinisjonen i selve taggen formatteringen skal gjelde for. Style attributter kan inneholde flere definisjoner adskilt av semi-kolon:

<p style="color: sienna; margin-left: 20px">
Dette er et avsnitt
</p>

Multiple Style Sheets

Hvis egenskaper har blitt definert for den samme selektoren i forskjellige stylesheets, vil egenskaper arves.

For eksempel, et eksternt stylesheet inneholder disse egenskapene for <h3>-taggen:

h3 {
color: red;
text-align: left;
font-size: 8pt
}

Og et internt stylesheet har disse egenskapene for samme tag:

h3 {
text-align: right;
font-size: 20pt
}

Hvis HTML-dokumentet med det interne stylesheet'et også er linket til det eksterne, vil h3 få disse egenskapene:

color: red;
text-align: right;
font-size: 20pt

Farven er arvet fra det eksterne og text-alignment og font-size er byttet ut med det interne stylesheet'et. (den definisjonen nærmest taggen gjelder). Det hele kan kompliseres noe mer hvis man tar hensyn til hva som vektlegges mest i CSS. Les mer om kaskadingen hos Lars Marius Garshol.

Neste sideGå til neste side hvor vi ser på tekstformatteringer.