Web
standards?
Tandem
HTML5 / CSS3
content / style
CSS?
Cascading Style Sheet
- ‘Cascade’ (waterval effect)
- bevat de vormgeving van je HTML document, geen inhoud
- opmaak taal, compleet anders van syntax dan HTML
- versies CSS 1, CSS 2.1, CSS 3
- speelt belangrijke rol binnen de webstandaarden!
- standaard vormgeving in browers uitschakelen > reset.css
Anatomy van CSS
Soorten
selectors
- contextuele selectors (body, h1, h2, p)
- id selectors (#naamselector)
- class selectors (.naamclass)
Contextuele
selectors
- Deze selectors verwijzingen naar bestaande HTML tags
- Vb: h1, h2, p, ul, li, etc.
h1 {
color: red;
margin: 0;
padding: 0;
font-size: 20pt;
}
ID
selectors
- om een TAG een unieke naam mee te geven in een webpagina > ‘ID’ (identifier)
- Een ‘ID’ wordt altijd voorafgegaan door een # (hekje)
#navigatie {
color: green;
}
CLASS
selectors
- naam ‘class’ > meerdere class’s zijn mogelijk op 1 TAG
- Vergelijkbaar met ID, maar naam moet niet uniek zijn binnen de pagina.
- Een ‘class’ wordt altijd voorafgegaan door een . (punt)
.super-titel {
color: red;
}
Gebruik
van CSS
Het vormgeven van elementen gebeurt via CSS declaraties. Deze kan je op 3 manieren injecteren in het HTML pagina:
- External Style Sheet
- Internal (of “Embedded”) Style Sheet
- Inline Style Sheet
lees meer
schrijf tips
- Schrijf nooit met hoofdletters (CAPS)
- Nooit HTML-code in je CSS
- Plaatst notities in je CSS dmv. /* dit is een nota */
- tip: Plaatst een versie nummer bovenaan met datum
- CSS is net als HTML ‘spatie ongevoelig’ en ‘case insensitive’
CSS 1 & 2 syntax
CSS colors, CSS backgrounds, CSS border, CSS margins, CSS padding, CSS height/width, CSS Box model, CSS text, CSS fonts, CSS links, CSS lists, CSS align, CSS display, CSS position, …
overzicht
New
CSS3 modules
CSS3 new selectors, CSS3 new flexbox, CSS3 backgrounds & borders, CSS3 2D/3D transformations, CSS3 animations, CSS3 effects, CSS3 text-effects, CSS3 webfonts,
CSS3 mediaqueries, …
lees meer
CSS Resources
Interessant online studiematerial…