Introduksjon til CSS

Denne artikkelen inngår i serien Introduksjon til utvikling av nettsider.

CSS står for Cascading Style Sheets og er et kodespråk som definerer hvordan et dokument skrevet med HTML (eller liknende markeringsspråk) skal presenteres. Det involverer blant annet farger, skrift, plassering og animasjoner. Det ble oppfunnet av nordmannen Håkon Wium Lie i 1994 og er nå en utbredt standard som brukes på nesten alle nettsider. I denne artikkelen vil jeg gå gjennom noen av hovedprinsippene.

Dette er andre artikkel i en serie om å komme i gang med utvikling av nettsider. Første artikkel tok for seg hvordan man kunne opprette en nettside og gi den innhold som tekst og bilder ved hjelp av HTML. Hvis du ikke allerede kjenner til HTML, anbefaler jeg å lese den først.

Hvorfor må jeg bruke CSS?

Du har kanskje sett eksempler på HTML-kode med tagger som <font>, hvor man kan styre type, farge og størrelse for en tekst direkte gjennom attributter. Dette er et mønster som stammer fra en tid da CSS var mindre utbredt. I HTML 5, den nyeste versjonen av HTML, er slike tagger fjernet fordi dette er noe man kan og bør gjøre med CSS. Enhver erfaren utvikler vil være enig i at det er viktig å ha tydelig adskilte roller mellom forskjellige deler av koden. Ved å utelukkende la HTML-koden ha ansvar for innholdet og CSS-koden for utseendet, oppnår man nettopp det. Da vet man alltid hvor man skal gå for å løse et problem.

Hvordan sette det opp

Som med så mye annet, er det enklest å forklare hvordan man setter opp CSS ved hjelp av eksempler. CSS har ikke noen effekt alene, så jeg skal ta utgangspunkt i den enkle HTML-filen fra forrige artikkel:

For å legge til CSS, må du først opprette en ny fil med .css-suffiks i samme mappe som HTML-filen. I dette eksemplet skal jeg kalle den stilark.css. Så må du legge til en kobling til CSS-filen fra HTML-filen. Da må du legge til en ny linje i <head>-seksjonen:

Her er det to attributter; rel og href. rel="stylesheet" forteller nettleseren at dette er en CSS-fil, mens href="stilark.css" forteller hvor filen er å finne og hva den heter. Siden verdien bare er et filnavn, betyr det at filen ligger i samme mappe. Hadde den for eksempel ligget i en mappe med navnet "mappe", måtte vi skrevet href="mappe/stilark.css".

HTML-filen skal nå se slik ut:

I nettleseren vil du derimot ikke se noen endring fra tidligere:

Det er så klart fordi CSS-filen er helt tom, så den vil ikke ha noen effekt. Videre skal vi se på hvordan vi kan bruke CSS-kode til å endre på utseendet.

Kode

CSS har en svært enkel syntaks, men til gjengjeld omfatter det en stor mengde forskjellige egenskaper som alle fungerer på hver sin måte. Igjen skal jeg ikke gå gjennom alt, men vise til noen eksempler. La oss starte med å skrive dette i stilark.css-filen fra forrige eksempel:

Nå har siden fått en merkbar forandring:

Koden er i stor grad selvforklarende. Siden har gul bakgrunn fordi vi har spesifisert background-color: yellow på body-elementet. Overskriften er blå og sentrert fordi vi har spesifisert color: blue og text-align: center på h1. Og teksten "Dette er min første nettside" er fet på grunn av font-weight: bold på p, som er taggen som omslutter teksten.

Her har vi altså demonstrert et lite utvalg av egenskapene man kan styre. Jeg skal gå nærmere inn på flere av dem senere i artikkelen, men først bør vi ta en kikk på selektorer, som definerer hvilke elementer som får de oppgitte egenskapene.

Selektorer

En selektor er det som står foran klammene i CSS-koden. I siste eksempel er body, h1 og p selektorer. De peker på sine respektive HTML-elementer. Hadde vi hatt flere p-elementer i samme fil, ville selektoren truffet alle, og altså ville alle avsnittene fått fet skrift. Men dette er bare én av mange måter å skrive selektorer på.

