style

Je hebt nu een HTML-pagina gemaakt. Deze ziet er alleen nog best wel kaal en saai uit. Daar gaan we verandering in brengen met CSS! Dat staat voor Cascading Style Sheets. Met CSS kun je het uiterlijk van je webpagina bepalen. Je kunt dus zeggen dat je 's een rode achtergrond moet hebben met groene tekst. Je kunt bijvoorbeeld je plaatjes een randje geven. Je kunt je tabellen inkleuren en nog veel en veel mee

We gaan nu de CSS style direct in een pagina verwerken om mee te oefenen.

Als je meerdere pagina's gaat maken in je website is het beter om de CSS in een apart bestand te zetten. Dit staat aan het volgende kopje uitgelegd.

In je pagina zet je de CSS style tussen de <style> en <style> tags in de header van je html bestand:

<html>
  <head>
    <style>
      /* Hier komt je style terecht.*/
    </style>
  </head>

Zullen we eerst een achtergrondkleurtje instellen voor de pagina? Dan moeten we body selecteren. Tussen de { en de } komen alle stijlkenmerken van de body. Alles wat je voor de body wilt instellen zet je tussen die accolades. We gaan de achtergrondkleur instellen met background-color.

<html>
  <head>
    <style>
      body {
        background-color: red;
      }
    </style>
  </head>

En voor de kleur van de tekst gebruiken we color. Zet hem er maar bij! (Wel weer in de body en tussen de accolades zetten!)

body {
  background-color: red;
  color: green; /* Tekstkleur is groen*/
}

Kun je ook iets anders dan de body opmaken? Ja natuurlijk! Je kunt elke tag opmaken die je in je HTML hebt gezet! Dus <p>, <table>, <td>, <tr>, <img> . Denk er wel om dat ze dan OOK in je HTML moeten staan!

p {
  color: blue;
  background-color: yellow;
}

In totaal ziet het er dus zo uit:

<style>
  body {
    background-color: red;
    color: green; /* Tekstkleur is groen*/
  }

  p {
    color: blue;
    background-color: yellow;
  }
</style>

Maak je meerdere pagina's? Gebruik dan een extern stylesheet.

  • Maak een bestand in dezelfde map als index.html

  • Noem het: style.css

  • Zet daar alles wat tussen de <style>-tags staat in

  • Zet er een link naartoe in je HTML-pagina: <html>

    <head>

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

    </head>

    <body>

  • Sla beide bestand op en test het.

Previousfilmpje: css en kleurenNextapart css bestand

Last updated