Begynder-intro til CSS

Hvis du går i gang med at lære HTML, så vil du som jeg ret hurtigt stifte bekendtskab med CSS. De er næsten uadskillelige, for HTML bruger du til at strukturere din hjemmeside, og CSS bruger du til at gøre hjemmesiden flot at se på. 

CSS er – præcis som HTML- ikke et ”rigtigt” programmeringssprog”. Men det hænger jeg mig ikke i lige nu. Det vigtigste er, at du kan bruge CSS til at style din hjemmeside – farver, skrifttyper og så videre, altså layoutet. Og sproget arbejder perfekt sammen med HTML.

CSS betyder “Cascading Style Sheets”. Og helt overordnet betyder det, at du kan skrive nogle layout-beskrivelser, som så bliver gentaget på hele din hjemmeside.

Det smarte ved CSS

Det rigtig smarte ved CSS er, at du kun skal skrive alle oplysninger om din hjemmesides layout ét eneste sted.

Før CSS blevet udviklet, så skulle man beskrive hjemmesidens layout alle steder i HTML’en, hvor de oplysninger gjorde sig gældende.

For eksempel skulle man ved hver eneste overskrift beskrive, at den skulle være grå, hvis den skulle være det. Og hvis man besluttede sig for, at alle overskrifter i stedet skulle være orange, så skulle man ændre det alle steder i HTML’en, hvor overskrifterne optrådte.

Sådan er det altså ikke længere. Nu ændrer man alle de oplysninger ét eneste sted – og de bliver så gentaget på hele hjemmesiden. Så hvis du vil ændre dine overskrifter fra grå til orange, skal du altså kun ændre en enkelt oplysning et sted.

W3C // The World Wide Web Consortium

Den udvikling blev styret af W3C, som er ”The World Wide Web Consortium”. Det er et fællesskab af eksperter, der styrer og udvikler standarderne for de programmer, som bruges til at udvikle hjemmesider; altså også HTML og CSS.

Igennem tiden (fra 1991 og frem) har der eksisteret flere forskellige udgaver af HTML: HTML 1.0, HTML2.0, HTML 3, HTML 4, HTML 4.01, XHTML 1.0 og nu HTML 5.

HTML er blevet mere og mere raffineret for hver udgave og i stand til at gøre mere og mere, i takt med stigende krav til hjemmesiders udseende og kvalitet.

Det nye ved HTML 4, da det kom i 1997, var, at W3C havde udviklet CSS og adskilt det fra HTML.

Så nu kunne programmører arbejde med struktur og layout i to forskellige sprog- og det lettede deres arbejde markant!

Det består CSS-koden af

Jeg er stadig nybegynder, så det her bliver en meget overordnet intro. CSS består helt overordnet af tre elementer:

a. En lokation. Det kan for eksempel være en overskrift, H1.

b. En egenskab. Det kan for eksempel være farve.

c. En style. Det kan for eksempel være grå.

Hvis de tre elementer i eksemplet sættes sammen, så betyder det, at alle H1-overskrifter på din hjemmeside bliver grå. Du kunne for eksempel også tilføje, at der skal være en lyserød ramme omkring dine H1-overskrifter, og de skal være skrevet med fed.

Eksempel på CSS-kode

I eksemplet her er CSS-koden markeret med gult. Den er omgivet af et <style>-element og skrevet ind i HTML’ens Head-element. Her kan CSS’en stå, men det er mest for begyndere. Når man bliver dygtigere, så er det mere almindeligt at have CSS-koden i en separat fil, som man så refererer til i <style>-elementet.

I CSS-koden her står der, at alle H1- og H2-overskrifter skal være skrevet med skrifttype-familien sans-serif, og de skal være grå. I de næste linjer står der, at P, som er al brødteksten, skal skrives med farven maroon/brun.

Den style kommer til at se sådan her ud:

Hvis du vil have et overblik over alle de forskellige egenskaber, som du kan skrive i CSS, så kan du for eksempel finde en oversigt over dem i CSS Pocket reference .

 

INSPIRATION - Lær CSS
Jeg er selv ved at lære CSS fra Head First-bogserien

Hvis du er mere til at lære CSS på nettet, så er der rigtig mange gratis kurser at vælge i mellem, for eksempel det her