Cascading Style Sheets

Denne side indeholder det nødvendige teori, der skal til for at få et website til at se pænt ud.

CSS – Cascading Style Sheets – er et af kernesprogene man bruger til at kode på det åbne web. CSS standardiseres på tværs af de forskellige web browsers, i forhold til W3C Specification. CSS beskriver hvordan HTML elementer skal vises på siden. Man kan i grove træk tænkte på HTML som struktur, og CSS som udseende. Det er ved hjælp af CSS, at vi kan adskille struktur og udseende. Der er 3 måder at bruge CSS på.

Implementering

De 3 metoder, som kan bruges til at anvende CSS på sit HTML dokument, kaldes:

  • Eksternt stylesheet
  • Internt (embedded) stylesheet
  • Inline styles

Eksternt stylesheet

Dette er den mest almindelig og brugbare metode at bruge CSS på. Ved brug af denne metode kan man linke det samme CSS til flere HTML dokumenter. På denne måde skal man kun ændre sin CSS ét sted, for alle sine HTML dokumenter.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    
    <link rel="stylesheet" href="style.css">
    
</head>
<body>

</body>
</html>

Med denne metode har man al sin CSS i en ekstern fil, som man referere til fra sit HTML dokument ved hjælp af <link> tagget i <head> sektionen.

Eksempel på en .css fil:

h1 {
    color: blue
    background-color: red;
    border: 1px solid black;
}

p {
    color: red;
}

Href=”” attributten af elementet, er nødt til at referer til en fil på ens filsystem, eller en ekstern fil på nettet. Her er 3 eksempler:

<!-- I en mappe kaldt css -->
<link rel="stylesheet" href="css/style.css">

<!-- i en mappe kaldet mørk, som ligger i mappen kaldt css -->
<link rel="stylesheet" href="css/mørk/style.css">

<!-- Gå 1 niveau op i mappe-hierarkiet, og ind i en mappe kaldt css. -->
<link rel="stylesheet" href="../css/style.css">

Internt (embedded) stylesheet

Når man benytter sig af interne stylesheets, også kaldet embedded css, så har man ikke en ekstern fil. Her skriver man det direkte i HTML dokumentet.

Dette gøres ved at bruge <style> elementet, som placeres i HTML <head> sektionen.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>

        <style>
        h1 {
            color: blue;
            background-color: yellow;
            border: 1px solid black;
        }
        
        p {
            color: red;
        }
        </style>

    </head>
    <body>

        <h1>Hello World!</h1>
        <p>Dette er min portfolio!</p>

    </body>
</html>

Dette kan være brugbart nogle gange, hvis man f.eks. ikke har adgang til css-filerne direkte, såfremt man har linket til eksterne filer på nettet. Det er dog ikke nær så effektivt, som eksternt CSS, hvis man skal gentage den samme CSS på flere sider. Det giver ekstra arbejde i at CSS’en skal opdateres flere gange.

Inline styles

Med Inline Styles er man begrænset langt mere end, hvis man benytter sig af embedded CSS. Disse CSS-deklarationer påvirker kun ét element fordi de skrives i style=”” attributten.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    <body>

    <body>

        <h1 style="color: blue; background-color: yellow; border: 1px solid black">Hello World!</h1>
        <p style="color: red;">Dette er min portfolio!</p>

    </body>
</html>

Dette frarådes medmindre man ikke har andre valg. Det har man typisk. Grunden til det er at med inline styles blander man sin CSS-styling med sin strukturelle HTML information. Dette gør koden sværere at læse og forstå. Det er generelt anbefalet at man holder forskellige typer kode adskilt, så det er meget nemmere at arbejde med – ikke kun for én selv, men for alle som skal arbejde med koden.

Syntaks

Synes man at HTML syntaks er nem at arbejde med, så vil man ikke gå galt i byen med CSS. Det er ligeledes meget simpelt at arbejde med. Hvis vi kigger på CSS i dets mest grundlæggende form, så består CSS er 2 byggesten: properties og values.

  • Properties

    Let læselige egenskaber, som fortæller noget om den stilistiske funktion man vil ændre. Disse kunne være font-size, color, background-color.

  • Values

    Hver property tildeles en værdi, der angiver, hvordan man vil ændre den stilistiske funktion. F.eks. hvor størrelsen på font-size, eller farven til background-color.

Et property/value sæt kaldes en declaration. Disse puttes ind i det man kalder en declaration block, som omsluttes af tuborgklammer/krøllede parenteser.

