HWUD04-sj2122-L2-CSS

• Communication & multimedia design
• HBO
• Studiejaar 2

   CSS

Cascading Style Sheets

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.

<div 

="uniekenaam"

="groepblauw">

<div

="naam2"

="groepblauw"

Wat moet waar?

ID

Class

ID

Class

Hoe selecteer je in CSS het element met ID="webform"

1. .webform (punt)
2. webform (niets)
3. #webform (hashtag)
4. gebruik de muis

Hoe selecteer je in CSS het element met Class="menu"

1. .menu (punt)
2. menu (niets)
3. #menu (hashtag)
4. $menu

Je wil dat alle links op je website onderstreept worden. Hoe doe je dat?

1. a:active
2. a:hover
3. a
4. a:visited

Je wil tekst in een paragraaf een andere kleur geven. Welke tag gebruik je?

1. <div>
2. <span>
3. <nav>
4. <main>

je wil een kolom maken op je webpagina. Welke tag gebruik je?

1. <span>
2. <div>
3. <header>
4. <section>

Je wil de afstand tussen elementen aanpassen hoe doe je dat?

1. padding: 25px
2. distance: 25px
3. border: 25px
4. margin: 25px

Je wil aan de bovenkant meer afstand tussen de inhoud en de rand van een div. Hoe doe je dat?

1. padding-top: 2em
2. padding: 2em 0em 0em 0em
3. margin-top: 2em
4. margin: 2em 0em

Wat gebeurt hier?
div {margin: 0 auto}

1. De marge wordt aangepast aan het beeldscherm
2. de div wordt gecentreerd
3. De vertikale marge is 0
4. alle marges worden gereset

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

Wat gebeurt hier?

<ol><li>tekst</li></ol>

1. Je krijgt een kop met scheve tekst
2. Genummerde lijst: 1. tekst
3. je krijgt een link
4. Je krijgt een lijst: • tekst

Ordered vs Unordered lists

Ordered Lists - tellen met ABC, I. II. III., abc, 123

Unordered lists -  • - ‣  ➢

Zie W3schools of Javatpoint

Waar kan CSS allemaal voorkomen in een HTML-document?

Hoe selecteer je in CSS het element met Class="menu"

1. .menu (punt)
2. menu (niets)
3. #menu (hashtag)
4. $menu

wat is Precedence in CSS?

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

1. pink
2. green
3. blue
4. black

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

1. pink
2. green
3. blue
4. black

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?

1. blue
2. green
3. black
4. solid

Precedence

Hoe preciezer je de selector definieert, des te meer precedence. 

Tags zijn vaag.

Klasses zijn beter

ID's zijn super precies

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

1. Green
2. Yellow
3. Pink
4. Black