Lynkurs i "Cascading Style Sheets" — CSS

Et layoutsystem for hjemmesider

Av Erik Koht

Ser du etter gull og grønne skoger, så ligger det et stykke lenger oppe i gata. På denne adressen er det bare blodslit og tenners gnidsel. Her kreves det at du har lært deg html før du i det hele tatt slipper innenfor døren. Og hva verre er, du vil oppdage at store deler av det du har lært om html er bortkstet. I css er det ingen tekst som ruller og ingen knapper som skifter farge. Så om dette ikke høres ut som din greie — ha det bra, vi sees i cyberspace.

Hei, er du der ennå? Flott, da kan vi begynne!

CSS ER ET LAYOUTSYSTEM, dvs. det er en måte å få kontroll over alt som skal synes på netttsiden din: skrift og tekstblokker, bilder og farger. I css kan du plassere hvert element på siden helt som du vil, helt presist, og uavhengig av hvor andre ting på siden befinner seg. Du kan også knyte dem sammen om det er best. Du kan til og med sette ting oppå hverandre om ditt hjerte banker for en slik løsning. Du kan oppheve de forholdene nettleseren vanligvis rår over, f.eks. bakgrunn og marger. Og det er ikke alt. Når du først har laget et sett med spesifikasjoner — kall dem gjerne regler — kan du bruke dem for mange nettsider på en gang. Med vanlig html må du skrive de samme tekstspesifikasjonene om og om igjen, selv om du har brukt nøyaktig samme skriften før andre steder i dokumentet eller på nettstedet. I css har du definert denne skriften en gang for alle — alt du behøver å gjøre etterpå er å henvise til den definisjonen. Definisjonen kan du skrive i et eget css-dokument eller i "head"-delen av html-dokumentet du arbeider med.

Til i dag har du stappet alt du trenger inn i et html-dokument. Nå skal du i opprette et støttedokument. Du vil oppdage at du nå kan greie deg med færre og kortere koder i html-dokumentet. Hvor mye kortere kommer an på deg og hvor effektivt du utnytter mulighetene. Det nye dokumentet kan du kalle hva du vil, så lenge navnet slutter med .css istedet for .html. Du skal henvise til css-dokumentet i head-delen av html-dokumentet. Toppen av html-dokumentet ditt blir seende slik ut:

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-10">
<title>Meg og mitt</title>
<link rel="stylesheet" href="navn.css" type="text/css">

</head>
<body>

Style i css-dokumentet

Det kan være ugreit å få ting til å stå der der du vil de skal stå. Før brukte man tabell-systemet for å holde ting samlet. Det er ennå ganske hendig i visse sammenhenger, men for innholdet av en hel side blir det for mye styr, særlig hvis man har lyst til å gjøre forandringer.

Eksemplets makt

I dette eksemplet (Se eksemplet i full størrelse.) har jeg tenkt meg et layoutsystem som består av et overskriftfelt. Under overskriften følger to spalter med tekst, den til venstre er på gul bunn. Under de to spaltene er det et bunnfelt i full bredde. Eksemplet er ikke laget for å se pent ut, men for at du skal kunne se hvordan forskjellige virkninger oppnås. I eksemplet er det lagt inn slike elementer som du kan få bruk for senere: tekst, lenker, streker og bilder.

Bruk av css-systemet utelukker ikke at du bruker tags i html-dokumentet som ikke er definert i .css-dokumentet. Slike tags oppfører seg slik de gjør i vanlig html, dvs. det er browserens standardinnstillinger som bestemmer virkningen.

Dette er .css-dokumentet. Merk at det ikke finnes noen innledende koder: ingen title, head eller body og ingen henvisning til html-dokumentet.

body {margin-top: 0;
margin-left: 25px;
margin-right:15px;
background-color: #ffffff;
outline:none;
color: black;
background-image: url(image001.gif);
background-repeat: x y;
background-position: 0 0;
background-attachment: fixed;
font-weight: 400;
}

Koden består altså av en tag-betegnelse uten "<" og ">" — i dette tilfellet body. Om du bruker store eller små bokstaver spiller ingen rolle. Linjeskift og ordmellomrom påvirker heller ikke resultatet. Alle spesifikasjonene er samlet innenfor " { " og " } " — krøllparanteser. Hver spesifikasjon skilles med " ; " — semikolon. Hver spesifikasjon består av et emne og en eller flere verdier. Emnet og verdien er skilt fra hverandre med " : " — kolon.