Disse declaration blocks, parres så med en selector, og danner det vi kalder et CSS ruleset.

Selectors

Denne bestemmer, hvilket element i HTML dokumentet man vil ramme. Der findes en række forskellige typer af selectors. Der er særligt 3 typer, som man ikke kan undgå at støde på.

  • Element selector

    Denne rammer et specifikt element(tag) i HTML dokumentet.

  • ID selector

    En ID er en attribut, som erklæres i et HTML element, så man ikke rammer alle elementer af samme type. Et ID er unik, og bør kun anvendes på ét element.

  • Class selector

    En class er ligeledes en attribut, som erklæres i et HTML element. Forskellen på class og ID, er at classes bruges, hvis man har behov for at bruge den på flere elementer.

Herefter kommer så deklarationen, som indeholder nogle rules(regler) bestående af nogle properties(egenskaber), der tillægges nogle values(værdier). Selve deklarationen er omsluttet af tuborgklammer, eller krøllede parenteser {}. Hvert sæt af property/value udgør en regel, som tillægges det elementet man vil ramme med sin selector. Der kan være flere regler pr. selector, og derfor kalder man det et ruleset/regelsæt.

CSS Syntaks

Regler

Man vil ofte støde på, at man har 2 selectors, som rammer de samme elementer. I disse tilfælde er der sat nogle regler i spil, for at hjælpe med at kontrollerer hvilke regelsæt der vinder. Disse regler kaldes cascade(kaskade) rules og specificity(specificitet) .

Som udgangspunkt følger vi cascade reglen(kaskadereglen), som udfører koden i læseretningen – Altså fra top til bund. Det betyder, at hvis du har 2 modstridende regler, så vil den der står til sidst vinde. I flg. Eksempel har vi 2 regelsæt, som vil ændre farven på p. p ender med at blive farvet rød, da denne står til sidst i dokumentet og tilsidesætter det første regelsæt.

p {
    color: blue
}

p {
    color: red;
}

Har man derimod en class selector efterfulgt af en element selector, så vil class selectoren vinde.

HTML:

<p> class="special">Hvilken farve har jeg?</p>

CSS:

.special {
    color: blue
}

p {
    color: red;
}

På trods af at class selectoren fremtræder tidligere i dokumentet, så er den mere specifik, som derfor får reglen for specificity til at træde ind og tilsidesætte cascade reglen.

Box Model

Når man benytter sig af CSS, er det vigtig at kende box modellen, som anvendes til alle block elementer i HTML. For at kunne layout sit site ordentligt så er det nødvendigt at kende box modellen. Denne er bestående af 4 dele:

  • Content box

    Området hvor indholdet vises. Denne ændres med width og heigth properties.

  • Padding box

    Dette er området omkring indholdet, det vises som whitespace. Med andre ord, afstanden fra content box til kanten. Denne ændres med padding property.

  • Border box

    Denne er kanten, som omslutter content og padding. Denne ændres ved hjælp af border property.

  • Margin

    Dette er det yderste lag, som omslutter alle de andre 3, og skaber whitespace mellem denne box og andre elementer. Denne ændres ved hjælp af margin property.

Margin

Border

Padding

Content

Grid

Der har aldrig været nogen dissideret god måde at lave layouts i CSS, eller placere elementer. Med grid har vi en let og intuitiv måde, at placere alle vores elementer på.

De forskellige metoder (i.e. flexbox) forinden grid, tillod kun 1-dimonsionel (horizontal eller vertical) fordeling af elementer, men grid tillader 2-dimensionel fordeling samtidig. Dette gør det meget nemmere at placere elementerne som vi ønsker, på en simpel og intuitiv måde.

Display: grid

Det der sker når man aktiverer et grid med display: grid; er at det påvirkede element skaber et grid med det antal kolonner og rækker man definerer det skal have. Derefter vil browsere forstå at alle child-elementer skal placeres i dette grid. Det vil den gøre i læseretningen (venstre til højre), og den placere dem i den rækkefølge de står i HTML dokumentet.

Det er selvfølgelig muligt, at få yderligere kontrol over placeringen af elementer. Navngiver man grid områderne, og dertil også tildeler samme navn til det ønskede element, så vil browseren placere elementet i det område. Det er ikke nødvendigt at tildele alle elementer et område, men det gør det om noget nemmere at kontrollere hvor alting ender henne.

Det er dog vigtigt, at nævne, hvis man har tildelt et område et navn, så skal der være et tilsvarende element.