Week 5 - Les 1

• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 2

Kennismakingsronde

• Terugblik
  
• display: flex
  
• Jarvis modules met ondersteuning

Doelen

Hoe zorg je er in css voor dat alleen de kopje 'Inleiding' en 'Hoofdstuk 1' de kleur blauw krijgen voor deze html?

Hoe zorg je er in css voor dat alleen het kopje 'Inleiding' de kleur blauw krijgt voor deze html-code?

Sleep de onderdelen vanuit de css naar de juiste definitie aan de rechterkant.

Selector

Property

Value

H1

.hs_blauw

#submit_knop

font-size

color

12pt

grey

Kennismakingsronde

• .Standaard 'gedrag' van elementen
• Bijvoorbeeld div en headers(h1 etc.) block
• img en a inline naast elkaar
• Per tag te veranderen in css met display:block of display:inline
• veelgebruikt alternatief is display-flex
  

Inline en block

Kennismakingsronde

In CSS is display een eigenschap die bepaalt hoe een HTML-element zich gedraagt op een webpagina. Wanneer je display: flex; toepast op een container-element, zoals een <div>, verandert dit de manier waarop de elementen binnen die container worden weergegeven en gepositioneerd.

Display: flex

Kennismakingsronde

Belangrijkste eigenschappen

• flex-direction  (container)
  
• justify-content (container)
  
• align-items (items)
  

Display:flex

Kennismakingsronde

• Flex-box en andere html/css onderwerpen herhalen samen
• Bestuderen : https://www.w3schools.com/css/css3_flexbox_container.asp
  
• Verder met Jarvis

Opties

Evaluatie - noem twee dingen die nieuw waren voor jou en die je in deze les hebt geleerd