CSS

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
      <title>Wilkens installatiebedrijf</title>
  </head>
  <body>
    <header>
      <nav>
        <a href="#nieuws">Nieuws</a>
        <a href="#over-ons">Over ons</a>
        <a href="#producten">Producten</a>
        <a href="#contact">Contact</a>
      </nav>
    </header>
        ....
  </body>
</html>

Bovenstaande code resulteert in de volgende output in de browser:

Nieuws Over ons Producten Contact

Als we nu de achtergrond van de navigatiebalk een andere kleur willen geven, dan moeten we de volgende css-code toevoegen aan de head van het html-document:

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      nav {
        background-color:yellow;
      }
    </style>
   </head>
   <body>
    ......

De css-code komt tussen 'style'-tags te staan.
'nav' is de selector. De selector geeft aan op welk(e) element(en) de stijl betrekking heeft. 'background-color' is de eigenschap die we in willen stellen voor de 'nav'-tag, 'yellow' is in dit geval de waarde die we toe willen kennen aan de eigenschap 'background-color'.

Als we de kleur van de links willen aanpassen en de lijn onder de letters willen verwijderen, dan moeten we de volgende selector en eigenschappen gebruiken:

      nav {
        background-color:yellow;
      }
      
      nav a {
        color: red;
        text-decoration: none;
      }

'nav a' verwijst naar alle 'a'-tags die in een 'nav' voorkomen.

Je kunt op allerlei manieren verwijzen naar elementen in een html-document. Je kunt bijvoorbeeld de stijl aanpassen als je de muis over een link beweegt. Op onderstaande sites kun je een opsomming van alle selectors en hun mogelijkheden vinden:

Je kunt op 3 manieren een stylesheet toevoegen:

Externe css

Je kunt je css-stijlen opnemen in een apart document. Bijv. stijl.css. Je moet dan een verwijzing maken naar stijl.css vanuit het html-document (index.html). Stel je hebt de volgende map-structuur:

website
 |-- css
     | -- stijl.css
 |-- index.html

In dit geval moet je in het index.html bestand een (relatieve) verwijzing opnemen naar css/stijl.css. Externe css is vooral handig als je meerdere pagina's hebt waar dezelfde stijl wordt toegepast.

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="stylesheet" href="css/stijl.css">
  </head>
  ....

Interne css

Bij de introductie heb je gezien dat je css kunt opnemen in de header van je document. Je maakt dan gebruik van de style-tag.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      nav {
        background-color:yellow;
      }
    </style>
   </head>

Interne css is vooral handig als je stijlen hebt die maar op 1 pagina voorkomen.

Inline css

Bij inline css plaats je de css code als attribuut van de tag....

<h1 style="background-color:yellow; padding:20px;">Dit is een kopje</h1>

Vooral handig als je 1 element hebt dat een andere stijl moet krijgen.

Je kunt de verschillende methoden door elkaar gebruiken, maar als je een element op meerdere plaatsen een stijl geeft dan gaat inline voor intern en intern gaat weer voor extern.

<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
        p {
            color: green;
        }
    </style>
  </head>
<body>
    <p style="color: red;">
        Deze tekst wordt rood, want inline overschrijft de waarde in het interne stylesheet.
    </p> 
</body>

Stel, er moet een lijn komen om de tabel en de afzonderlijke tabel-cellen moeten ook een lijn krijgen. Als je onderstaande css toepast op een tabel dan krijg je een dubbele lijn...

table, td, th {
    border-width: 1px;
    border-color: black;
    border-style: solid;
Woningtype Gemiddeld verbruik per jaar in m3 Kosten per maand in €
Hoekwoning 1.380 m3 113,-
2 onder 1 kap 1.560 m3 124,-
Vrijstaand 2.010 m3 154,-
Gemiddeld alle woningen 1.254 m3 104,-

Standaard voegt je browser een beetje ruimte tussen de lijn om de tabel (table) en de lijn om een tabel-cel (td). Je kunt dit voorkomen met de eigenschap 'border-collapse' en de waarde 'collapse'.

table, td, th {
    border-collapse: collapse;
    border-width: 1px;
    border-color: black;
    border-style: solid;