Hva er CSS?

Tilbake til kompetanseguidens hovedside

CSS er et av de grunnleggende språkene for å bygge opp nettsider, og er det som brukes for å bestemme utseendet på sidene. CSS utgjør sammen med HTML og Javascript frontend-språkene.

Håkon Wium Lie er selve mannen bak CSS. Han lanserte den første versjonen i 1994, mens han jobbet med oppfinneren av World Wide Web, Tim Berners-Lee. Det finnes med andre ord ingen bedre til å fortelle oss litt mer om CSS.

Hva er det overordnede bruksområdet for CSS i 2020?

CSS er, sammen med HTML og Javascript, en av grunnpilarene som vebben er bygd på. Oppå disse grunnpilarene finner vi så rammeverk for å lage vebbsider og vebbapplikasjoner.

CSS håndterer typografi, farger, layout, og animasjoner. Rammeverkene kommer typisk med CSS-kode som gir sidene og applikasjonene en grei visuell utforming. Men dersom du ønsker din egen visuelle utforming (og det ønsker du) må du skrive din egen CSS-kode. Så det er lurt å lære seg litt CSS dersom man planlegger å tilbringe tid på vebben.

Hva er fordelen med CSS?

CSS er et enkelt språk å lære, og man trenger ikke være programmerer for å skrive CSS-stilsett. Et stilsett en samling av setninger som uttrykker noe om hvordan HTML-kode skal vises på skjermen. Her er en typisk setning:

h1 { font-size: 18px }

De fleste som leser dette vil vite at «h1» er HTML-element, at fonter har størrelser, og at «18px» betyr 18 piksler. Og jeg tipper de fleste leserne også vil forstå hvordan man setter font-størrelse for andre HTML-elementer, eller hvordan størrelsen kan økes eller minkes.

Hva er ulempene eller begrensningene?Siden CSS ikke er et programmeringsspråk vil det være ting som ikke kan håndteres. I starten, dvs. på 1990-tallet, hadde ikke CSS animasjoner. I stedet måtte man bruke Javascript for f.eks. å endre farger når man svever over et HTML-element. Siden dette er noe mange ønsket seg ble det tatt inn i CSS. Nå kan man skrive CSS-kode som er lett forståelig:

a { color: blue }

a:hover { color: red }

Selv om CSS utvikler seg og stadig lærer nye triks vil det alltid være ting du må programmere for å få til. Men så lenge man kan gjøre omkring 95 % i CSS, er jeg fornøyd.

Hva er typisk å utvikle med CSS, og hvilke teknologier er vanlig å bruke for å oppnå det?CSS brukes oftest til å lage vebbsider og vebbapplikasjoner, men stadig flere bøker produseres også med CSS. For å lage bøker bruker man mye av den samme koden som på skjerm, men man trenger ekstra kode for å beskrive sidenummer, sideskift, fotnoter og slikt.

For meg gir det mening å produsere bøker på denne måten – HTML er et åpent format som kan lager all verdens bøker, og CSS kan brukes for å beskrive ulike presentasjoner for skjerm og papir. Jeg tror vi fortsatt kommer til å ønske oss bøker på papir. Det er noe spesielt med papir.

Hva er kjente eksempler på populære programmer, nettsider eller funksjoner som er utviklet med CSS?Alle nettsider bruker CSS. Nesten alle. Du finner sikkert noen som ikke gjør det, som bare bruker HTML. Det er også greit, men da har nettleseren innebygd CSS-kode som bestemmer utformingen av dokumentet.

Hvilke teknologier eller verktøy er det viktig å mestre for å utnytte potensialet i CSS?Du trenger egentlig bare en tekst-editor, en nettleser, og litt kjennskap til HTML for å starte med CSS.

For å mestre CSS må du ha en dypere forståelse av typografi og utfordringene som oppstår når du skal presentere samme informasjon på flater med forskjellig størrelse. Mobiltelefoner og PC-skjermer er to eksempler.

Hvilke språk ligner, eller er nært knyttet til CSS?Dette kan jeg skrive mye om. Jeg har faktisk skrevet en hel doktorgradsoppgave om hvordan CSS ble utviklet, og hvilke andre alternativer man hadde.

CSS lånte også syntaks fra andre språk. Selv var jeg lenge C-programmerer, og syntaks for kommentarer kom derfra. Her er et eksempel:

h2 { font-size: 18px } /* overskrifter skal være røde */

