CSS

Hvad er CSS og hvad står det for?

CSS står for “Cascading Style Sheet” og er indenfor kodesprog indenfor webudvikling.

Hvad bruges CSS til?

CSS benyttes til at style HTML elementer. Altså på dansk, at ændre udseendet på HTML koden på ens hjemmeside. HTML og CSS går derfor meget ofte hånd i hånd, og laver man HTML kode uden at style det ved brug af CSS, vil det meget hurtigt komme til at ligne noget fra før årtusindeskiftet.

Hvordan virker CSS?

Helt konkret fungerer CSS ved, at man via CSS selectors (Det er her man vælger HTML element(er) der skal rammes af CSS reglerne) kan opsætte diverse styling regler for de pågældende elementer.

Efterfulgt af ens CSS selector åbner man og lukker ved brug af curly brackets / tuborgklammer “ { } “.

Hver CSS regel afsluttes med semi-kolon “ ; “.

De mest brugte CSS selectorer er klasser og ID’er.

For at referere til en klasse i CSS benyttes punktum “ . “ foran klassenavnet. ID’er refereres til ved at lave “ # “ før ID navnet.

Har man eksempelvis HTML elementet <div class=”test”></div> som man vil referere til i sin CSS kode vil man lave følgende CSS selector:

.test {
    Herinde skrives CSS reglerne.
}

Eksempel på CSS kode

Et helt konkret eksempel på CSS kode kan ses herunder. For at det giver bedre mening er der også noget tilhørende HTML kode, da det jo netop er HTML elementer man styler via CSS.

HTML kode

<div class=”container”>
<a href=”#”>Knap 1</a>
<a href=”#”>Knap 2</a>
</div>

CSS kode

.container {
    display: table-cell;
    height: 100px;
    border: 1px solid black;
    padding: 10px;
    position: relative;
    vertical-align: middle;
}
.buttons-container {
  display:inline-block;
  position:relative;
}
.container a {
    display: inline-block;
    background: green;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
}

Udseende før CSS kode

Her er det blot standard styling regler, som varierer fra browser til browser, der dikterer hvordan de pågældende HTML elementer skal se ud.

Udseende efter CSS kode

Efter vi tilføjer vores CSS kode ser resultatet noget anderledes ud:

Hvordan laver man en CSS fil?

Det er faktisk rigtigt let at oprette en css fil. Du opretter blot en fil og sørger for at afslutte den med endelsen “.css”.