Klasser

Klasser er den vanligste formen for selektorer. Ved hjelp av klasser kan man referere til spesifikke elementer uavhengig av hva slags tagg de har. For å gi et element en klasse, må man legge den til via class-attributtet på elementet. Her er et eksempel:

I CSS refererer man til klasser ved å skrive punktum foran klassenavnet:

Et element kan ha flere klasser, og da skiller man dem med mellomrom. La oss si at vi har denne CSS-koden:

Hvis vi vil at et element skal ha begge klassene, kan vi ganske enkelt gjøre slik:

En annen måte å skrive selektorer på er ved hjelp av ID-er. Konseptet er ganske likt klasser, men til forskjell fra klasser kan en ID bare brukes én gang per side. For å gi et element en ID, bruker man id-attributtet:

I CSS refererer man til en ID ved å skrive # foran:

Pseudoklasser

Pseudoklasser er spesielle klasser som nettleseren setter automatisk på bakgrunn av tilstanden til elementet eller sammenhengen det er plassert i. De starter med et kolon. Den vanligste er nok :hover, som blir aktivert når brukeren holder musen over elementet. Se hva som skjer når du holder musen over teksten her:

Ser du at teksten blir gul med rød bakgrunn? Slik ser CSS-koden ut:

Hvis du har en berøringsskjerm uten mus, vil du nok ikke kunne se noe spesielt her. Effekten er kun synlig når man beveger musepekeren over. Dette er det viktig å huske på når man bruker denne pseudoklassen og ønsker at innholdet skal være tilgjengelig for smarttelefoner eller andre enheter uten mus.

Pseudoelementer

Et pseudoelement er en gitt del av et element. Selektoren defineres med to kolon før navnet på pseudoelementet, for eksempel ::first-line, som refererer til første linje av en tekst. Det kan også være snakk om skyggeelementer, som i korte trekk er underelementer av mer komplekse HTML-elementer. <input>-elementene som omtales i seksjonen om attributtselektorer er eksempler på elementer med skyggeelementer. Dette er imidlertid et område hvor man må ta hensyn til forskjeller mellom nettlesere, så for enkelhets skyld vil jeg nøye meg med et mer universelt eksempel, nemlig ::first-letter. Denne selektoren refererer til den første bokstaven i en tekst. Hvis vi ønsker å gjøre denne større, slik det er vanlig på starten av kapitler i enkelte bøker, kan vi bruke en kode som dette:

Dette gir følgende resultat:

Attributter

Selektorer kan også basere seg på attributter. Et vanlig brukstilfelle for det er skjemaelementet <input>, som kan gi vesentlig forskjellig resultat avhengig av hva man oppgir i attributtet type. For eksempel kan man sette type="number" hvis man vil gi brukeren mulighet til å bla mellom hele tall, eller type="date" hvis man vil gi brukeren mulighet til å velge en dato fra en kalender. Disse ser slik ut:

Dette er HTML-koden:

Som du kan se, har de to feltene samme tagg, men de ser ut og oppfører seg forskjellig. Derfor kan det også være ønskelig å gi dem forskjellige stilregler. Det oppnår man ved å bruke selektorene input[type="date"] og input[type="number"], for eksempel slik:

Denne koden gir følgende resultat:

Som du kanskje har lagt merke til, har feltene hver sin ID, så vi kunne også brukt disse i selektorene. Men hvis vi hadde hatt flere dato- eller tallfelter, ville ikke selektoren dekket de andre. Grunnen til at vi har ID her er at den brukes til å referere til feltet fra <label>-elementet, slik at brukeren kan skrive i feltet når han eller hun har klikket på teksten foran (det blir fokusert).

Det er mye mer man kan gjøre med attributtselektorer, som å oppgi bare en viss del av verdien til attributtet, men jeg skal ikke gå i dybden på det i denne artikkelen. På bakgrunn av min egen erfaring tør jeg uansett påstå at dette er funksjonalitet som man ytterst sjeldent har behov for.

