Web: Essentials

Appearance

CSS: introductie ​

CSS (Cascading Style Sheets) is de taal waarmee je het uiterlijk en de layout van webpagina's bepaalt. Waar HTML de structuur en inhoud definieert, zorgt CSS voor de visuele presentatie: kleuren, lettertypen, afstanden, posities en animaties.

De taal ​

CSS is een taal die bestaat uit selectors en declaraties. Een declaratie bestaat telkens uit een property (eigenschap) en een value (waarde).

css
p {
  color: black;
}

Opbouw:

  • eerst zien we onze selector: p
  • dan openen we de selector met een accolade (curly bracket): {
  • dan staat onze declaratie met de property color,
  • een property wordt afgesloten met een dubbelpunt: `:``
  • daarna plaatsen we onze value, bvb: black.
  • we sluiten een declaratie altijd af met een puntkomma: ;
  • tenslotte sluiten we onze selector af met een accolade (curly bracket): }

Binnenin een selector kan je meerdere declaraties toevoegen.

css
body {
  background: green;
  color: blue;
  width: 30%;
  height: 100px;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 20px;
  margin-left: 200px;
}

CSS op HTML toepassen ​

Er zijn drie manieren om CSS toe te passen op je HTML bestand:

Inline CSS ​

Direct in HTML elementen met het style attribuut:

html
<p style="color: blue; font-size: 18px;">Blauwe tekst</p>

Interne CSS ​

In de <head> sectie met <style> tags:

html
<head>
  <style>
    p { color: blue; font-size: 18px; }
  </style>
</head>

Externe CSS ​

Apart CSS-bestand gelinkt via <link> in de <head> sectie van je pagina:

html
<head>
  <link rel="stylesheet" href="styles.css">
</head>

Hier gebruiken we de <link> tag met 2 attributen:

  • rel="stylesheet: we geven mee dat dit een stylesheet is
  • href="styles.css: bij het href attribuut definiëren we het pad waar ons CSS bestand staat

Tips

  • Externe CSS is meestal de beste keuze omdat het herbruikbaar is, de HTML schoon houdt en betere prestaties biedt
  • Controleer goed het de href. Zorg ervoor dat dit overeenstemd met de locatie waar je de CSS plaatst. Gebruik bij voorkeur een relatief pad
  • De link tag moet in de <head> van je pagina