Tilbake til meny for Informatikk studieretningsfag

CSS - en kort innføring

hva er CSS?

hva er CSS? Dette er en forkortelse for Cascading style Sheets. CSS er en utvidelse av HTML-standarden, laget for at man lettere kan formatere et dokument eller en gruppe med dokumenter.

En norsk oversettelse kunne bli: Kaskadevise StilArk (eller StilSett).

Stil-prinsippet likner det tilsvarende prinsippet som er kjent fra tekstbehandling (Word f eks), med stiler og maler. Man kan lage en stil med et bestemt utseende osv, gi denne et navn, og bruke den flere ganger i samme eller andre dokument(er). (Kaskade-begrepet kommer vi ikke inn på her.)

La oss anta at vi ville sørge for at alle overskrifter på et visst nivå skulle ha skrifttypen "Bookman Old style", ha skriftstørrelsen 28pt (punkter), være kursiv, ha et innrykk på 2 tegn, toppmarg på 2 tegn og bunnmarg på 1.5 tegn. Og at den alltid skal ha dette utseendet! Med tradisjonell HTML blir dette problematisk. Skrifttyper og størrelser kan legges inn for hver eneste overskrift ved hjelp av font-taggen. Innrykk er vanskelig å få til, topp- og bunnmarger går ikke. Med CSS, stiler, kan man enkelt definere en stil som gir ønsket formatering, og så enkelt anvende den hver gang det er nødvendig. I tillegg til økt kontroll, gir dette også svært mye større fleksibilitet. Tenk deg at du etter en tid er lei av denne formateringen, du vil skifte skrifttype, endre innrykk osv. Da er det med CSS-stiler nok å gjøre denne endringen ett sted: I selve stilen. Alle tilsvarende anvendelser av stilen vil da automatisk få den nye formateringen.

Plassering av stilark

Stilene kan angis enten innebygget (dvs plassert i en egen gruppe i samme dokumentet), lenket/importert (plassert i en egen fil, eksternt), eller som attributter plassert ut i de enkelte elementer (tagger) i teksten.

Stilene plasseres etter denne metoden mellom tagger, som det meste i HTML-standarden. Disse taggene må plasseres i head-seksjonen (altså ikke i body). Her er tagg-settet som skal omslutte stilene:

<style type="text/css">  </style>

Det er altså et vanlig tagg-par, <style> ... </style>, men imellom disse har vi også plassert en tagg som angir en kommentar: . Denne kommentar-taggen er nødvendig for å unnå feilmeldinger og for å unngå at eldre nettlesere viser stilene som tekst.

hvis du vil bruke det samme stilarket i flere dokumenter er det en fordel å plassere stilarket i en egen fil. I denne filen skal du da skrive inn stilene (uten hverken <style>-tagg eller kommentar-tagg eller andre tagger). Filen bør ha et navn som slutter på .css. Filen lenkes så til dokumentet hvor stilene skal ha sin virkning med en spesiell tagg som settes inn i <head>-seksjonen. Denne taggen kan se slik ut:
<link rel=stylesheet href="minstil.css" type="text/css">
hvor filnavnet etter href angir filen som inneholder stilene (her er filen kalt minstil.css).

En tredje metode for å benytte stilark er å angi stilen direkte i den angjeldende taggen. Stilen får da virkning kun i den taggen hvor den plasseres. Her er et eksempel på bruk av en stil i en enkelt tagg: <p style="color: green;">.

En fjerde måte er å importere stilarket i stedet for å linke det slik som ovenfor. Vi går ikke inn på denne metoden her.

De ulike måtene å benytte stilark på kan også kombineres. F.eks. kan man linke til et stilark som vist ovenfor, og deretter legge inn lokale stiler i den ene html-filen. De lokale stilene vil da overstyre de som ligger i den linkete filen, hvis samme tagg er gitt ulike stiler de to stedene.

Prinsipper for stiler

Det er i utgangspunktet to hovedprinsipper for stiler:

En eksisterende tagg gis (nye) egenskaper etter behov.
Man konstruerer en egendefinert klasse (class) av egenskaper som så brukes til å modifisere (forandre) eksisterende tagger.