Hvis du vil lære de engelske uttrykkene, så lyder en tilsvarende beskrivelse slik:

"A rule is composed of a selector, followed by one or more declarations enclosed in curly braces. The declaration is broken up into the attribute and the value. Each attribute is separated from its value by a colon and each declaration is separated from the other declaration by a semi-colon."
( — Nana Gilbert-Baffoe)

Alt som står i body-tagen blir gjendende for hele dokumentet og opphever browserens standard (default) eller valgte (preferences) innstillinger. Emneordene er ganske selvforklarende hvis du kan litt engelsk, men det er ikke så greit å vite at "color" gjelder fargen på skriften i dokumentet.

"X" er vannrett, "y" er loddrett, disse aksene brukes sammen med "background-repeat". Med css kan ting dekke hverandre. "Z" er dybdeaksen. Z-indextallet i spsifikasjonene nedenfor forteller hva som er foran og bak, laveste tall er bakerst. Det kan godt være sprang mellom tallene.

Internet Explorer godtar ikke andre målangivelser enn prosent (%) og pixels (px). Tallet "0" trenger aldri målangivelse. Nedenfor følger koden til overskrift-feltet, altså ikke teksten, bare området. Her fortsetter css-dokumentet:

div.head{
position: absolute;
left: 25px;
top: 0;
width: 650px;
z-index : 1;
}

Og her er resten av html-sidens inndelinger slik de er spesifisert i css-dokumentet. Legg merke til at en tag-betegnelse, "div", er brukt flere ganger. Det skal du snart få vite mer om.

div.spalte1{
text-align : left;
position: absolute;
left: 25px;
top: 130px;
width: 300px;
z-index : 1;
}

div.spalte2{
text-align : left;
line-height : 20px;
position: absolute;
left: 350px;
top: 120px;
width: 300px;
z-index : 1;
}

div.bunn{
text-align: left;
position: absolute;
left: 25px;
top: 670px;
width: 650px;
z-index : 5;
}

Så var det skriften. Merk at tagen h1's utseende er uavhengig av plasseringen, du får samme skrift og farge om du setter inn tagen h1 et annet sted på siden.

h1{color: #990000;
font-size:48px;
font-weight:900;
font-family: times new roman, Times, Serif;
background-color: transparent;
line-height: 24px;
text-align:left;
padding-top:30px;
}

H2 er en subheading, du kan lage egne spesifikasjoner for h3 — h6 om du trenger det.

h2{color: #990000;
font-size:16px;
font-weight:900;
font-family: Times, Serif;
background-color: transparent;
line-height: 16px

}

Nedenfor står det at vanlig tekst skal være sort, men det står allerede i body-tag'en så akkurat den spesifikasjonen er unødvendig her.

font {color: #000000;
font-size:16px;
font-weight:400;
font-family: Arial, Helvetica, sansSerif;
background-color: transparent;
text-indent:none;
}

p .hoyre {color: #000000;
font-size:16px;
font-weight:400;
font-family: Arial, Helvetica, sansSerif;
background-color: transparent;
text-indent:none;
text-align: right;
}

Standardinnstillingen for linker er understreking. Jeg foretrekker å markere linker på andre måter, derfor bruker jeg {text-decoration : none}. Jeg kan fortsatt få understreking om jeg vil ved å bruke vanlig html-koding (<u>...</u>). Her er spesifikasjonene for linker:

a {text-decoration : none;
font-size : 12px;
font-weight : 400;
line-height : 15px;
font-family : Times, Serif;
outline : none;
background-color : transparent;

}

Her følger noen varianter av "a". Merk at Netscape-utgaver før 6.0 ikke reagerer på "hover". (Hover tilsvarer JavaScrips "onMouseover".)

