HWUD04-sj2122-L2-CSS

   CSS
Cascading Style Sheets
1 / 22
volgende
Slide 1: Tekstslide
Communication & multimedia designHBOStudiejaar 2

In deze les zitten 22 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 15 min

Onderdelen in deze les

   CSS
Cascading Style Sheets

Slide 1 - Tekstslide

Disclaimer
Helaas heb ik nog geen goede lessonUp voor CSS.
Deze les vergt daarom voorkennis
Die doe je op met de powerpoint, W3Schools en vooral zelf pagina's stylen.

Slide 2 - Tekstslide

<div 
="uniekenaam"
="groepblauw">
<div
="naam2"
="groepblauw"
Wat moet waar?
ID
Class
ID
Class

Slide 3 - Sleepvraag

Hoe selecteer je in CSS het element met ID="webform"
A
.webform (punt)
B
webform (niets)
C
#webform (hashtag)
D
gebruik de muis

Slide 4 - Quizvraag

Hoe selecteer je in CSS het element met Class="menu"
A
.menu (punt)
B
menu (niets)
C
#menu (hashtag)
D
$menu

Slide 5 - Quizvraag

Je wil dat alle links op je website onderstreept worden. Hoe doe je dat?
A
a:active
B
a:hover
C
a
D
a:visited

Slide 6 - Quizvraag

Je wil tekst in een paragraaf een andere kleur geven. Welke tag gebruik je?
A
<div>
B
<span>
C
<nav>
D
<main>

Slide 7 - Quizvraag

je wil een kolom maken op je webpagina. Welke tag gebruik je?
A
<span>
B
<div>
C
<header>
D
<section>

Slide 8 - Quizvraag

Je wil de afstand tussen elementen aanpassen hoe doe je dat?
A
padding: 25px
B
distance: 25px
C
border: 25px
D
margin: 25px

Slide 9 - Quizvraag

Je wil aan de bovenkant meer afstand tussen de inhoud en de rand van een div. Hoe doe je dat?
A
padding-top: 2em
B
padding: 2em 0em 0em 0em
C
margin-top: 2em
D
margin: 2em 0em

Slide 10 - Quizvraag

Wat gebeurt hier?
div {margin: 0 auto}
A
De marge wordt aangepast aan het beeldscherm
B
de div wordt gecentreerd
C
De vertikale marge is 0
D
alle marges worden gereset

Slide 11 - Quizvraag

wat gebeurt hier?
li {padding: 0px 5px 25px 50px}

Slide 12 - Open vraag

Wat gebeurt hier?
<ol><li>tekst</li></ol>
A
Je krijgt een kop met scheve tekst
B
Genummerde lijst: 1. tekst
C
je krijgt een link
D
Je krijgt een lijst: • tekst

Slide 13 - Quizvraag

Ordered vs Unordered lists
Ordered Lists - tellen met ABC, I. II. III., abc, 123
Unordered lists -  • - ‣  ➢

Slide 14 - Tekstslide

Waar kan CSS allemaal voorkomen in een HTML-document?

Slide 15 - Open vraag

Hoe selecteer je in CSS het element met Class="menu"
A
.menu (punt)
B
menu (niets)
C
#menu (hashtag)
D
$menu

Slide 16 - Quizvraag

wat is Precedence in CSS?

Slide 17 - Open vraag

Welke kleur wordt de div?
<style>div {color: pink}</style>
...
<div style="color: green; color: blue">
A
pink
B
green
C
blue
D
black

Slide 18 - Quizvraag

Welke kleur wordt de tekst van de div?
<style>div {color: pink! important; color: yellow}</style>
...
<div style="color: green; color: blue">
A
pink
B
green
C
blue
D
black

Slide 19 - Quizvraag

In een linked-css-document staat:
a:hover {color: blue}
in het document staat in de head:
<style>a:hover {color: green}</style>
wat wordt het?
A
blue
B
green
C
black
D
solid

Slide 20 - Quizvraag

Precedence
Hoe preciezer je de selector definieert, des te meer precedence. 
Tags zijn vaag.
Klasses zijn beter
ID's zijn super precies

Slide 21 - Tekstslide

<style> div {color: green}
.klasse {color: yellow}
#ideetje {color: pink} </style>
...
<div id="ideetje" class="klasse">welke kleur word ik?</div>

A
Green
B
Yellow
C
Pink
D
Black

Slide 22 - Quizvraag