Dataporten.net

hjelper deg på nettet

Innføring i CSS

by · 21/04/2015

css

CSS er et språk som brukes til å definere utseende i nettsider. HTML definere strukturen, mens CSS definerer utseendet. CSS defineres for hvert HTML-element, og uten HTML-koder gir ikke CSS noen mening. Her får du innførng i CSS, og vi gir deg tips om nyttige verktøy og nettsider.

Cascading Style Sheets

CSS (stilark på norsk) er en forkortelse for Cascading Style Sheets, og det er et sett av regler som definerer stil for hvert HTML-element. CSS er ikke en del av HTML, og har derfor ingen betydning isolert sett. En CSS-kode må vise til et HTML-element for å gi mening. Ordet «Cascading» refererer til ulike måter CSS kan brukes til å endre nettside, det vil si man kan bruke intern CSS-kode eller en ekstern CSS-fil.

Historikk

Før 1996 fantes ikke noen CSS – nettleserne definerte sine egne stiler for nettsider, og det tok også tid før nettleserne begynte å følge standarder. På 90-tallet hadde nettleserne gjerne sine egne funksjoner, helt uten tanke på noen standarder.

Det var først rundt 2004 at nettleserne begynte å følge CSS-standarden, men ingen av dagens nettlesere støtter CSS 2.0 hundre prosent.

Slik har utviklingen vært for CSS:

  • 1996 – CSS 1.0.
  • 1998 – CSS 2.0.
  • 2004 – W3C lager en skisse for CSS 2.1.
  • 2007 – W3C trekker tilbake skissen for CSS 2.1.
  • 2011 – W3C anbefaler en ny CSS 2.1.
  • 2011 – W3C anbefaler første modul av CSS 3.0.

CSS 3.0 er delt opp i flere moduler – de første modulene ble klare som anbefalinger i 2011. Offisielt kalles ikke standarden lenger «CSS 3.0», men har ulike navn etter hvilken modul det dreier seg om.

Forklaring på hvorfor W3C først lager en skisse for CSS 2.1 i 2004, og så trekker denne tilbake, for deretter å anbefale en ny CSS 2.1, er at det skjer store endringer på web i disse årene. Nye teknologier utvikler seg meget fort, og stadig nye funksjoner dukker opp, spesielt innen lyd og video, nettbaserte applikasjoner og mobilt nett.

Konsekvensen av den raske utviklingen av ny teknologi, er at CSS 2.1 er den siste spesifikasjonen som kun består av én del. CSS 3.0 skal dekke såpass omfattende områder at den er delt opp i flere moduler.

Dette er noen av CSS-modulene:

  • CSS Namespaces
  • CSS Selectors
  • CSS Shapes

Du finner flere CSS-moduler på w3.org/Style/CSS/current-work.

W3C-anbefaling vs praksis

Vær imidlertid klar over at det er forskjell mellom hva W3C anbefaler, og hva som faktisk fungerer i en nettleser. Mange av funksjonene som W3C kanskje ikke har anbefalt, støttes allerede i mange nettlesere.

Les mer om utviklingen av CSS3 på w3.org. Denne skissen ble først publisert i 2001, men her får du en oversikt over hva som skjer i utviklingen og hvorfor.

Status per i dag

Utviklingen av web går i forrykende tempo, og organisasjonen W3C prøver så godt de kan å henge med ved å oppdatere standarder, inkludert CSS.

Den foreløpig siste stabile CSS-spesifikasjonen ble anbefalt i 2011, og den finner du på w3.org/TR/CSS.

Du finner den ferskeste informasjonen om statusen på CSS på w3.org/Style/CSS/current-work.

Grunnleggende CSS-syntaks

En CSS-kode deles i en selektor og en deklarasjon, altså en grunn-syntaks. Eksempel:

P { font-weight: bold; }

Denne koden betyr en paragraf, et tekstavsnitt, som er skrevet med hevet skrift.

