Nettsider utformes med stilark

Åpne bilde i et nytt vindu

CC BY

Bilde: Aleksandar Urošević

Før du leser om hvordan stilark fungerer, bør du oppleve det. Ved hjelp av regler kan vi forandre typografi og layout totalt. Hos w3schools.com kan du se fem varianter av den samme sida: Stilark-demonstrasjon. Om designet i tillegg hadde inneholdt animasjon og grafikk, ville det vært enda mer «total forvandling».

Et eksempel på kodetagg er <h1>. Vi lager designregler for taggen på denne måten:

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

For å velge farger kan vi bruke en liste med fargenavn, eller velge RGB- eller HEX-verdi for fargen. Skriftstørrelse kan du sette i piksler, prosent eller em. Ved bruk av forholdstall med em kan nettleseren zoome og skalere teksten etter brukerens ønske. Merk at vi skriver et semikolon på slutten av hver linje for å fortelle at en instruksjon er avsluttet. Linjeskiftene har derimot ingen betydning – de er der kun for at det skal være godt lesbart for mennesker.

Når vi setter designregler på body-taggen, gjelder disse bakgrunnen for sida:

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

Når vi setter skrifttype, har vi oftest flere varianter. Hvis den som leser nettsida ikke har arial innstallert, velges heller helvetica, og finnes ikke den heller, velges en annen groteskfont. Vi kan også legge til kommentarer ved hjelp av stjerner og skråstrek for at vi lettere skal forstå kodene våre.

I eksempelet over er innstillingene i utgangspunktet gjort for bakgrunnen vår. Men en del egenskaper, som tekst, lister og farge, arves videre til alle elementer som er mellom body-taggens start og slutt. Det er jo alt innholdet på sida! Dette kalles arv og gjør at vi ikke trenger å sette innstilling for skrifttype på alle underliggende tagger hvis den ikke skal endres.

Det går an å skrive stilregler direkte i tagger, eller i head-delen av HTML-dokumentet. Dette kan være anvendelig for enkelte særregler, men hvis vi får mest mulig inn i et separat dokument, kan det kobles opp mot flere HTML-sider. Tenk om vi har et helt nettsted med hundre sider og ønsker å endre bakgrunnsfarge? Da er det greit at regelen kun står ett sted i ett separat dokument.

Ved å lage en klasse får man en regel som man kan anvende på valgfrie elementer. Et eksempel kan være at noen av bildene våre skal flyte til venstre i teksten og/eller ha ramme. Det løser vi med denne koden:

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

.innrammet { border: 1px solid black }

Klassene lages altså med et punktum foran seg i CSS-koden. De kan kobles opp i HTML samtidig eller hver 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">

Hvis vi skal bruke skript i tilknytning til funksjonalitet og oppførsel, kan vi også lage identifikatorer:

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

Identifikatorene lages altså med et skigardtegn foran seg i CSS-koden. De kan anvendes slik:

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

En identifikator kan kun brukes en gang i HTML-koden.