IAI: Les 2 Vakjes maken. Rick Hazebroek

Een class-naam mag geen hoofdletter en ook geen spaties bevatten. Daarom gebruiken we een streepje waar we een spatie bedoelen. Bekijk het resultaat met het bliksempje rechtsboven. Er valt nu nog niet heel veel te zien. Dat gaan we in de volgende opdrachten doen.

4


 Opdracht 3:
 Een CSS-bestand (stylesheet) maken In les 2 hebben we ook een CSS-bestand gemaakt. In een CSS-bestand kunnen we ons HTML-document vormgeven. CSS is een andere taal dan HTML en plaatsen we daarom in een ander bestand, een .css bestand. Een nieuw bestand aanmaken deden we met File > New. Het opslaan van het bestand deden we met File > Save as… We noemden bestand style.css. Het bestand moest in dezelfde map als index.html worden opgeslagen, in onze Converse Zwolle map.
 (powerpoint les 2: opdracht 3).


Opdracht 4: 
 Elk vakje (elke div-tag) een hoogte en achtergrondkleur geven Daarna hebben we elk vakje (elke div-tag) een achtergrondkleur gegeven in het CSS-bestand. Dit werkt als volgt. Stel we willen het vakje (de div-tag) met de class logo een hoogte geven. We typen dan een punt (.) gevolgd door de class-naam. We kunnen de class-naam lezen tussen de aanhalingstekens achter class=. Zie hieronder:


 De naam is dus logo. In style.css typen we dan dus een punt gevolgd door logo: .logo{
 
 }


 Tussen de accolades ( { en } ) kunnen we een eigenschap en een waarde meegeven. We willen de hoogte meegeven, dit doen we met de eigenschap height. Vervolgens geven een waarde mee, in dit geval is dat de hoogte in pixels. Dit doe je door een getal met daarachter px in te voeren. Het resultaat: 5

.logo{
 height: 200px;
 }


 Om het vakje te kunnen bekijken moeten we het nog een achtergrondkleur geven. Dit doen we met de eigenschap backgroundcolor. De waarde is een kleurcode in de vorm van een hexcode. Dat is een # gevolgd
 door 6 cijfers/letters. Deze vind je in Photoshop wanneer je dubbel op een kleur drukt of op de website kuler.adobe.com. .logo{
 height: 200px;
 background-color: #000000;
 }


 Deze stappen hebben we voor de andere div-tags herhaald. Je kunt verder gaan onder de accolade naar rechts. Wil je nu bijvoorbeeld het vakje van de Ticket for two actie vormgeven, dan kan dat bijv. zo.. .ticket-for-two{
 height: 200px;
 background-color: #333333;
 }


 Zorg dat de class-namen in je CSS overeenkomen met de class-namen uit je HTML. Bekijk het resultaat in een browser door op het bliksempje rechtsboven te drukken.

6