Hoe maak ik een website? Les 3: CSS

Wat is CSS?

CSS staat voor Cascading Style Sheets en is een taal om de opmaak van HTML elementen te veranderen. Denk hierbij aan kleuren en vormen, maar ook aan lettertypes bijvoorbeeld.

Les 3: CSS

In deze les leer je hoe je CSS moet schrijven en op welke manieren je dit kan toepassen. Er zijn 2 manieren om dit te doen: Inline en in een Stylesheet.

Stap 1: Inline CSS

In de vorige les zijn we gebleven bij het kleuren van een header.

<h1 style="color:red;">Welkom bij Hamsteropvang Sjoerd</h1>

Hier is style het attribuut, en color: red; is de waarde. In een style-attribuut kan je uitsluitend CSS gebruiken. Hier naast zie je het resultaat.

Rode tekst

Stap 2: Stylesheets

De 2e optie is het gebruik van stylesheets. Dit zijn losse bestanden waar al je CSS in staat, terwijl je HTML code schoon en netjes blijft. Om dit te doen zou je een aantal methodes kunnen toepassen, maar laten we het eerst even hebben over de bestanden zelf.

Om een stylesheet te kunnen gebruiken maken we 1 bestand en dat noemen we: stylesheet.css

In ons index.html bestand voegen we vervolgens een regel toe waardoor dit bestand weet dat er een stylesheet is, en waar deze dan is te vinden:

<link rel="stylesheet" href="/stylesheet.css">

In het bestand stylesheet.css voegen we dan toe:

h1 {
color: blue;
}

Als het goed is is de tekst nu blauw geworden in plaats van rood.

Als je zowel een stylesheet als inline-css gebruikt om een element te stylen, en hetgeen je aanpast is hetzelfde, wordt de inline-css als belangrijker gezien en is alleen die stijl zichtbaar