Sammensatte selektorer

Til nå har vi sett på enkeltstående selektorer, men det er også mulig å kombinere disse til å bli mer spesifikke. Faktisk har vi allerede sett dette i noen av de foregående eksemplene. p:hover indikerer for eksempel av stilkoden kun skal brukes på p-elementer. Syntaksen går ganske enkelt ut på å sette selektorene inntil hverandre. Man kan gjøre selektorer uendelig spesifikke på denne måten. For eksempel vil selektoren input.brukernavn[type="text"]:hover peke til <input>-elementer med klassen brukernavn hvor type-attributtet er text og kun når brukeren holder musepekeren over.

Hierarkiske selektorer

Selektorer kan også vise til hierarkien rundt elementet man vil peke på. Det gjør man ved hjelp av mellomrom. Ved å for eksempel skrive p a, refererer man til alle a-elementer som forekommer på innsiden av et p-element. Hvis man kun ønsker å peke på elementer som ligger på øverste nivå, kan man bruke tegnet >. Selektoren p > a vil treffe <a>-elementet i <p>Her er en lenke: <a href="#">Klikk på meg!</a></p>, men ikke det i <p>Her er en lenke: <span><a href="#">Klikk på meg!</a></span></p>. Selektoren p a vil derimot treffe begge.

Søskenselektorer

Når man omtaler to elementer som "søsken" vil det si at de ligger på samme nivå i samme element - de har samme "forelder". I CSS kan man bruke tegnet ~ til å peke på et element som er søsken av et annet og kommer etter det første elementet. For eksempel vil slektoren h2 ~ p peke på alle p-elementer som kommer etter h2. Tegnet + kan brukes på samme måte, men vil kun peke på elementet som følger rett etterpå. Det vil si at hvis man skriver h2 + p, vil stilkoden kun bli satt på det første p-elementet som følger etter en h2, og det kun hvis det ikke er noe annet imellom.

Universalselektoren

Universalselektoren * peker på alle elementer. Alene har den vanligvis ikke stor nytte. Den kan for eksempel brukes til å fjerne standardinnstillinger som settes av nettleseren, men da må man være oppmerksom på at dette kan gi uforutsette konsekvenser, siden stilen settes på absolutt alle elementer i dokumentet. Mer hensiktsmessig er det kanskje å bruke den som et ledd i hierarkiske selektorer eller søskenselektorer.

Selektorliste

Ønsker man at den samme stilkoden skal brukes på flere elementer moed forskjellige selektorer, kan man gjøre dette ved å liste opp selektorene i en kommaseparert liste. For eksempel kan man bruke selektoren h1, h2, h3, h4, h5, h6 til å peke på alle overskrifter uavhengig av nivå.

Egenskaper

Nå skal vi se nærmere på egenskapene man kan stilisere elementene med. Listen over egenskaper er lang og stadig voksende, så jeg skal ikke utrede for hver og én av dem, men jeg vil gå gjennom noen av de vanligste for å gi en rimelig innføring.

Skrift

La oss starte med det viktigste innholdet på en nettside, nemlig teksten. Vi har allerede sett enkelte tekstegenskaper i de foregående eksemplene, men det er mye mer man kan gjøre.

Skrifttype

Skrifttypen (eller "fonten") defineres med egenskapen font-family. Verdien er ikke nødvendigvis bare én skrifttype, men en liste med flere. Skrifttypen må nemlig være installert på brukerens maskin for at den skal kunne bli vist på nettsiden. Derfor oppgir man gjerne en liste med skrifttyper i prioritert rekkefølge. Hvis den første skrifttypen ikke er tilgjengelig, går nettleseren videre til den andre, deretter til den tredje og så videre.

La oss se på dette eksemplet:

