CSS Basis

Cursus CSS

In bijna 2 uur video lessen leer je de taal waarmee alle webpagina’s zijn opgemaakt. Vanaf het allereerste begin ga je aan de slag met opmaak van tekst, links, koppen en andere inhoud van een webpagina.

Wat leer je?

  • Wat is CSS, de structuur en hoe te koppelen aan HTML
  • Rechtstreeks HTML elementen aanpassen
  • Eigen opmaakstijlen maken en toepassen
  • Werken met tekst
  • Werken met kleuren en transparantie
  • Achtergronden toepassen
  • Werken met blok-content
  • Randen, Marges en Padding
  • Speciale CSS voor opsommingslijsten en formulieren
  • Layout modellen in CSS2 (Tabellen, Positioning, Float)
  • Vormgeving aanpassen aan beeldschermen (media-queries)

Inhoud

De cursus CSS bestaat uit de volgende video presentaties:

INLEIDING

  • Wat is CSS (1:30 min)
  • De structuur van CSS (2:14 min)
  • CSS koppelen aan HTML (4:50 min)

SELECTORS

  • HTML selectors (4:52 min)
  • CLASS en ID selectors (4:00 min)
  • Gecombineerde selectors (3:23 min)
  • Pseudo selectors (3:30 min)

TEKST

  • Font eigenschappen (5:00 minuten)
  • Tekst eigenschappen (4:30 min)
  • Google fonts (5:45 min)

KLEUREN EN EENHEDEN

  • Kleuren (7:00 min)
  • CSS eenheden (3:45 min)

BLOKKEN OPMAKEN

  • Het Box model (2:12 min)
  • Randen (2:33 min)
  • Marges (2:55 min)
  • Padding (1:10)
  • Achtergronden (4:39 min)
  • Achtergronden deel2 (2:12 min)

SPECIAAL VOOR..

  • Lijsten (5:31 min)
  • Formulieren (3:31 min)

LAYOUT

  • Over layout (3:00 min)
  • Inline en block display (4:45 min)
  • Tabellen (5:52 min)
  • Float (3:26 min)
  • Absolute en relatieve positie (5:43 min)
  • Positie: Fixed (2:38 min)
  • Positie: Sticky (1:36 min)
  • Multiple Columns (2:35 min)
  • Media Queries (3:33 min)

Vervolg

In deze cursus leer je hoe CSS gestructureerd is en hoe je het koppelt aan HTML. Je bent nu klaar voor het vervolg: speciale CSS3 modules op het gebied van layout.
Zie de cursussen Flexbox en CSS Grid


Schrijf je nu in!  

Class en ID selectors

Een CSS Class is simpelweg een zelfgemaakte stijl die je zelf kunt toepassen waar en wanneer je maar wilt:

CSS:

.rodetekst {

color:#ff0000;

}

HTML:

<p class=”rodetekst”>Deze tekst is rood!</p>