Terug

HTML & CSS Les 2 – Introductie CSS

CSS – 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 les2.html. Kijk of je in de browser les2.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, dit niet aanpassen! */
    
    html {
      box-sizing: border-box;
    }
    *, *:before, *:after {
      box-sizing: inherit;
    }
    body {
      margin: 0;
      padding: 0;
      min-height: 100vh;
    }
    img {
      max-width: 100%;
      height: auto;
    }
    
    /* 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 de opmaak 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:

    p {
        /* Hier komt de opmaak die voor alle paragrafen moet gelden */
    }
    

    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.

id

In het vorige practicum heb je geleerd hoe je álle elementen van een bepaald type, bijvoorbeeld alle <img> of alle <p> tags, kunt opmaken. Maar wat nou als je één specifiek element wil opmaken, bijvoorbeeld één paragraaf op je pagina?

Dan geef je dat element in HTML een id-attribuut, bijvoorbeeld:

<p id="contactinformatie">Stuur me een mail!</p>

Vervolgens kun je in CSS met een # diezelfde id gebruiken om het element op te maken:

#contactinformatie {
  font-weight: bold;
}

Let op: een id mag je per HTML pagina maar één keer gebruiken!

  1. Geef in je HTML bestand een paragraaf en een afbeelding ieder een ander id en daarmee opmaak in CSS.

class

Als je meerdere elementen dezelfde opmaak wil geven, geef ze dan een class attribuut.

<a href="index.html" class="menu-item">Home</a><br>
<a href="les2.html" class="menu-item">Tweede pagina</a><br>
<a href="http://cmd.camp" class="menu-item">CMD.CAMP</a>

In het bovenstaande voorbeeld zie je drie hyperlinks, <a>-tags. Met deze drie links kunnen we een simpel menu maken, door ze bijvoorbeeld een achtergrondkleur te geven. Maar we willen natuurlijk niet álle links op de pagina die achtergrondkleur geven.

Daarom geven we alleen de links in het menu een class. Met een punt kun je de class vervolgens aanduiden in CSS:

.menu-item {
  background-color: rgb(255,0,255);
}
  1. Plak bovenstaande HTML in zowel index.html als in les2.html. Plak de css in je css bestand. Als het goed is zie je nu op beide pagina’s je menu. Vergeet niet om ook in index.html een koppeling te maken met je CSS (zie stap 3)

  2. Voeg deze code toe aan je css bestand, je ziet nu dat als je met je muis over een menu-item gaat het een andere kleur krijgt:

    .menu-item:hover {
      background-color: rgb(0,0,255);
    }