Her vil nettleseren først prøve å vise teksten med skrifttypen Arial. Hvis den ikke er tilgjengelig, prøver den med Helvetica. Hvis heller ikke den er tilgjengelig, faller valget tilbake på nettleserens standard for "sans-serif"-skrifttyper. "Sans serif" er fransk og betyr "uten seriffer", hvor seriffer er de små utløperne øverst og nederst på bokstavene i enkelte skrifttyper. Den velkjente skrifttypen Times New Roman er et eksempel på en skrifttype med seriffer, mens Arial ikke har seriffer. Skulle vi forresten hatt med nettopp Times New Roman i listen, måtte vi hatt anførselstegn rundt ("Times New Roman") fordi den inneholder mellomrom.

Skriftstørrelse

Skriftstørrelse defineres med egenskapen font-size:

Å finne riktig skriftstørrelse er ikke nødvendigvis en enkel oppgave. Er skriften for stor, vil brukeren bli frustrert over dårlig oversiktsbilde og mye skrolling, særlig hvis skjermen er liten. Er skriften for liten, kan den bli vanskelig å lese, spesielt for brukere med synsvansker. Med en absolutt skriftstørrelse er det rett og slett ikke mulig å tilfredsstille alle. Heldigvis er dette noe som det allerede finnes en enkel løsning for, nemlig enheten rem, som er brukt i eksemplet over. Den er relativ til skriftstørrelsen som er satt på <html>-elementet. Hvis det ikke er noe kode som overstyrer denne verdien, vil den følge nettleserens standard, som normalt vil være på 16 piksler. Men brukere som foretrekker brødtekst i en annen størrelse har gjerne stilt inn dette i nettleseren, og rem-enheten vil dermed få denne verdien. Derfor bør brødtekst alltid ha størrelsen 1rem. Da slipper brukerne å måtte ty til zoom-knappen fordi størrelsen er annerledes enn det de er vant til.

Justering

Gitt at man skriver på et språk som leses fra venstre til høyre (som norsk), er teksten venstrejustert som standard. Dette kan man endre på med egenskapen text-align, som kan ha følgende verdier:

left - venstrejustert
right - høyrejustert
start (standard) - venstrejustert for venstre-til-høyre-språk og høyrejustert for høyre-til-venstre-språk
end - høyrejustert for venstre-til-høyre-språk og venstrejustert for høyre-til-venstre-språk
center - sentrert
justify - blokkjustert

Fet skrift

"Fetheten" på skriften settes med egenskapen font-weight. Dette er et helt tall i spekteret 1-1000, men de fleste skrifttyper har et langt mindre utvalg av grader å velge mellom. Derfor vil man oppleve at fetheten gjør et stort hopp fra ett tall til et annet, mens den kan være helt uforandret om man sammenligner to andre verdier. I stedet for tall kan man bruke verdiene normal og bold, som tilsvarer henholdsvis 400 og 700, eller lighter og bolder, som justerer graden relativt til den som gjelder i forelderelementet.

Kursiv eller skrå skrift

Hvis det finnes en kursiv utgave av skrifttypen, kan denne tas i bruk ved å sette font-style: italic. På samme måte kan man sette font-style: oblique for å ta i bruk den skrå utgaven. Forskjellen på kursiv og skrå er at kursiv består av egne glyfer som kan skille seg klart fra den normale utgaven, mens skrå skrift består av de samme glyfene, men satt litt på skrå.

Understreket skrift

En tekst kan få understrek ved å sette text-decoration: underline. Vær forsiktig med å bruke dette på andre ting enn lenker. Understrek er nemlig et etablert designidiom for lenker.

Farget skrift

Det er mange måter å angi farger på i CSS, så det er et tema for en fremtidig artikkelserie. I denne artikkelen vil jeg kun vise til den enkleste, som er å bruke en av de forhåndsdefinerte fargene, som red, blue, yellow og green. Fargen på en tekst setter man enkelt med egenskapen color:

Linjeavstand

Den siste egenskapen jeg vil nevne her er linjeavstand, line-height, som bestemmer hvor stor plass en tekstlinje skal ta opp, og dermed hvor mye mellomrom det skal være mellom linjene. Man kan argumentere for at det engelske begrepet "line height" ("linjehøyde") er mer korrekt enn det norske "linjeavstand", siden "avstand" ikke viser til mellomrommet mellom linjene, men avstanden fra ett punkt på én linje til det samme punktet på linjen under. Man kan se for seg at det er snakk om linjene på et linjeark for håndskrift. Setter man verdien til 0, vil linjene altså havne oppå hverandre.

