CSS review - HWUD04 20:21

• Communication & multimedia design
• HBO
• Studiejaar 2

& CSS

Hoeveel ECTS krijg je voor HWUD04?

1. 2 ECTS
2. 3 ECTS
3. 4 ECTS
4. 5 ECTS

Hoeveel uur moet je dus aan HWUD04 werken?

1. 22 uur
2. 56 uur
3. 84 uur
4. 112 uur

22-28 uur is ingepland

84 uur is zelfstudie / huiswerk

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

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

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}

Maak een tabel

<table>

HTML & Tekst

</table>

<td>

</td>

<tr>

</tr>

HTML tabellen

Vroeger maakten we layouts met tabellen. Nu is dat NOT DONE!

Koppen boven tabellen maak je met <th>

Rijen: <tr> cellen: <td>

zie ook W3schools

Schrijf CSS om een zwarte rand van 1px om elke tabel-cel te plaatsen

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?

<div 

="uniekenaam"

="groepblauw">

<div

="naam2"

="groepblauw"

ID

Class

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

<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

Precedence

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

Tags zijn vaag.

Klasses zijn beter

ID's zijn super precies