Indledning

 

1. Forstå CSS

Hvad er CSS?

Hvad betyder cascading?

Hvorfor bruge CSS?

 

2. Brug af CSS-regler

Opsætning af HTML-kode

Opret en regel

Brug af flere erklæringer

Kombinering af selektorer

Sammentrukne egenskaber

Brug af kanter

Brug af margener og fyld

Andre sammentrukne egenskaber

 

3. Selektorer i aktion

Opsætning af HTML-kode

Type-selektorer

Class-selektorer

ID-selektorer

Descendant-selektorer

Universal-selektorer

Avancerede selektorer

 

4. Tilføj stylesheets

Opsætning af HTML-kode

Tilføj inline-styles

Brug af header-styles

Brug af eksterne stylesheets

@import styles

Skjul styles i ældre browsere

 

5. Boksmodellen i CSS

Kend forskel på inline- og blokelementer

Margen

Baggrundsfarve og billede

Fyld

Kanter

Indholdsområde

 

6. Baggrundsbilleder

Opsætning af HTML-kode

Selektor til formatering af

Body-sektionen

Tilføj baggrundsbillede

Brug af background-repeat

Tilføj background-position

Brug den sammentrukne background-egenskab

Tilføj fyld

 

7. Formatering af tekst

Opsætning af HTML-kode

Fjern font-elementer

Opret selektorer

Formatering af p-elementet

Formatering af første afsnit

Sammentrukne egenskaber

 

8. Design af fleksibel overskrift

Formatering af overskrift

Tilføj farve, skriftstørrelse og vægt

Tekstindstillinger

Tilføj fyld og kanter

Tilføj baggrundsbillede

 

9. Overskrift med runde hjørner

Formatering af overskrift

Formatering af h2-elementet

Tilføj baggrundsbillede

Formatering af em-elementet

 

10. Formatering af links

Links og pseudoklasser

Pseudoklassernes rækkefølge

Kombinér class- og pseudoklasse-selektorer

Formatering af link med baggrundsbillede

Erstat understregninger med kanter

Større aktivt område for links

 

11. Placering af billede og billedtekst

Indpak billede og tekst

Gør containeren flydende

Tilføj fyld, baggrundsfarve og baggrundsbillede

Formatering af billedtekst

Formatering af billede

Opret en ”side om side”-variant

Opret variant med fotoramme

 

12. Opret billedgalleri

Opret galleri med miniaturebilleder

Placering af div-elementer

Formatering af billede

Formatering af p-elementet

Fremtving ny linje

Variant med billede og tekst side om side

 

13. Formatering af citater

Tilføj blockquote-element

Formatering af blockquote-elementet

Formatering af afsnit

Formatering af klassen kilde

Lav en variant

 

14. Formatering af datatabel

Start med en basal tabel

Gør datatabellen lettere tilgængelig

Selektorer til tabelformatering

Formatering af overskriften

Formatering af table-elementet

Formatering af th- og td-elementerne

Formatering af tr-elementet

Adressering af th-elementer

Lav skiftende rækkefarver

 

15. Opret lodret navigation

Hvorfor bruge en liste?

Formatering af listen

Formatering af ul-elementet

Formatering af a-elementet

Tilføj svæveeffekt

Formatering af li-elementet

 

16. Opret vandret navigation

Formatering af liste

Formatering af ul-elementet

Formatering af li-elementet

Formatering af a-elementet

Formatering af pseudoklassen :hover

 

17. Design en afrundet boks

Opsætning af HTML-kode

Skab illusionen med afrundede hjørner

Selektorer til den runde boks

Forbered billederne

Formatering af div-elementet

Formatering af h2-elementet

Formatering af p-elementet

Formatering af klassen .mereinfo

Formatering af a-elementet

Variant med fast bredde

Variant med fleksibel top

 

18. Opret sidehoved

Opsætning af HTML-kode

Selektorer til formatering af sidehovedet

Formatering af body-elementet

Formatering af container

Formatering af h1-elementet

Formatering af image-elementet

Formatering af ul-elementet

Formatering af li-elementet

Formatering af a-elementet

 

19. Sidelayout i to kolonner med sidehoved og sidefod

Opsætning af HTML-kode

Opret selektorer til layout

Formatering af body-elementet

Formatering af container

Formatering af h1-elementet

Formatering af #nav-containeren

Formatering af ul-elementet

Formatering af li-elementet

Formatering af #indhold-containeren

Formatering af #fod-containeren

Formatering af h2-elementet

Formatering af a-elementet

 

20. Design en side til udskrivning

Opsætning af CSS til print

Start med eksisterende HTML- og CSS-kode

Selektorer til formatering af udskrifter

Formatering af body-elementet

Formatering af h1-elementet

Formatering af #nav-containeren

Formatering af #fod-container

Formatering af a-elementet

 

21. Sidelayout i tre kolonner med sidehoved og sidefod

Opsætning af HTML-kode

Selektorer til trekolonners layout

Opbyg ramme for flydende layout

Opret baggrundsbillede

Formatering af body-elementet

Formatering af h1-elementet

Formatering af h2- og h3-elementer

Formatering af første container

Formatering af anden container

Formatering af kolonnen #indhold

Formatering af kolonnen #nyt

Formatering af kolonnen #nav

Formatering af ul-elementet

Formatering af #fod-elementet

 

22. Fejlfinding i CSS

Opsætning af CSS-kode

Løs problemerne

Tips til CSS-fejlfinding

 

Appendiks. CSS i overblik

 

Stikordsregister