Målet bestemmer også hvor mye plass teksten tar opp i høyden og dermed hvor mye andre elementer på siden blir forskjøvet.

Verdien kan ha en lengdeenhet, men det er mest vanlig å bruke et tall uten enhet. Høyden blir da relativ til skriftstørrelsen. Hvis skriftstørrelsen er 1rem og linjeavstanden er satt til 1.5, blir den endelige høyden halvannen rem. Legg merke til at man må bruke punktum i stedet for komma i koden - dette gjelder alle tallverdier i CSS (og de fleste programmeringsspårk for øvrig).

Bakgrunn

På samme måte som man kan sette farge på en tekst, kan man sette en bakgrunnsfarge på et element. Det gjøres med egenskapen background-color, som vi allerede har sett i det første eksemplet i denne artikkelen. Det er også mulig å sette et bilde som bakgrunn; det gjøres med egenskapen background-image og bildets URL på denne måten:

Nyere CSS gir også mulighet til å generere bakgrunnseffekter ved hjelp av gradientfunksjoner som kan kombineres på mange forskjellige måter. Ressursene under nyttige lenker går mer i dybden på dette.

Boksmodellen

I CSS kan man sette konturer på et element ved hjelp av egenskapen border. I tillegg kan man bestemme hvor mye plass elementet skal ta opp utenfor konturen (margin) og hvor mye plass det skal være mellom konturen og selve innholdet (padding). Dette er det som ofte blir kalt boksmodellen og kan illustreres på følgende måte:

margin

border

padding

Innhold

La oss ta en nærmere titt på hver enkelt av disse egenskapene.

Ytre marg

Margen på utsiden av elementets kontur settes med egenskapen margin, eller mer spesifikt med margin-top, margin-right, margin-bottom og margin-left for henholdsvis topp, høyre side, bunn og venstre side. Disse kan kombineres på én enkelt linje ved å liste dem opp sammen i margin-egenskapen:

I dette tilfellet vil den første verdien bli satt på toppen og de andre i klokkens rekkefølge rundt elementet. Hvis vi også gir <div>-elementet en rød bakgrunn og litt høyde, får vi følgende resultat fra koden over:

En spesiell ting å være klar over når man jobber med slike marger er at topp- og bunnmargen ofte vil overlappe margene til elementene som befinner seg over og under, men ikke alltid. Dette fenomenet er kjent som "margin collapse" og er nok ikke alltid spesielt intuitivt fordi det har så mange unntak. Frontend-eksperten Josh Cameau har skrevet en artikkel som forklarer dette i detalj.

Kontur

Konturen er litt mer avansert enn margene, siden man i tillegg til bredden kan definere både farge og stil. La oss se på et eksempel:

Her sier vi at konturen skal være to piksler bred (border-width: 2px), blå (border-color: blue) og stiplet (border-style: dashed).

Om vi ville spesifisert forskjellige egenskaper på forskjellige sider, kunne vi også gjort det med den samme klokkeregelen som gjelder for margin, eller ved å bruke mer spesifikke egenskaper som border-left-color. Koden over kan for øvrig forenkles ytterligere på denne måten:

Indre marg

Den innvendige margen settes ved hjelp av egenskapen padding. Her er det heldigvis ikke mange overraskelser. Dette fungerer på samme måte som margin, bortsett fra at avstanden settes på innsiden av konturen. Det er også mulig å bruke padding-top osv.

Størrelse

Egenskapene height og width brukes til å sette henholdsvis høyde og bredde. Her er det viktig å være klar over at disse størrelsene som regel refererer til innholdet i boksen, og ekskluderer både marger (innvendige så vel som utvendige) og konturer. Det vil si at hvis man har satt border: 1px, padding: 6px og height: 24px på en boks, vil plassen somer reservert til innholdet ha en høyde på 24 piksler, og den totale høyden som boksen tar opp være dette pluss bredden på margen og konturen både oppe og nede, altså 24 + (6 + 1) ⨯ 2, til sammen 38 piksler.