a:visited {text-decoration:none; color: #0000cc; outline:none; font-family: Times, Serif}

a:active {text-decoration:none; color: #000099; outline:none; font-family: Times, Serif }

a:hover {text-decoration:none; color: #FF0000; outline:none; font-family: Times, Serif; font-size : 12px; }

Du kan få oversikt over alle css-spesifikasjonene hos W3 Corporation. Se også "CSS verdier" nedenfor.

Man behøver ikke et eget css-dokument om man bare skal lage en eneste side. Du kan sette inn all koden ovenfor i "head"-delen av html-dokumentet. Før spesifikasjonene skriver du <style type="text/css">, og avslutter med </style>. Om du bruker begge deler, vil det som står i html-dokumentet ha prioritet. Høysest prioritet har spesifikasjoner som står i forbindelse med den tag'en du vil påvirke i "body"-delen av dokumentet. Du kan f.eks. skrive <font style="background-color : yellow">...</font>. Da kommer teksten på gul bunn uansett hva som har stått tidligere. Et annet eksempel, denne gangen for et bilde. <img src="eksempel.jpg" alt="skjermbilde" width="275" height="161" align="right" style="border:10px solid white">

Style i html-dokumentet

Innfør <link rel="stylesheet" href="navn.css" type="text/css"> i "head"-delen av html-dokumentet. Såfremt du har beskrevet en tag i css-dokumentet, om det er "body", "div", "font", "a" eller noe annet, blir spesifikasjonene oppfattet og gjort gjeldende for samme tag i html-dokumentet. Det er jo flott...kanskje. Det kan jo hende man har lyst til å bruke en av disse tag'ene til noe helt annet - f.eks. kan det være greit å bruke "font" til å beskrive en annen type skrift. Det er da "class" kommer inn i bildet. Om du vil gjøre spesifikasjonene gjeldende for bare en del av teksten, kan du lage flere klasser av "font" I css-dokumentet skriver du

font.navn1 { spesifikasjoner }
font.navn2 { andre spesifikasjoner }

"navn1" og "navn2" er ord du finner på selv og er klassebetegnelser. "Class" kan brukes i forbindelse med mange tags, i eksempelkoden er det brukt sammen med "div", se ovenfor.

Når du kommer til det stedet i html-dokumentet der den ene eller andre settet av spesifikasjoner skal gjelde, skriver du:

<font class="navn1"> eller <font class="navn2"> foran teksten og avslutter med </font >.

Det finnes en annen måte å avgrense virkningene av et sett med spesifikasjoner. Du kan kreve at spesifikasjonene for f.eks.en "font"-type bare skal gjelde innenfor rammen av "td", altså i en tabell. Det skriver du slik:

td font { spesifikasjoner }

Nedenfor er et eksempel på sourcekoden (kildekoden) til et html-dokument, vår eksempelside, der css-spesifikasjonene er i bruk. Det fine er at det blir helt likt både i Netscape og Internet Explorer. Legg merke til at ved <br> (linjeskift) avslutter jeg </font> og </a> etter <br> - det skulle jo ha stått foran. Grunnen til det er at i Netscape forårsaker </a> og </font> av og til uønskede linjeskift, dermed blir linjeskiftet dobbelt. Eksemplet inneholder en del tags som ikke er forklart i dette lynkurset. Legg merke til at bildene i dette dokumentet er nummerert "001.gif" osv. Det er ikke noen særlig god idé. For det første sier det ikke noe om bildenes innhold, dessuten er det slik at om du stadig gir bildene slike intetsigende nummer-navn risikerer du at et bilde en gang havner i feil mappe og overskriver et bilde med samme navn i den mappen. Det er Murphys lov.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="no">

<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META NAME="Author" CONTENT="Erik Koht">
<title>CSS i hjemmesider - gjør det selv!</title>
<link rel="shortcut icon" href="../terne-liten.ico">
<link rel="stylesheet" href="sommerfugl.css" type="text/css">

</head>

<body>

<div class="head">
<h1>Min deilige sommerfugl</h1>
</div>

<div class="spalte1">
<table border="0" cellpadding="10" summary="fourscore">
<tr>
<td bgcolor="#FFCC33">

<h2>Fourscore and 8</h2><a href="http://en.wikipedia.org/wiki/Gettysburg_Address">Fourscore and 9.1
<br /></a>
<hr width="100%" align="center" size="1">
<font>Fourscore and 9.2 years ago our fathers brought forth on this continent a new nation dedicated to the proposition that all men are created equal.</font>
</td>
</tr>
</table>
<br />
<img src="../Scan10819-b.jpg" width="300" alt="Sommerfugl">
</div>

<div class="spalte2">
<font>Baksiden av kapitelet har tre felt. I midtfeltet troner en sittende Satan med hundehode. På høyre side er en hane, Hades symbol, senere symbol for brann. Dette feltet er enten skadet av brann..
<br />
<br />
<br />
Figur 1. Sommerfugl i Valdres.</font>
<br />
<br />
<br />

<p class="hoyre">Figur 2. Sommerfugl i Oslo.</p>
</div>

<div class="spalte3">
<img src="tistelsommerfugl.jpg" height="625" alt="tistelsommerfugl" align="left">
</div>

<div class="bunn">
navn<br />
adresse<br />
telefon<br />
epost
</div>
</body>
</html>

Det er mulig å dele opp css-dokumentet i flere dokumenter. Hvis det blir for langt og uoversiktlig kan man f.eks ha ett css-dokument som innholder spesifikasjonene for layout og et annet for typografien, eller en annen inndeling som du synnes er praktisk. Da ser koden i head-delen av html-dokumentet slik ut, hvis du oppretter en egen mappe for css-dokumentene

<style type="text/css" >
@import url("css/layout.css");
@import url"css/typografi.css");
</style>
Koden kan også skrives uten url og ( ).

CSS-verdier

Det finnes massevis av emner og hver av dem har flere verdier du kan velge for at virkningen skal bli slik du ønsker. Når verdien er et tall, gir variasjonsmulighetene seg selv, er verdien uttrykt med bokstaver er valgmulighetene ikke like selvsagte. Det hender også at et emne kan ha flere verdier samtidig. Om disse verdiene skilles fra hverandre med mellomrom, er de likestilte - om de skilles fra hverandre med komma betyr det at browseren kan velge i den rekkefølgen de er skrevet.

Eksempel: div {margin : 10px 10px 10px 15% }
Her er alle margforholdene beskrevet under ett og "følger klokken" rundt.
Eksempel: font {font-family : Arial, Helvetica, SansSerif }
Her er skriften Arial førstevalg, finnes ikke den i maskinen kan browseren velge Helvetica eller en generell skriftgruppe sans serif.

Det går an å slå sammen verdier som hører sammen. Det finnes eksempelvis mange emner som begynner med "font-": font-weight, font-family m.fl. Du kan spesifisere verdiene til hver av disse for seg eller slå dem sammen slik:

font {#000000 12px 400 Times transparent none}

Raskt å skrive, men ikke så oversiktlig som

font {color: #000000;
font-size: 12px;
font-weight: 400;
font-family: Times, Serif;
background-color: transparent;
text-indent: none;

}

Emneordene (kalt "properties") som er brukt i eksempelsiden har disse mulighetene:

Background-attachment
fixed eller scroll, avhengig av om bildet skal følge med teksten når du ruller eller bli stående stille.

Background-position
center, right, left eller posisjonen til bakgrunnbildets øverste venstre hjørne oppgitt i px.

Background-repeat
Mulighetene er repeat-x; repeat-y, x y og no-repeat

Font-family
Her kan du skrive et eller flere fontnavn, dessuten bør du ha med en såkalt generisk betegnelse. De generiske betegnelsene er serif, sans-serif, cursive, fantasy, og monospace.

Font-weight
Her kan du enten velge "normal" og "bold" - eller tall. Tallet "400" tilsvarer normal, "700" er bold.

Text-decoration
Velg mellom none, underline, overline, line-through og blink.

Position
Verdiene er "absolute" eller "relative". Browsere reagerer svært ulikt på "relative", så det er god grunn til å styre klar av det alternativet.

Outline : none
Denne spesifikasjonen bruker jeg for å fjerne den stygge brune kanten som kommer når man klikker på en link i Explorer. Jeg er ikke sikker på hva min kilde til denne komandoen er, men den virker.

Em
"Em" har jeg ikke brukt denne gangen, men muligheten er grei å vite om. Her kan du sette sammen spesifikasjoner du vil bruke for å fremheve en tekst. I stedet for <b> og <i>. Tenk deg at du vil fremheve tekster ved hjelp av f.eks. farget bunn, størrelse eller innrykk. Du kan sette sammen disse anvisningene i css-dokumentet og bruke <em> i html-dokumentet. Den røde skriften i dokumentet du har foran deg nå er gjort på denne måten, dvs. at hele ...</font><font style="color : red">...</font> <font> ... er erstattet med bare ...<em>...</em>...

Id
Det finnes et alternativ til class som heter id. Det brukes på samme måte, men har den begrensningen at du kan bare bruke det én gang pr html-dokument. I css-dokumentet ser koden slik ut p # navn { spesifikasjoner }. I html-dokumentet ser den slik ut <p id="navn">. p og navn er her bare brukt som eksempler.

— Se css-spesifikasjonene til dette dokumentet.
Copyright Erik Koht august 2001. Alle koder (rød tekst) står fritt til disposisjon.