Inleiding tot CSS

Wat is CSS?

CSS (Cascading Style Sheets) is een stylesheet-taal die wordt gebruikt om de presentatie van een document geschreven in HTML te beschrijven. Met CSS kun je de stijl van je webpagina's bepalen, zoals kleuren, lettertypen en layout.

CSS Koppelen aan HTML

Er zijn drie manieren om CSS aan je HTML te koppelen:

1. Inline CSS: Stijlregels direct in HTML-elementen

    

   <p style="color: blue;">Dit is een blauwe tekst.</p>

2. Interne CSS: Stijlregels in de <head> van je HTML-document binnen <style>-tags.

    

   <head>
       <style>
           p {
               color: blue;
           }
       </style>
   </head>
   

3. Externe CSS: Een apart .css-bestand dat je linkt in je HTML-document.

    

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

Aanbevolen methode: Gebruik externe CSS-bestanden voor een betere organisatie en herbruikbaarheid van je code.

CSS Basisconcepten

CSS Selectors

CSS-selectors bepalen op welke HTML-elementen de stijlregels worden toegepast.

• Element Selector: Selecteert alle elementen van een bepaald type.

   

  p {
      color: red;
  }

   

• Class Selector: Selecteert elementen met een bepaalde class-attribuut.

   

  • HTML:

    <p class="belangrijk">Dit is belangrijk.</p>

  • CSS

    .belangrijk {
        font-weight: bold;
    }

• ID Selector: Selecteert een element met een uniek id-attribuut.

   

  • HTML:

    <p id="intro">Welkom op mijn website.</p>

  • CSS

    #intro {
        font-size: 20px;
    }

Eigenschappen en Waarden

CSS bestaat uit eigenschappen (properties) en waarden (values).

selector {
    eigenschap: waarde;
}

Voorbeeld:

h1 {
    color: blue;
    font-size: 24px;
}

Er zijn ongelooflijk veel verschillende CSS eigenschappen. Geen zorgen je hoeft ze niet allemaal uit je hoofd te leren! Gaan de weg tijdens het programmeren leer je de meest voorkomende CSS eigenschappen kennen.