Vi bruker stilark (cascading stylesheets eller CSS) til å utforme nettsidene våre med typografi og design. En nettside kan ha flere stilark knyttet til seg, avhengig av behov og ønsker – f.eks. utskrifts- eller mobilvisning. Nordmannen Håkon Wium Lie utviklet CSS-teknologien som i dag støttes av alle nettlesere.

Skisse for webdesign. Foto. — Foto: Aleksandar Urošević.

Du trenger å kjenne til prinsippene for stilark, ettersom utformingen av sider i en læringsplattform styres av CSS.

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».

Vi designer hypertekst ved å lage stilregler for HTML-tagger

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 hexadecimal-verdi for fargen. RGB instruerer nettleseren i hvordan den skal kombinere rødt, gult og blått. Hexadecimal fargeangivelse kombinerer fem bokstaver. 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.

Arv gjør at vi slipper å skrive alle innstillinger for alle tagger

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.

Stilarkene bør lages som egne dokumenter

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.

Regler som ikke lages direkte mot tagger

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.

Denne videoen viser CSS i bruk. Du trenger ikke å forstå alt som skjer her, men prinsippene som ligger til grunn.