hvis man gir en eksisterende tagg en ny egenskap, så vil altså alle anvendelser av denne taggen i dokumentet føre til at denne egenskapen blir benyttet. Hvis vi f eks sier at avsnitts-taggen, <P>, skal ha 10% venstremarg, skrifttypen Arial og skriftstørrelsen 11pt, så vil alle avsnitt hvor denne taggen benyttes få denne margen, denne skrifttypen og -størrelsen.

hvis man velger å definere en ny klasse (class), så må derimot denne klassen oppgis hver gang man ønsker denne klassens formatering.

Knytte stiler til en tagg

For å knytte stiler til en tagg, benyttes følgende syntaks (skrivemåte):

p { font-family: Arial; font-size: medium; margin-left: 10%; }

Vi skriver altså først taggens navn (uten <>). Deretter følger to klammeparenteser med formateringen plassert i mellom disse. Formateringen angis ved navnet på formateringstypen (f eks font-family, som angir skrifttypen), deretter kolon, deretter den verdien man velger (f eks Arial), og tilslutt semikolon. En rekke slike formateringer kan da angis fortløpende, inntil det hele avsluttes med den avsluttende klammeparentesen.

I denne omgang nevnes følgende formateringer:

font-family: angir en vanlig skrifttype, f eks font-family: Arial;, font-family: "Times New Roman";, "Courier New", m fl. Legg merke til at skrifttyper bestående av flere ord må skrives i anførselstegn.
font-size: Skriftens størrelse kan angis bl a med størrelsesangivelser, som medium, x-small, xx-large, i punkter pt, f eks font-size: 24pt; og i prosent, %, f eks font-size: 120%;.
font-weight: velg mellom: bold eller normal.
font-style: velg mellom: italic eller normal.
margin-left: venstre marg. Kan angis i prosent, f eks 8%, eller i tegn-enheter, f eks 2em, dvs 2 tegns bredde.
margin-right: tilsvarer margin-left.
margin-top
margin-bottom
color: angir tekst- og annen forgrunnsfarge.
background-color: angir bakgrunnsfarge.
text-align: angir tekstens justering innenfor elementet. Denne kan være én av følgende: left, right, center, justify.

