Terug

CSS 1 – Introductie

  1. We werken verder in de map die je voor HTML les 1 en 2 hebt gemaakt
    Rechtsklik op index.html en klik op Copy en vervolgens Paste, om een kopie van je pagina te maken. Noem (Rename) deze kopie practicum3.html. Kijk of je in de browser practicum3.html kunt openen om te controleren of alles goed is gegaan.
  2. Maak ook een nieuw bestand, dat je style.css noemt.
  3. Koppel het HTML bestand aan het CSS bestand, door dit in de head van je HTML bestand te plakken:
    <link rel="stylesheet" href="style.css">
    
  4. Reset
    HTML en CSS bestaan al heel wat jaren, en zijn bedacht toen we nog heel anders dachten over hoe een website er uit moest zien dan nu. Daarom zitten er in beide talen nog wat ‘onhandigheidjes’. In CSS kunnen we die onhandigheidjes er vrij gemakkelijk uit halen door onderstaand stukje code bovenaan je CSS bestand te plakken. In deze ‘reset’ code worden een aantal technieken gebruikt die wat gevorderd zijn. Daarom leggen we nog niet uit wat deze code doet, maar weet dat we hiermee een boel frustraties voorkomen.

    /* CSS reset */
    
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }
    
    /* Hieronder mag je eigen CSS code */
    

    Plak deze code bovenaan je nieuwe CSS bestand. Verander deze code niet, maar maak je eigen code onder deze regels.

  5. We willen, om te beginnen, onze pagina een achtergrondkleur geven, en een standaard lettertype voor de hele pagina instellen. Om dit te doen gebruiken we de body als selector in CSS:

    body {
        /* Hier komt je code die voor de hele body moet gelden */
    }
    

    Zoek op http://www.w3schools.com/cssref/default.asp naar de property om een achtergrondkleur in te stellen, en hoe je deze gebruikt. Geef de body een mooie achtergrondkleur. Blijf elke stap testen!

    Kleuren
    Je kunt binnen CSS op drie verschillende manier een kleur instellen. Met een naam yellow, met een ‘RGB’ waarde rgb(255,255,0), of met een ‘hex’ waarde #ffff00. Wij raden je aan om zo veel mogelijk RGB waardes te gebruiken, omdat je die bijvoorbeeld in Photoshop ook gebruikt.

    Op bijvoorbeeld http://www.colorpicker.com/ kun je RGB waardes uitzoeken.

  6. Lees onderstaande tekst en stel een lettertype in voor je body

    Lettertypes
    Je bent binnen CSS afhankelijk van de lettertypes die de gebruiker op zijn computer heeft geïnstalleerd. Je kunt dus niet zomaar elk lettertype gebruiken. Bovendien is het ook gebruikelijk om een aantal alternatieven aan te geven.

    Bijvoorbeeld:
    font-family: Helvetica, Arial, Sans-serif;
    Mac gebruikers hebben Helvetica standaard geinstalleerd op hun computer, in dit geval zal de body in Helvetica te lezen zijn. Als je geen Helvetica hebt (bijvoorbeeld de meeste Windows gebruikers), dan wordt het volgende alternatief gekozen en is de pagina dus te lezen in Arial.

    Zie http://www.w3schools.com/cssref/css_websafe_fonts.asp voor meer informatie.

  7. Om specifieke elementen, zoals alle paragrafen, een ander opmaak te geven, gebruik je de bijbehorende selector in CSS:
    Geef nu je paragrafen een letterkleur. Zoek zelf op internet hoe je de kleur van de tekst veranderd.

    Let op: CSS wordt, in tegenstelling tot HTML, niet genest geschreven. Dat wil zeggen dat je alle elementen onder elkaar in plaats van in elkaar schrijft.

    Goed:

    body {
        /* some css */
    }
    
    p {
        /* more css */
    }
    
    h1 {
        /* also css */
    }
    

    Fout:

    body {
        p {
            /* more css */
        }
        h1 {
            /* also css */
        }
    }
    
  8. Geef vervolgens je titels (h1 en h2) een andere letterkleur, achtergrondkleur, lettertype en lettergrootte dan wat ze standaard hebben.

  9. Maak in dit HTML bestand een hyperlink naar index.html. Geef de hyperlink een andere kleur met CSS.
    Tip: je kunt ook zorgen dat als je met de muis over de hyperlink gaat, hij er anders uit ziet. Dit heet in CSS hover, als je hier op zoekt kun je vast vinden hoe dat moet.

  10. Zoek op wat de text-align property doet en experimenteer wat er gebeurt als je deze property toevoegt aan de body of aan titels

  11. Experimenteer met wat er gebeurt als je de width en height properties toepast op afbeeldingen of paragrafen.

    Afmetingen
    Voor properties zoals width en height kun je meerdere maat-eenheden gebruiken: als je een afbeelding width: 100px geeft zal het plaatje precies 100 pixels breed worden. Bij width: 50% wordt het plaatje 50% van de beschikbare ruimte.