CSS

​styling the web

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

  1. ​contextuele selectors (body, h1, h2, p)
  2. id selectors (#naamselector)
  3. 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…