Grunnen til at det er slik er en egenskap som heter box-sizing. På de fleste elementer settes denne til content-box som standard, og det er dette som definerer at høyde og bredde kun skal omfatte innholdsområdet. Ofte er det imidlertid enklere å definere størrelsen med både border og padding inkludert. Alt man trenger å gjøre da er å sette box-sizing: border-box på elementet. Svært ofte når jeg ser at ting har feil størrelse skyldes det nettopp at man ikke har satt box-sizing til border-box, så det er viktig å ha dette i bakhodet når man jobber med størrelser.

Plassering

Normalt vil elementer plassere seg enten under hverandre eller ved siden av hverandre. Hvorvidt det er det ene eller det andre avhenger av egenskapen display. På de fleste elementer er denne satt til block som standard. Disse elementene vil legge seg under forrige element og ta opp hele bredden av forelderelementet. Andre elementer, som for eksempel lenker, bilder og inndatafelter, har display: inline eller display: inline-block og vil dermed inngå i tekstflyten.

Ønsker man å sette flere blokkelementer ved siden av hverandre, finnes det imidlertid bedre metoder enn å få dem til å flyte med teksten. Tidligere har man brukt egenskapen float til dette, men denne var det kronglete å jobbe med, og i moderne CSS har det kommet mye bedre hjelpemidler. Da sikter jeg til flex og grid. Disse er nokså komplekse, men nettsiden CSS-Tricks har noen veldig gode guider med beskrivende illustrasjoner:

A Complete Guide to Flexbox
A Complete Guide to CSS Grid

Nå er det godt mulig du spør; kan jeg ikke bare bruke <table> i HTML? Og ja, det er nok fullt mulig å oppnå det visuelle resultatet man ønsker med <table>. Før flex ble utbredt, var det også mange som lot seg friste til dette fordi det var mye enklere enn å bruke float. Men dette er misbruk av HTML-elementer. HTML-koden skal i så liten grad som mulig forholde seg til utseendet. Hvis man jukser ved å bruke HTML, blir ikke bare koden uoversiktlig, men man forvirrer også søkemotorer og tilgjengelighetsverktøy. <table> skal kun brukes på faktiske tabeller.

Mediaspørringer

For å kunne gi en tilpasset brukeropplevelse er det ofte nyttig å vite hvor stor skjermen til brukeren er og hvilke personlige innstillinger vedkommende har gjort på sin enhet, slik at man kan stilisere utseendet deretter. Dette kalles responsivt design. Beste praksis er å bruke CSS-egenskaper som automatisk tar høyde for dette. For eksempel kan man bruke egenskapen flex-wrap til å gjøre at et flex-element vil spre seg over flere rader når plassen blir for liten. Noen ganger er det imidlertid ikke så enkelt, og da må man ta i bruk mediaspørringer.

Prøv å endre bredden på denne rammen til under 200 piksler og se hva som skjer:

Så du at elementene stablet seg annerledes? Det er på grunn av en mediaspørring. HTML-koden som brukes her er veldig enkel:

CSS-koden er litt mer kompleks:

Som du kan se, er det et parti som er omfattet av koden @media (width < 200px). Denne koden trer i kraft når vinduet er mindre enn 200 piksler bredt og overstyrer egenskapene som er satt utenfor.

Et annet nyttig bruksområde for mediaspørringer er utskriftsformat. Hvis brukeren ønsker å skrive ut en nettside, kan det være nyttig å gjemme bort ting som ikke er relevante, som for eksempel menyer, slik at de ikke kommer med på utskriften. Til det bruker man spørringen @media print og overstyrer de ønskede egenskapene på samme måte som i eksemplet over.

Variabler

Muligheten til å definere variabler, eller egendefinerte egenskaper, er kanskje den viktigste blant endringene som har ført til et solid oppsving for ren CSS de siste årene. Tidligere har det vært mer vanlig å bruke eksterne Javascript-biblioteker til å dekke manglende funksjonalitet i CSS.

