Cursus CSS (Cascading Style Sheets)

CSS is een afkorting voor Cascading Style Sheets. CSS is inmiddels bij zijn derde versie aangekomen, maar omdat deze nog maar in een beperkt aantal browsers wordt ondersteunt, wordt er meestal gebruik gemaakt van versie 2.1. Firefox ondersteunt versie 3 al gedeeltelijk en Internet Explorer zal CSS versie 3 vanaf Internet Explorer 9 ook gaan ondersteunen. CSS kun je op 3 manieren in je website opnemen: inline, embedded en extern.

Intern:

  1. <p style="color: #000000;">Deze code is inline opgenomen</p>

Embedded:

  1. <style>
  2. p {
  3.   color: #000000;
  4. }
  5. </style>

Extern:

  1. <link type="text/css" rel="stylesheet" href="extern_bestand.css" />

De meest gebruikte manier is de externe variant, maar er wordt ook regelmatig gebruik gemaakt van embedded CSS. Het grote voordeel van externe CSS bestanden is dat je, mits je deze door je hele website doorvoert, overal eenvoudig wijzigen kunt doorvoeren waardoor je website er snel heel anders uit zal zien! Ook zorgt dat ervoor dat je code een stuk beter leesbaar wordt omdat je geen style tags meer hoeft te gebruiken. Omdat het CSS bestand extern wordt opgeslagen hoeft deze maar 1x gedownload te worden wanneer een bezoeker uw website bezoekt, wat weer bandbreedte kan besparen.

Beginnen met css In CSS kun je eenvoudig een element selecteren, en daar dan weer de benodigde opmaak aan koppelen. het meest wordt gebruik gemaakt van de class en de id selector.

Class selector:

  1. <p class="voorbeeldClass">Dit P element heeft de CSS class "voorbeeldClass" aan zich gekoppeld</p>

ID selector:

  1. <p id="voorbeeldID">Dit P element heeft als ID "voorbeeldID"</p>

Het grootse verschil tussen de "Class" en de "ID" selector is dat een "ID" selector maar éénmaal per pagina mag voorkomen, terwijl een "class" selector onbeperkt gebruikt mag worden. In CSS zit er wel een klein verschil in hoe je dit dient te gebruiken:

  1. /* Zo selecteer je een element met de "Class" "voorbeeldClass": */
  2. p.voorbeeldClass {
  3.   color: #FF0000;
  4. }
  5.  
  6. /* Zo selecteer je een element met het ID "voorbeeldID": */
  7. p#voorbeeldID {
  8.  color: #FF0000;
  9. }

Het grote verschil zit hem dus dat bij een class, welke je onbeperkt in een pagina mag gebruiken, er een . (punt) gebruikt wordt. Bij een ID, welke je maar éénmaal per pagina mag gebruiken, een # (hekje) gebruikt wordt.

Selectie verfijnen
Het is ook mogelijk om je selectie te verfijnen. Dit is heel makkelijk wanneer je alleen de links in bijvoorbeeld je navigatie wilt aanpassen. In dit voorbeeld ga ik er even vanuit dat je een P element hebt gebruikt voor de navigatie. De CSS code zal er dan als volgt uitzien:

  1. p#navigatie a {
  2.  color: #FF0000
  3. }

In dit stukje code geeft ik alle links in het P element met het navigatie ID de kleur rood. Dit kun je eventueel nog verder verfijnen. In dit voorbeeld geef ik de link naar contact de kleur groen. Ik ga er in dit voorbeeld vanuit dat link een ID heeft genaamd contact

  1. p#navigatie a#contact {
  2.  color: #00FF00;
  3. }

De HTML code voor dit menu zou er als volgt uit kunnen zien:

  1. <p id="navigatie">
  2.   <a href="home.html" id="home">Home</a>
  3.   <a href="overmij.html" id="overmij">Over mij</a>
  4.   <a href="mijnhuisdieren" id="mijnhuisdieren">Mijn huisdieren</a>
  5.   <a href="contact.html" id="contact">Contact</a>
  6. </p>