Legg merke til at alle elementer kan gis bakgrunnsfarge, men resultatet kan variere noe fra nettleser til nettleser. Farger kan angis med fargens navn (f eks red, yellow, black) for noen fargers vedkommende. Eller man kan angi fargens verdi som et sammensatt hexadesimalt tall (f eks #DD0000), hvor de to første sifrene angir verdien av rødt (00 - ikke noe rødt, FF - maksimalt rødt) det to midterste angir grønt og de to siste angir blått. Farger kan også angis med uttrykket rgb( ... ), hvor man i parentesen angir den prosentvise metningen av hver av de tre fargekomponentene, rødt, grønt og blått (f eks rgb(0%,60%,80%), som gir en blågrønn farge).

her følger et eksempel på et stilark med et par enkle stiler.

<style type="text/css">  </style>

Dette stilarket gir tekst som er i avsnitt (p) størrelsen 11 punkter. Det gir også alle overskrifter av typen h2 rød farge og en venstremarg på 2 tegns bredde.

Oppgave 1
Velg en av dine .htm-filer med en del tekst og overskrifter på nivåene 1, 2 og 3 (h1, h2 og h3). Legg inn style-taggene i head-seksjonen. Lag så følgende stiler:

(Pass på å bruke punktum som desimal-skilletegn i stiler. Altså: 1.5 men ikke 1,5. Det skal heller ikke være mellomrom mellom tall og verdiangivelsen som følger, altså 12pt, ikke 12 pt.)

Vanlig avsnitt (p) skal ha skrifttypen Arial, 11 punkter, 8% høyre og venstre marger, 1.5 tegns bred toppmarg.

Overskrift 1 (h1) skal ha skrifttypen "Bookman Old style" (pass på å få med anførselstegnene), 28 punkter, 3 tegn venstremarg, 1 tegn toppmarg, 0.4 tegn bunnmarg.

Overskrift 2 (h2) skal ha skrifttypen "Times New Roman", 20 punkter, 2 tegn venstremarg, 2 tegn toppmarg, 1 tegn bunnmarg, fet skrift.

Overskrift 3 (h3) skal ha skrifttypen Arial, 18 punkter, 2 tegn toppmarg, 1.5 tegn bunnmarg, kursiv.

Når du har angitt disse stilene kan du kontrollere utseendet på dokumentet ditt. Foreta så en enkelt endring: Sett skrifttypen for p til "Bookman Old style". Kontroller nå resultatet.

Velg tilslutt en skrifttype for vanlige avsnitt som du selv synes er fin og lett å lese.

Oppgave 2
Nå skal du gjøre et par tilføyelser:

Velg selv en bakgrunnsfarge for hele dokumentet (body), men velg en nokså lys farge. (Alle tre hexadesimale verdier relativt høye). Velg forgrunnsfarge sort (#000000). Velg selv nye forgrunnsfarger for de ulike overskriftene, men velg farger som likner bakgrunnsfargen men som er en god del mørkere (lavere tallverdier).

Kontroller resultatet. Gjør deretter følgende forandringer:

Sett nå helt nye forgrunns- og bakgrunnsfarger på alle overskriftene, f eks mørk blå bakgrunn (#000099), hvit forgrunn (#FFFFFF).

Kontrollér resultatet.

De som forsker i leselighet og oppfattelsesevne anbefaler at man alltid bruker mørk skrift på lys bakgrunn, og ikke motsatt! Vær også forsiktig med å kombinere komplementærfarger, slik som rødt og grønt, gult og fiolett. Disse kombinasjonene vil lett flimre for øynene og kan ofte være ubehagelige eller vanskelige å lese.

Anvende egendefinerte klasser (class)

Ofte vil man angi en stil som ikke skal brukes alltid, men bare på utvalgte steder i dokumentet. Det kan også være at man vil angi et bestemt utseende på en del av teksten som ikke naturlig avgrenses av en eksisterende tagg. Da er det greit å anvende egendefinerte klasser. Disse angis mellom style-taggene på omtrent samme måte som ovenfor:

.min-tekst { color: #909000; background-color: #000000; font-weight: bold; font-family: Arial; }

Klassen angis med et selvvalgt navn, her min-tekst, og innledes med punktum. Deretter formatene innenfor klammeparentes på samme måte som ovenfor.

Når klassen skal anvendes, angir man dette inne i en eksisterende tagg. F eks slik:

<p class="min-tekst"> ... </p>

(Legg merke til at her brukes ikke punktummet.)

Oppgave 3:
Lag følgende tre nye klasser:

viktig - gul tekst, sort bakgrunn, uthevet, arial
fare - rød tekst, mørk blå bakgrunn, kursiv, Arial
forfatter - blå tekst, lys gul bakgrunn, kursiv, "Times New Roman", 10pt

Anvend disse selv, de første på et par steder hver, i teksten, den tredje på ditt eget navn der det måtte stå i teksten.

Egendefinerte inndelinger

Det hender man har behov for å angi formatering på en del av dokumentet som ikke naturlig lar seg avgrense ved hjelp av de vanlige HTML-taggene. I slike tilfeller finnes det to "nøytrale" tagger som kan benyttes for å angi et område.

<div> ... </div>

div - forkortelse for division, eller del, vil avgrense et rektangulært område av dokumentet. Inne i dette kan man da ha avsnitt, overskrifter, bilder osv.

<span> ... </span>

span - omfang, vil avgrense en sammenhengde del av dokumentet (normalt tekst). span brukes inne i avsnitt osv, og får uten bruk av class ingen synlig virkning.

Ved å bruke div og/eller span på ulike deler av teksten, sammen med egendefinert klasser (class), kan man gi disse delene det ønskede format/utseende.

Oppgave 4:
Lag følgende to klasser:

OV1 - Skrifttype "Times New Roman", størrelse 100pt, farge lys grå (#ccccdd), toppmarg 10pt og sentrert (text-align: center).
OV2 - Skrifttype "Courier New", størrelse 36pt, farge mørk blå (#000066), toppmarg -84pt (altså en negativ verdi!), bunnmarg 80pt, sentrert, kursiv og fet.
Sørg også for at body har bakgrunnsfargen rgb(0%,60%,80%)
Legg inn følgende i teksten din:

<div class="OV1">SALG</div>
<div class="OV2">Sylteagurk kr 19.90</div>

Studér resultatet! Man kan altså flytte elementer rundt på siden, bl a ved å bruke negative verdier for marger.

Benytt også span-taggen på steder du finner det passende, med en eller flere ulike klasser du selv bestemmer.

Benytt div-taggen sammen med egendefinerte klasser til å lage ulik bakgrunnsfarge på ulike deler av dokumentet ditt.

Noen formateringsmuligheter og deres verdier

her følger en liste over noen av de vanligste formateringsmulighetene, og hvilke verdier som kan brukes. Denne web-siten omfatter også en systematisk oversikt over de ulike egenskapene. Ingen av disse er komplette lister, det kan du finne andre steder. (Se lenkelisten nederst.) Til slutt er det noen flere oppgaver.

font-family: angir en vanlig skrifttype, f eks Arial, "Times New Roman", "Courier New", m fl. Legg merke til at skrifttyper bestående av flere ord må skrives i anførselstegn.
font-size: kan angis i punkter pt, f eks 24pt, i prosent (%), f eks 120%, i pixeler px, f eks 20px, eller i navngitte størrelser, f eks small, x-small, large, xx-large, medium osv.
font-weight: angir skriftens "vekt", fet eller normal (eller grader). Verdier: bold eller normal, evt bolder eller lighter.
font-style: angir om teksten skal være kursiv. Verdier: italic eller normal
margin-left: angir marg utenfor elementet. Denne kan angis i prosent, f eks 7%, i tegn-enheter, em f eks 2em, dvs 2 tegns bredde, eller i punkter pt, eller pixeler px, slik som ved font-size. Verdiene for margin kan være negative, det resulterer i at elementet blir flyttet.
margin-right: på samme måte som margin-left
margin-top
margin-bottom
color: tekst- og annen forgrunnsfarge. Kan angis som hexadesimale verdier: #ffcc99, som fargenavn (for noen farger): black, green, eller som rgb-verdier: rgb(10%,20%,10%) hvor prosentene angir metning av henholdsvis rødt, grønt og blått.
background-color: bakgrunnsfarge, angis på samme måte som forgrunnsfarge. Det er en god praksis å angi både for- og bakgrunnsfarge for elementer.
text-align: angir tekstens plassering innenfor elementet. Kan være én av: left, right, center, justify.
background-image: URL(" ... "): her oppgis filnavnet til en grafikk- eller bilde-fil. Nytt er at de fleste elementer kan ha et bakgrunnsbilde, ikke bare body. Men: forsiktig med størrelsen på bildefiler, og sørg alltid for god leselighet!
background-repeat: angir om og hvordan bakgrunnsbildet skal gjentas. Verdiene er: repeat, repeat-x (gjentas bare vannrett), repeat-y (gjentas bare loddrett), no-repeat (gjentas ikke).
text-indent: angir innrykk av første linje av et element. Bruk samme størrelser som for margin-left.
padding-left: angir "luft" inni elementet. Samme størrelser som for margin-left. Det er padding- tilsvarende for right, top og bottom. Verdiene for padding kan ikke være negative.
border-width: Man kan angi en ramme rundt de fleste elementer. Dette angir rammens tykkelse. Man kan bruke en størrelse i pixeler (f eks 5px), eller termene thin, medium, thick.
border-color: dette angir rammens farge, på samme måte som farger ovenfor.
border-style: angir ulik stil på rammen. Velg mellom: none, dotted, dashed, solid, double, groove, ridge, inset og outset.

Oppgave 5:
Lag innrykk på tre tegns bredde som standard for alle avsnitt i teksten din.

Lag to avsnitt med ramme rundt. Det ene avsnittet skal ha rammen groove, lys grønn, 3 i tykkelse. Den andre velger du selv utseende på.

Lag en seksjon (div) med en selvvalgt ramme rundt og med et bakgrunnsbilde som bare gjentas loddrett.

CSS på internett

her er lenker til noen internettressurser omkring bruk av CSS-standarden.

CSS Frequently Asked Questions: En grei innføring med forklaring av vanlige spørsmål. På engelsk.
CSS Recommended Specification: Komplett oversikt over CSS-standarden fra W3C Web Consortium. Anbefales!
W3C CSS Validation Service: her kan du kontrollere dine stilark for feil og svakheter. På engelsk.
Web style Sheets: W3C Web Consortium sin hovedside om stilark. Mange nyttige lenker for den som vil lære om CSS.

Meny for IKT-fag | Toppen av siden