HTML & CSS Les 2 – Introductie CSS

CSS – Introductie

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.
Maak ook een nieuw bestand, dat je style.css noemt.
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">
```
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.
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 W3Schools 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. Welke je gebruikt maakt voor nu niet zo veel uit.

Op bijvoorbeeld http://www.colorpicker.com/ kun je RGB waardes uitzoeken.
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.
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 */
    }
}
```
Geef vervolgens je titels (h1 en h2) een andere letterkleur, achtergrondkleur, lettertype en lettergrootte dan wat ze standaard hebben.
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.
Zoek op wat de text-align property doet en experimenteer wat er gebeurt als je deze property toevoegt aan de body of aan titels
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

Hierboven 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!

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);
}

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)
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);
}
```

Quiz

Hoe geef ik in CSS álle h1 koppen opmaak?

h1 { color: red ;}

#h1 { color: red; }

.h1 { color: red; }

Als je een bepaald element wil selecteren, typ dan gewoon de naam, zonder # of .

Check Volgende

Wat is het verschil tussen een id en een class?

Een id mag je meerdere keren gebruiken, een class één keer per pagina.

Een class mag je meerdere keren gebruiken, een id één keer per pagina.

id’s gebruik je om één element op de pagina een naam te geven. In een class mogen meerdere elementen zitten. Net als dat jouw id uniek voor jouw is, die mag niemand anders gebruiken. Maar in een klas mogen meerdere studenten zitten.

Check Volgende

Ik heb een afbeelding de volgende class gegeven: <img class='portret'>. Hoe spreek ik deze afbeelding aan in CSS?

portret

#portret

.portret

class=’portret’

Classes duid je in css aan met een punt.

Check Volgende

Quiz voltooid!