Nettsider blir utforma med stilark

Vi bruker stilark til å utforme nettsidene våre med typografi og design. Ei nettside kan ha fleire stilark knytte til seg, avhengig av behov og ønske – f.eks. utskrifts- eller mobilvising. Nordmannen Håkon Wium Lie utvikla CSS-teknologien som i dag blir støtta av alle nettlesere.

Lær om stilark

Før du les om korleis stilark fungerer, bør du oppleve det. Ved hjelp av reglar kan vi endre typografi og layout totalt. Sjå fem variantar av den same sida hos w3schools.com. Om designet i tillegg hadde inneheldt animasjon og grafikk, ville det vore endå meir "total forvandling".

Vi designar hypertekst ved å lage stilreglar for HTML-taggar

Eit døme på kodetagg er <h1>. Vi lagar designreglar for taggen på denne måten:

h1 { color: RoyalBlue;font-size: 2.5em; }

For å velje fargar kan vi bruke ei liste med fargenamn, eller velje RGB- eller HEX-verdi for fargen. Skriftstorleik kan du setje i pikslar, prosent eller em. Ved bruk av forholdstal med em kan nettlesaren zoome og skalere teksten etter brukaren sitt ønske. Merk at vi skriv eit semikolon på slutten av kvar linje for å fortelje at ein instruksjon er avslutta. Linjeskifta har derimot ingen verdi – dei er der berre for at det skal vere godt lesbart for menneske.

Når vi set designreglar på body-taggen, gjeld dei bakgrunnen for sida:

body { background: rgb(240,240,240); /* Lysegrå bakgrunnsfarge */ font-family: Arial, Helvetica, sans-serif; font-size: 100%;}

Når vi set skrifttype, har vi oftast fleire variantar. Viss den som les nettsida ikke har Arial innstallert, blir heller Helvetica vald, og finst ikkje den heller, blir det vald ein annan groteskfont. Vi kan òg legge til kommentarar ved hjelp av stjerner og skråstrek for at vi lettare skal forstå kodane våre.

Arv gjer at vi slepp å skrive alle innstillingar for alle taggar

I dømet over er innstillingane i utgangspunktet gjorde for bakgrunnen vår. Men ein del eigenskapar, som tekst, lister og farge, blir arva vidare til alle element som er mellom start og slutt på body-taggen. Det er jo alt innhaldet på sida! Dette blir kalla arv og gjer at vi ikkje treng å setje innstilling for skrifttype på alle underliggande taggar viss ikkje han skal endrast.

Stilarka bør lagast som eigne dokument

Det går an å skrive stilreglar direkte i taggar, eller i head-delen av HTML-dokumentet. Dette kan være nyttig for enkelte særreglar, men viss vi får mest mogleg inn i eit separat dokument, kan det koplast opp mot fleire HTML-sider. Tenk om vi har ein heil nettstad med hundre sider og ønskjer å endre bakgrunnsfarge? Då er det greitt at regelen berre står ein stad i eitt separat dokument.

Reglar som ikkje bli laga direkte mot taggar

Ved å lage ein klasse får ein ein regel som ein kan nytte på valfrie element. Eit døme kan vere at nokre av bileta våre skal flyte til venstre i teksten og/eller ha ramme. Det løyser vi med denne koden:

.venstrestilt { float:left; margin-right: 10px; /* litt luft til høyre for bildet */}.innrammet { border: 1px solid black }

Klassane blir altså laga med eit punktum framføre seg i CSS-koden. Dei kan koplast opp i HTML samtidig eller kvar for seg på denne måten:

<img class="innrammet" src="bilder/banner.jpg" alt="Banner for vilbli.no"><img class="venstrestilt innrammet" src="bilder/logo.png" alt="Logo for vilbli.no">

Viss vi skal bruke skript i tilknyting til funksjonalitet og oppførsel, kan vi òg lage identifikatorar:

#spesialknapp { position: fixed; bottom: 0; right: 0; width: 300px;}

Identifikatorane blir altså laga med eit skigardteikn framfor seg i CSS-koden. Dei kan nyttast slik:

<footer id="spesialknapp">Lisensiert med Creative Commons.</footer>

Ein identifikator kan berre nyttast ein gong i HTML-koden.