En variabel er en verdi som er satt ett sted og tatt i bruk andre steder ved å peke på variabelnavnet. En variabel defineres på samme måte som en egenskap, men den må starte med to bindestreker. Deretter kan den tas i bruk på samme element hvor den er definert og alle underelementer ved å bruke funskjonen var:

Her vil elementene med klassene boks1 og boks2 få grønn bakgrunn hvis de befinner seg inne i et element med klassen hovedelement, fordi variabelen --boksfarge er satt til green på dette elementet.

Vær oppmerksom på at variabler gjelder innenfor en gitt selektor. De kan derfor ikke brukes i mediaspørringer, siden disse defineres på et nivå over selektorene.

Alternative knytningsmetoder

I alle eksemplene i denne artikkelen har jeg tatt utgangspunkt i at CSS-koden ligger i en egen fil, som beskrevet under punktet hvordan sette det opp. Det er imidlertid også mulig å plassere koden i samme fil, enten i <head>-elementet, eller direkte på elementene den gjelder for ved hjelp av attributtet style.

I hodeelementet

La oss se på det første eksemplet igjen:

I stedet for å bruke <link> til å henvise til en CSS-fil, kan hele filens innhold plasseres i <style>-elementet:

Direkte på elementet

Ved hjelp av attributtet style kan man sette stilegenskaper direkte på elementet det gjelder. I dette tilfellet er det naturlig nok ikke nødvendig med selektorer. Her er et eksempel:

Når skal jeg bruke hva?

I de aller fleste tilfeller vil mange utviklere, meg selv inkludert, være enige om at løsningen med egen fil er den beste. Det skaper ryddig kode fordi man ikke bare separerer ulike roller, men også forskjellige kodespråk. I tillegg får man gjenbrukbar kode fordi man kan referere til den samme filen flere steder. Tilhengere av de andre metodene vil argumentere for at det er lettere å jobbe med koden når alt er samlet i én fil. Uansett hvilken metode du går for, bruk den samme overalt så langt det lar seg gjøre. Det er mye lettere å finne frem i koden når man følger de samme reglene overalt.

Når jeg selv bruker en av metodene med CSS og HTML i samme fil, er det på grunn av begrensninger som gjør det nødvendig. For eksempel kan man ha behov for avanserte effekter hvor man trenger hjelp fra Javascript, og da må man bruke style-attributtet.

Nyttige lenker

MDNs CSS-oversikt
W3schools' CSS-oversikt
W3Cs offisielle CSS-sider

Veien videre

Vi har nå sett på hvordan man kan bruke grunnleggende CSS til å bestemme hvordan en nettside skrevet i HTML kan se ut. Det jeg har gått gjennom i denne artikkelen er bare en brøkdel av alle mulighetene CSS gir, og listen over egenskaper blir stadig lengre. Jeg vil anbefale å ta en kikk på nettstedene under nyttige lenker for å få en bedre oversikt over alt man kan gjøre. CSS er for øvrig ikke begrenset til HTML, men kan også brukes sammen med andre markeringsspråk, som XML. For eksempel kan det brukes til å stilisere RSS-meldinger.

Med HTML kan man bestemme hva man skal vise på en nettside, og med CSS kan man bestemme hvordan det skal vises. Disse verktøyene alene kan være nok til å lage fullt fungerende nettsider som lever opp til dagens standard. Men ofte trenger man noe mer, nemlig en mulighet til å gjøre innholdet dynamisk. Nettsiden må kunne respondere på brukerens handlinger. Hva skal for eksempel skje når brukeren klikker på en knapp?

Det er her Javascript kommer inn i bildet. Det er et skriptspråk som kan kjøres i nettleseren og som blir stadig mer utbredt. Ved hjelp av Javascript kan man utløse modifikasjoner på siden basert på handlinger brukeren gjør. Neste artikkel vil derfor gi en introduksjon til Javascript.

Denne artikkelen inngår i serien Introduksjon til utvikling av nettsider.

Forrige: Hvordan komme i gang med utvikling av nettsider

Neste: Introduksjon til Javascript