CSS

1. CSS • Cascadingstylesheets - Stilmallar

2. Varför css? • Separera innehåll från design • Html/XHTML för innehåll, • Vad är rubrik, brödtext, bild etc. • CSS för design • placering, storlek, färg font etc

3. Html-koden • Strukturen är viktig • Alla använder inte CSS – tänk på besökare med nedsatt syn • Enklast att köra rapportstruktur • Rubriker, underrubriker • Ev. meny först eller sist • Ska vara lättläst även utan CSS

4. Var skriver man css? • I en separat css-fil (extern) • <linkrel=”stylesheet” href=”stilmall.css” type=”text/css” /> • I head-sektionen i html-filen (intern/EMBED) • <styletype=”text/css”>body { color:#fff, } </style> • Direkt i starttaggen (inline) • <p style=”color:#fff;”>vittext</p>

5. CSS-exempel • Texten i alla p-element ska vara kursiverad och röd:p { color:#ff0000; font-style:italic; }

6. CSS-regler • CSS-kod består av regler

7. CSS-regler • Olika sätt att skriva kod:p { font-style:italic; } p { font-style:italic; } Glöm inte att avsluta varje CSS-regel med semikolon!

8. CSS Selectors • Universal selector: * { font-size:14px; } • Typeselector: p { font-size:14px; } alt: p, h1, h2 { font-size:14px; } Child selector: p > p { font-size:14px; }

9. CSS Selectors • DESCENDENT SELECTOR: p strong { font-size:14px; } • Adjacentsiblingselector: h1 + p { font-size:14px; }

10. CSS Selectors • First-child: div > p:first-child { font-size:14px; } • Active / hover / focus: a:hover { text-decoration:underline; } input:focus { background-color:yellow; } • Attributeselector: h1[title] { color:red; }

11. CSS Selectors • CLASS SELECTOR: .text { font-size:14px; } • ID SELECTOR: #textSektion { font-size:14px; } • Tänk på namngivningsstandard vid namngivning av klass- och id-namn – inga svenska tecken, inte mellanslag etc.

12. CSS Selectors • Fler selektorer Det har tillkommit ännu fler selektorer i CSS3. Läs mer om dessa här: http://www.w3.org/TR/css3-selectors/

13. HÖJD OCH BREDD • Höjd på blockelement styrs med heigth • Bredd på blockelement styrs med width • Exempel: • p { width:400px; heigth: 300px; }

14. Relativa vs asboluta mått • Använd relativa mått där det går. • Em : Fontstorleken på ”standardfonten” styr • % : Procent på fönstret, eller överordnat element • Pt : Punkter, som i typsnitt. • Px : Pixel, ett absolut värde. • Cm, mm, in – Centimeter, millimeter, tum

15. Margin och padding • p { background-color: grey; margin:10px; padding 10px; }

16. POSITIONering • Vart olika element ska ligga på sidan • Sidled (left/right) • Höjdled (top/bottom) • Djup (z)

17. POsitionering OLIKA TYPER AV POSITIONERING • Static – Normalpositionering • Relative positionering • Absolute positionering • Fixed positionering • Floats, left & right

18. TYpSNITT • Två typer av typsnitt – serif/sansserif • Seriff – ex. georgia är av typen seriff • Sans seriff – ex. verdana är av typ sans seriff Ex: p { font-family:Verdana, Arial; }

19. Typsnitt – exempel • p { • font-family:verdana, arial, sans-serif; • font-size:1em; • line-height:1.5em; • color:red; • font-weight:bold; • text-decoration:underline; • }

20. Kommentarer • Ignoreras av webbläsaren • visas inte för besökaren • För de personer som kodar, läser koden • Gör det lättare att förstå koden • HTML: <!– Allt mellan dessa blir kommentar, oavsett radbyte --> CSS: //Allt efter detta, till radens slut, blir en kommentar /* Allt mellan dessa blir en kommentar, oavsett radbyte */

21. Kommentarer i denna kurs • Kommentarer i koden ska rikta sig till oss lärare • Du ska visa att du förstår vad du gjort, vad koden du skrivit betyder • En del av redovisningen av uppgifterna

22. Validering • Validera ofta • Välj rätt valideringsversion – 2.1 eller 3

23. Slut!