4. Divisions en Classes

• Software Developer [WEB_A]
• MBO
• Studiejaar 1

WEB

Webdevelopment-I (WDV-I)

Les 4 / Week 4

Divisions en Classes

Week 4 // WEB

Divisions & Classes

Oktober 2021

Hoe kan ik mijn gehele header een lettertype 'Verdana' geven en de kleur van de letters op groen?

:

:

(

}

)

{

header

font

text-color

Verdana

green

font-family

color

;

;

Op welke manier kan ik mijn a-element een dubbele rand geven van 3 pixel dikte en met de kleur oranje.

Hoe noem ik de groene stippels om het element heen?

1. Content
2. Padding
3. Border
4. Margin

Hoe noem ik de ruimte tussen de tekst 'Link2' en de groene stippels?

1. Content
2. Padding
3. Border
4. Margin

Hoe noem ik de ruimte tussen de elementen?

1. Content
2. Padding
3. Border
4. Margin

Sneltoetsen

CTRL + SHIFT + I (in browser): Inspecteren van je code 

CTRL + SHIFT + R: Refreshen van je browser

CTRL + / (in editor): code-regel wordt in comment gezet of uit comment gehaald.

CTRL + X: knippen, CTRL + C: kopiëren, CTRL + V: plakken

tab: 1 tab verder naar rechts uitlijnen (in HTML als de verhouding parent tot child)

SHIFT + tab: 1 of meerdere regels 1 tab verder naar links uitlijnen.

display: block

• Voor het betreffende element wordt de gehele ingestelde breedte (width) ingenomen.
  Als de breedte (width) van het betreffende blok/kamer niet is ingesteld wordt hier standaard het gehele blok (hele regel dus) gevuld. 
• Handig als we een lijstje willen met items onder elkaar (en niets ernaast), 
• Niet handig als we een navigatiebalk willen met meerdere links naast elkaar. 
• Met inspecteren in onze browser (CTRL + SHIFT + J) kunnen we door over een element te hooveren goed zien welk deel van de pagina ingenomen wordt door een element.
• Een block is handig als we de volledige breedte van een kamer willen gebruiken.
• Standaard krijgen de volgende HTML-elementen een display: block:

<h1> t/m <h6>, <p>,  <li>,  <div>,  <main>, <footer>, <section>

display: inline

• Elementen binnen hun kamer verschuiven
• De sectie reikt van 1e tot laatste letter van de content (uit te breiden met padding).
• Naast element is nog ruimte voor ander element.

Wat is een logische display voor mijn <a>-element op een navigatiebalk?.

1. inline
2. block
3. position
4. fixed

CSS property display: inline of block

Als ik een element over de volledig ingestelde breedte wil laten zien gebruik ik property:

1. text-align: center
2. display: inline
3. display: block
4. width: 100px;

Classes

Onze site bestaat uit kamers (divisions).

Op die kamers kunnen we losse eigenschappen toepassen als we er een class aan toekennen.

Een classes-voorbeeld

Classes aanspreken in CSS

Voorbeeld class 'song'

Hoe spreek ik een class 'hero-menu' aan in CSS?

1. hero-menu { }
2. .hero-menu { }
3. #hero-menu { }
4. $hero-menu { }

Beschrijf waarom je een class zou willen gebruiken?

Wat is margin?

Opdracht 4.2: werkblad classes

Je krijgt een werkblad met opdrachten waarbij je classes zult moeten aangeven of zult moeten

toekennen. Het kan ook zijn dat je CSS-waarden moet toevoegen aan bepaalde classes.

Opdracht 4.3: pagina met classes

Laten we aan onze hobbies.html-pagina eens wat classes toevoegen (in project ‘myportfolio’) een aantal classes toevoegen. Op die manier kunnen we meerdere soortgelijke elementen op dezelfde manier stijlen.

1. Denk na over drie hobby’s die je hebt. Die gaan we hierna gebruiken.

2. Als je dit nog niet gedaan had zet je de basisstructuur op en kopieer je de gegevens uit de header van de ‘index.html’ naar’ hobbies.html. Doe dit ook voor de footer.

3. Check of je stylesheet gelinkt is met een linkelement in de head.

4. We gaan aan de slag in de main.

5. Voeg in de main een h2 toe met de tekst ‘Hobbies’

6. Voeg onder het h2-element een division met class ‘hobby’ toe. (typ ‘.div’ en druk op tab).

7. Zet in de div:

• Een h3 met daarin jouw eerste hobby.

• Voeg hieronder een p toe met daarin een beschrijving van jouw hobby. Sluit de div af met </div>

• Voeg tot slot een afbeelding toe van jouw hobby

• Sluit de div. af met </div>

8. Herhaal opdracht 4 en 5 nog drie keer, zodat je 4 hobby’s in vier classes hebt staan.

9. Ga naar je style.css en spreek de class ‘.hobby’ aan.

10. Geef de class een border van 1px double grey en een breedte van 300px.

11. Geef de class een achtergrondkleur met kleurcode ‘#C6EBBE.

12. Geef de class een padding van 10px.

13. Check je resultaten tussentijds steeds in de browser.

1. Herhaal opdracht 4 en 5 nog drie keer, zodat je 4 hobby’s in vier classes hebt staan.

2. Ga naar je style.css en spreek de class ‘.hobby’ aan.

3. Geef de class een border van 1px double grey en een breedte van 300px.

4. Geef de class een achtergrondkleur met kleurcode ‘#C6EBBE.

5. Geef de class een padding van 10px.

6. Check je resultaten tussentijds steeds in de browser.

Id's

• Kan hetzelfde als een class.
• Id kun je maar 1x gebruiken.
• Veel gebruikt bij JavaScript.
• Wij gebruiken classes bij stylen van pagina's

Wrapper

Opdracht 4.4: een wrapper toevoegen en display aanpassen

1. Voeg direct onder de header, main en footer een div class met naam ‘wrapper’ toe en sluit hem af precies vóór de eindtag van alle drie de sitedelen. Let op het indenten.

2. Vervang het body-element in CSS door .wrapper met een width van 968px en een margin: 0 auto.

3. Check of de achtergrond voor de header en footer en voor de main nog is ingesteld.

4. De webpagina is nu in het midden uitgelijnd, terwijl de achtergrond de hele breedte van de pagina vult.