Les 5: CSS, background-color, color

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 einde van de lesbrief 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.

Opdrachten

[1] Bepaal een mooie kleur, achtergrondkleur en lettertype voor alle <h1>-tags op je pagina.

[2] Doe hetzelfde voor de body

[3] Kleur je tabel nu in door de <td> en de <tr>-tags een andere achtergrondkleur te geven.

[4] Je kunt je tabel ook een veel mooiere rand geven. Dat doe je natuurlijk ook in CSS. Lees op de volgende internetpagina hoe dat moet: https://www.w3schools.com/css/css_table.asp. Verras ons dan met een mooie rand voor je tabel.

[5] De CSS-code die we je in deze leskaart hebben geleerd is maar een kleine fractie van alle mogelijkheden die er zijn. Ga naar de w3schools-pagina waar je nog veel meer mogelijkheden kunt ontdekken om je pagina mee op te leuken. Klik op de volgende link: http://www.w3schools.com/css/default.asp

PreviousLes 4: HTML, tabellenNextLes 6: HTML, iframes, Youtube of maps invoegen

Last updated