CSS: En introduksjon
En viktig ingrediens for å lage fine hjemmesider i henhold til webstandardene er CSS. Et av hovedpoengene ved å kode i tråd med standardene er å skille innhold, funksjonalitet og presentasjon, og det er for presentasjonen CSS kommer inn i bildet. I stedet for å gjøre introduksjonen til webstandarder enda lengre, valgte jeg å skrive et eget innlegg der jeg gir en introduksjon av hva CSS er og hvordan det skal brukes.
Hva er CSS?
CSS står for “Cascading Style Sheets”, som direkte oversatt til norsk betyr “rennende/fossende stilark”. Dette er navnet på et programmeringsspråk som brukes for å angi presentasjonen av hjemmesider (og et par andre typer dokumenter).
Stilsett har faktisk eksistert siden 70-tallet, om enn ikke i den formen vi kjenner dem i dag. Faktisk eksisterte det etterhvert et mylder av stilsett, og ulike nettleserprodusenter fant opp ulike kommandoer for å formatere innhold i sine nettlesere. Tidlig på nittitallet tok norske Håkon Wium Lie tak i kaoset, og sammen med nederlandske Bert Bos gikk han i gang med å samle alle elementene fra de ulike stilspråkene i ett språk. I 1995 presenterte de sitt første felles forslag til det som skulle danne grunnlaget for dagens CSS. Omtrent samtidig så World Wide Web Consortium (W3C) dagens lys, og det ble nedsatt en egen undergruppe for å arbeide frem en komplett anbefaling for bruk av CSS. Videreutviklingen av CSS blir fortsatt utført av denne arbeidsgruppen som er underlagt W3C.
Mot slutten av 1996 var den første delen av arbeidet ferdig, og de første offisielle anbefalingene for CSS (nivå1) ble presentert. Men denne første versjonen dekket ikke alle ønskede behov, og CSS ble videreutviklet med flere funksjoner. Et forslag til en mer omfattende versjon av CSS, såkalt level 2 eller nivå 2, ble lansert mot slutten av 1997, og ble presentert som en offisiell anbefaling i mai 1998. Det jobbes med en ny oppdatering av CSS, og du kan følge utviklingen av CSS3 på W3Cs (ikke spesielt lekre) sider.
Det er viktig å påpeke at selv om W3C utvikler CSS, så er det ikke slik at det automatisk virker så snart de har bestemt at noe skal defineres sånn og slik. W3C kommer med anbefalinger til hvordan CSS bør skrives av programmerere og leses av nettlesere, og så er det opp til nettleserprodusentene å etterstrebe at browseren klarer å tolke kommandoene riktig. Faktisk er det lite trolig at vi får oppleve at alle (de store) nettleserne vil forstå all CSS, og ikke minst: at de vil tolke det likt.
Hva brukes CSS til?
CSS kan (og bør!) brukes for å angi skrifttype og skriftstørrelse, linjeavstand og marger, farge på tekst og bakgrunner, rammer på bokser og bilder - ja, alt som har å gjøre med hvordan innholdet blir presentert. La oss ta et eksempel:
#meny {width: 200px;font-family: arial, helvetica, sans-serif;font-size: 11px;color: white;background-color: #000000;border: 1px solid red;}
Her beskriver vi hvordan elementet “meny” skal se ut. Det skal være 200 piksler bredt. Dersom brukeren har skrifttypen Arial installert, skal den brukes på tekst. Hvis ikke skal nettleseren forsøke å bruke fonten Helvetica - eller i verste fall maskinens standardversjon av denne skriftfamilien. Teksten skal være 11 piksler høy og hvit, bakgrunnen skal være svart (angitt med hexadesimaler), og menyen skal ha en én piksel bred ramme.
CSS kan også brukes til å posisjonere elementer på hjemmesiden, og bør i aller høyeste grad benyttes fremfor tabellene webutviklere har sverget til gjennom Internettets barndom.
Ordet “cascading” betyr altså å renne eller å fosse, og beskriver i naturen hvordan vann fosser nedover fra platå til platå i et fossefall. På samme måte beskriver det i CSS hvordan en spesifikasjon som er angitt øverst i stilarket fosser nedover og gjelder for alle tilsvarende forekomster nedover i stilarket - til den møter på en hindring i form av en spesifikasjon som overstyrer og preger “fossens” videre ferd. La oss si at man i toppen av stilarket skriver at teksten skal være rød. Da vil all tekst bli rød. Om man så definerer lenger ned at overskrifter skal være blå, vil alle overskrifter bli blå, mens annen tekst (som vi ikke har overstyrt) vil forbli rød. For å se det for deg, kan du jo forestille at man kaster masse rød og blå maling i en foss - det vil være synlig nedover i fossen og gi farge til alt vannet passerer. I eksemplet over vil all tekst være hvit, uavhengig av om det er overskrifter eller brødtekst - med mindre man angir noe annet senere i stilarket.
Hvordan bruke (og ikke bruke) CSS?
Tidligere var det mest vanlig å angi css-egenskaper direkte i HTML-koden, og selv om dette ikke er en anbefalt metode, fortsetter dessverre mange å gjøre det slik:
<td style="color: #123456; text-align: center"> Hallo! </td>
Dette kalles “inline css”, og er forsåvidt en lovlig praksis. Men et av hovedpoengene med å bruke CSS er jo nettopp å skille innhold og presentasjon, og ved å skrive inline CSS gjør man jo ikke det. Dersom man senere vil endre feks. skriftfarge, blir man nødt til å navigere seg gjennom hele dokumentet (eller enda verre: alle dokumentene!) og lokalisere alle stilangivelsene. Jeg vil derfor anbefale at man ikke bruker denne metoden for å angi stil-egenskaper.
En annen metode er å angi CSS-verdiene øverst i HTML-dokumentet, innenfor <head>-delen. Her definerer man egenskapene for alle elementene på siden:
. . .<style type="text/css">body {font-size: 1em; color: #fff; background: #000;}h1, h2 {color: #fc0; text-decoration: underline;}a:link, a:visited {font-weight: bold; text-decoration: none;}a:hover {text-decoration: underline;}<style></head><body>. . .
Dette kan være en hensiktsmessig fremgangsmåte dersom du kun skal lage én side. Selv bruker jeg ofte dette som en foreløpig metode når jeg begynner å skissere en side. Men - det er ingen særlig praktisk metode dersom man har flere sider som er stilet etter samme mal, for igjen: dersom man senere vil gjøre endringer, er man nødt til å åpne hvert enkelt dokument og foreta de samme endringen på samtlige sider. Så hvordan kan man gjøre det mer effektivt? Jo, ved å bruke et eksternt stilark.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//NO""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Min hjemmeside</title><link rel="stylesheet" type="text/css" href="stilark.css" /></head><body>. . .
Her har vi lagt stil-informasjonen i en egen fil (stilark.css), og ber nettleseren referere til denne filen for å finne ut hvordan den skal presentere innholdet. Dermed ligger alle stilkommandoene på ett sted, og vi trenger bare å gjøre eventuelle endringer i denne ene filen. På denne måten har vi også ivaretatt intensjonen om å skille innhold og presentasjon.
Mer informasjon følger..
Det er mye mer som kan sies (og for den saks skyld: har blitt sagt) om CSS, ikke minst når det gjelder hvordan man skriver CSS-kode. Og nå som jeg har unnagjort denne traurige introduksjonen har jeg planer om å gå mer i detalj og etterhvert komme med mer konkrete tips i forhold til CSS og webstandarder.
