Nettsider blir utforma med stilark

Opne bilete i eit nytt vindauge

CC BY

Bilete: Aleksandar Urošević

Før du les om korleis stilark fungerer, bør du oppleve det. Ved hjelp av reglar kan vi endre typografi og layout totalt. Hos w3schools.com kan du sjå fem variantar av den samme sida: Stilark-demonstrasjon. Om designet i tillegg hadde inneheldt animasjon og grafikk, ville det vore endå meir «total forvandling».

Eit eksempel 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 evald ein annan groteskfont. Vi kan også leggje til kommentarar ved hjelp av stjerner og skråstrek for at vi lettare skal forstå kodane våre.

I eksempelet 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 å settje innstilling for skrifttype på alle underliggjande taggar viss ikkje han skal endrast.

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.

Ved å lage ein klasse får ein ein regel som ein kan nytte på valfrie element. Eit eksempel 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ørsle, kan vi også 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.