Fra FOSI lånte vi måten tall og to bokstaver blir til en verdi (f.eks. «18px»), og fra DSSSL hentet vi måten å navngi egenskaper («properties») på, med bindestrek mellom familie og funksjon (f.eks., «font» og «size» blir til «font-size»).

Men selv om syntaks delvis er lånt fra andre steder, har CSS mange unike egenskaper. Kaskaden (som heter «Cascading» på engelsk) gjør det mulig å skrive små stilsett som kombineres med stilsettet som nettleseren allerede har.

Pseudo-klasser og pseudo-elementer gjør det mulig å hente informasjon fra andre steder enn dokumentstrukturen. Og med framkompatibel parsing («forward-compatible parsing») kunne vi legge til nye egenskaper uten å ødelegge for eksisterende CSS-implementasjoner.

Hvordan er vanskelighetsgraden og læringskurven? Hvilke forkunnskaper er det en eventuelt en fordel å ha?Å komme i gang er svært enkelt dersom du kan litt om HTML og vet hva en font er. Vi har prøvd å bruke terminologi fra trykkekunsten, og flere av funksjonene i CSS ble utviklet av Gutenberg selv. Det var han som oppfant rett høyremarg, som enkelt oppnås i CSS med «text-align: justify».

Det kan også være greit å kunne litt data. For eksempel bør en vite hva RGB betyr og hvordan man skriver heksadesimale tall for å uttrykke farger. Det finnes også andre måter å skrive farger på, men dersom du skal lese andres kode kommer du sikkert borti RGB-verdier skrevet med heksadesimale tall. Det vil du klare.

Kan du si noe om utviklingen og forhistorien til CSS?Så lenge jeg kan huske har jeg likt bøker og vært interessert i typografi, også før jeg kjente ordet. I 1988 begynte jeg i jobb på Teledirektoratets Forskningsavdeling på Kjeller. Der fikk jeg er Sun 3/50-arbeidsstasjon med Unix og Framemaker, en tekstbehandler med mye attåt. Framemaker lærte meg mye om dokumenter og typografi, og man kan finne spor av Framemaker i CSS, f.eks. at vertikale marginer kollapser automatisk.

I 1994 publiserte jeg første utkast til CSS-spesifikasjonen. Det kom raskt flere til som ville hjelpe. Særlig ble Bert Bos viktig, han hadde bakgrunn fra TeX, et legendarisk formateringssystem som ble utviklet av supernerden Donald Knuth.

(Mange supernerder er interessert i Bach og pipeorgel. Donald Knuth har fått bygd et eget orgel hjemme hos seg selv. Det har ikke jeg, men jeg har et orgelbyggerverksted i Fredrikstad. Pipeorgel var de mest komplekse maskinene mennesker laget før automatiske telefonsentraler kom.)

Sammen med Bert jobbet jeg på CSS-spesifikasjonene i flere tiår. Men spesifikasjoner alene er ikke nok. Man trenger også implementasjoner. Så mye av min tid ble brukt til å overbevise Netscape og Microsoft om at CSS må støttes, og støttes på en god måte. Egentlig hadde de ikke tid til å høre på meg, de ville helst overta eierskapet til vebben alene.

Men så skjedde to ting: Opera Software i Oslo lanserte en nettleser som støttet CSS langt bedre enn Netscape og Microsoft. Geir Ivarsøy hadde faktisk lest spesifikasjonen! Det gjorde at jeg ville jobbe med ham for å gjøre CSS, Opera og vebben enda bedre, og jeg flyttet hjem til Oslo i 1999 og ble CTO i Opera.

Den andre tingen var at brukere og designere gjorde opprør mot dårlig CSS-støtte i nettlesere. Særlig var Microsofts Internet Explorer ille, og noen av oss skrev en testside, kjent som Acid2, for å vise hvor fryktelig det var. Acid2 eksponerte feil i alle nettlesere, og dette var derfor en måte å rydde i alle leire, men mest hos Microsoft. Det tok dem et par år, men IE8 klarte Acid2-testen, og etter det ble det enklere å skrive CSS.

Hvilke råd kan du gi til en som ønsker å lære seg CSS?Dersom du vil lære CSS ville jeg begynt enkelt, med håndskrevet HTML- og CSS-kode. Finn en tekst du liker, f.eks. en bok, avisartikkel, eller en statisk vebbside, og prøv å etterligne utseendet. Bruk gjerne vebbfonter – du finner et rikt utvalg av gratis-fonter hos Google Fonts.