P er selektoren
font-weight er egenskapen
bold er verdien
font-weight: bolder er deklarasjonen

Selektorer

CSS kan defineres for spesifikke HTML-elementer, for en spesifikk nettside, eller for flere nettsider samtidig. De har alle sine fordeler og ulemper.

  • Element-selektor
    Defineres for et spesifikt HTML-element. Eksempel:

    P
    {
    font-weight: bold
    }

  • Id-selektor
    Bruker et attributt av en HTML-tagg til å finne et spesifikt HTML-element. Følgende eksempel gjelder for et HTML-element som har id=»test»:

    #test
    {
    text-align:center;
    color:red;
    }

  • Class-selektor
    Finner HTML-elementer som har et spesifikt class-attributt. Dette eksemplet gjelder for alle HTML-elementer som har class=»center».

    .center
    {
    text-align:center;
    color:red;
    }

  • Gruppe-selektorer
    HTML-elementer som har samme CSS-definisjon, kan skrives på samme linje, separert med en komma. Dette betyr at dette eksemplet kan skrives på to måter. Denne ene skrivemåten er slik:

    h1
    {
    text-align:center;
    color:red;
    }
    h2
    {
    text-align:center;
    color:red;
    }
    p
    {
    text-align:center;
    color:red;
    }

    Og den andre skrivemåten er slik, altså mye enklere:

    h1,h2,p
    {
    text-align:center;
    color:red;
    }

Ulike måter å definere CSS

CSS kan i utgangspunktet defineres på tre ulike måter:

  • Direkte inne i et HTML-element.
  • I HEAD-elementet i en HTML-fil.
  • I en ekstern CSS-fil.

Den siste metoden er som regel den meste hensiktsmessige, fordi da kan du definere CSS-kode for mange HTML-filer samtidig.

Verktøy for CSS-koding

Du kan bruke et hvilket som helst tekstprogram for å redigere CSS, inkludert Notisblokk.

Det finnes veldig mange programmer som er spesialiserte på CSS, dette er noen av dem:

Det finnes også tekstprogrammer og programpakker som kan brukes til ulike oppgaver, inkludert CSS-koding. Notepad++ er et gratis tekstprogram som blant annet kan brukes til å kode CSS. Dreamweaver er en del av den såkalte Adobe Creative Cloud, og er et avansert verktøy for webutviklere. Fordelen med spesialiserte kodeverktøyer, er at de har gjerne innebygd autofullfør-funksjon, det vil si hvis du begynner å skrive en bestemt kode, vil verktøyet automatisk foreslå resten av koden.

Nettbaserte verktøy

Det finnes ganske mange nettbaserte verktøy som lager CSS-koder i forhold til et utseende du spesifiserer. Koden kan du bare kopiere til et tekstprogram du bruker til å lage en nettside. Dette er ganske fin måte å få en CSS-kode, hvis du vet hva slag utseende du er ute etter.

CSS-validatorer

En validator er et verktøy som kan bruke til å lete etter feil i CSS-koden, altså om noe i syntaksen er feil ifølge spesifikasjonen.

Det kan nevnes at de ulike verktøyene som brukes til å skrive CSS-kode, som regel har innebygd validator.

CSS-referanse

Spesifikasjonen for CSS er delt i flere deler – du kan følge utviklingen på w3.org. Hvis man bruker W3C sine nettsider for å få en oversikt over CSS-koder, går man direkte til kilden. Problemet med det er at W3C er at nettsidene er ikke veldig brukervennlige for webutviklere, fordi oversikten er egentlig laget for utviklere av nettlesere. Det finnes mange andre nettsider som gir bedre oversikt over CSS-kodene, og blant våre favoritter er nettsiden w3schools.com.

Mer informasjon om CSS

Det finnes massevis av nettsider med mer informasjon om CSS. Her er noen av de beste.

Tags:

Legg igjen en kommentar

Din e-postadresse vil ikke bli publisert. Obligatoriske felt er merket med *