‹Return to search

HTML & CSS 04 - 4.1 tmt 4.3 - CSS methodes, opmaak

HTML & CSS

1 / 26

Slide 1: Slide

InformaticaWOStudiejaar 4,5

This lesson contains 26 slides, with interactive quizzes and text slides.

Lesson duration is: 45 min

Items in this lesson

HTML & CSS

Slide 1 - Slide

This item has no instructions

Fundament

Kerndomein A

A2. HTML & CSS

Hoofdstuk 4.1 tmt 4.3

https://fundament-online.nl/leeromgeving/content.php?paragraaf_id=114663

Slide 2 - Slide

This item has no instructions

Leerdoelen:

Na deze les kun je:

vertellen waar CSS voor staat en wat het doet
commentaar toevoegen aan CSS
drie manieren beschrijven om CSS in HTML te gebruiken
aangeven welke rangorde tussen de 3 manieren bestaat
beschrijven hoe CSS regels er uitzien

Slide 3 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

CSS

CSS staat voor Cascading Style Sheet

Dit betekent ruwweg: "Overkoepelend StijlDocument"

Een (extern) CSS bestand is een tekstbestand met de bestandsextensie .css

Voordat we ingaan op hoe we CSS opmaken, eerst de manieren waarop je het kan gebruiken:

Slide 4 - Slide

This item has no instructions

CSS: 3 methoden

external
internal
inline

Je kunt alle 3 manieren naast elkaar gebruiken

Slide 5 - Slide

This item has no instructions

CSS: external 1/3

1. external
extern tekstbestand waarnaar in je .html bestand wordt verwezen in de <head> in een <link>:

Deze link kan relatief of absoluut zijn

Let op: het is een href link (een verwijzing, geen bron)

Slide 6 - Slide

This item has no instructions

CSS: external 2/3

Vier opmerkingen:

unpaired tag: <link>
rel="stylesheet": geeft relatie aan van de link
type="text/css": geeft type bestand van de link
href="...": pad en bestand van extern CSS bestand

Slide 7 - Slide

This item has no instructions

CSS: external 3/3

We gaan het later over de precieze opmaak hebben, maar de CSS in een external CSS bestand ziet er zo uit:

Slide 8 - Slide

This item has no instructions

CSS: internal

2. internal
de CSS stijl staat in je .html bestand in de <head> in een <style> tag:

Slide 9 - Slide

This item has no instructions

CSS: inline

2. inline
bij elke tag geef je in je .html via <style> afzonderlijk je CSS stijl:

Dat geldt dan alleen voor die tag!

Slide 10 - Slide

This item has no instructions

Welke van onderstaande is INLINE CSS?

A

<a style="color: red">

B

<head> <link href="a.css"> </head>

C

<head><style> a {color:red;} </style></head>

D

(/¯◡ ‿ ◡)/¯ ~ ┻━┻

Slide 11 - Quiz

This item has no instructions

Welke is INTERNAL CSS?

A

<a style="color: #c0c0c0">

B

<head> <link href="a.css"> </head>

C

<head><style> a {color:red;} </style></head>

D

（°々°）

Slide 12 - Quiz

This item has no instructions

Welke is EXTERNAL CSS?

A

<a style="color: red">

B

<head> <link href="a.css"> </head>

C

<head><style> a {color:red;} </style></head>

D

┻━┻ ︵ ლ(⌒-⌒ლ)

Slide 13 - Quiz

This item has no instructions

Welke is INTERNAL CSS?

A

<a style="color: red">

B

<head> <link href="a.css"> </head>

C

<head><style> a {color:red;} </style></head>

D

( ͠° ͟ʖ ͡° )

Slide 14 - Quiz

This item has no instructions

Welke van onderstaande is INLINE CSS?

A

<a style="color: red">

B

<head> <link href="a.css"> </head>

C

<head><style> a {color:red;} </style></head>

D

ᕦ(⪧︹⪦)ᕤ

Slide 15 - Quiz

This item has no instructions

CSS: basis opmaak 1/5

CSS is dus voor opmaak (ook wel: stijl)

Daarvoor gebruikt CSS zgn. selectoren

er zijn meerdere selectoren, maar het meest gebruikt zijn:

tag selector
id selector

Slide 16 - Slide

This item has no instructions

CSS: basis opmaak 2/5

De opmaak van internal en external is gelijk:

Elke selector begint met een ander teken:

tag: (geen teken dus)
id: #
alle elementen: *
class: . er zijn een heleboel selectoren!

Slide 17 - Slide

This item has no instructions

CSS: basis opmaak 3/5

De opmaak van internal en external is gelijk:

selector {

eigenschap: waarde;

eigenschap: waarde;

}

Elke regel in de { } eindigt op een ;

Slide 18 - Slide

This item has no instructions

CSS: basis opmaak 4/5

Je kunt selectoren ook combineren, maar het gaat te ver om hier alle combinaties te bespreken (w3schools heeft een overzicht)

Als je met CSS meerdere selectoren wil opmaken, kun je de selectoren scheiden met een ,

Ook verschillende selectoren

kun je combineren

Slide 19 - Slide

This item has no instructions

CSS: basis opmaak 5/5

De inline opmaak is anders...

maar ook een beetje hetzelfde

style=" eigenschap: waarde; eigenschap: waarde; "

Elke eigenschap-waarde regel eindigt met een ;

Inline CSS geldt alleen voor die betreffende tag

Slide 20 - Slide

This item has no instructions

CSS: voor- en nadelen

Internal en external hebben als voordeel dat ze in principe gelden voor de selectoren die erin vermeld staan

Dit is met name handig als je meerdere HTML bestanden hebt die je hetzelfde wil opmaken

Nadeel (en voordeel) van inline is dat - zoals gezegd - de stijl van de inline CSS alleen voor dat element geldt

Slide 21 - Slide

This item has no instructions

Maak een HTML bestand met external,
internal, EN inline CSS
Bepaal welke voorrang krijgt

timer

4:00

Slide 22 - Open question

This item has no instructions

Opdracht

1) Neem de HTML en CSS over

(niet het commentaar)

2) Bepaal

welke manier

voorrang

heeft

(inline, external, internal?)

timer

10:00

Slide 23 - Slide

This item has no instructions

CSS: naast elkaar

Zoals eerder gezegd kun je de 3 manieren naast elkaar gebruiken, om conflicten op te lossen moet er daarom natuurlijk wel een rangorde zijn:

Inline > Internal > External

Slide 24 - Slide

This item has no instructions

Leerdoelen

Je kunt:

vertellen waar CSS voor staat en wat het doet
commentaar toevoegen aan CSS
drie manieren beschrijven om CSS in HTML te gebruiken
aangeven welke rangorde tussen de 3 manieren bestaat
beschrijven hoe CSS regels er uitzien

Slide 25 - Slide

Rode achtergrond betekent: klas is stil, dit zijn de leerdoelen en quizzes waarbij niet overlegd mag worden.

Doel van deze les is om het leren zichtbaar te maken voor zowel leerling als docent.

Exit ticket

https://forms.gle/7J97NiRs9nqWjk5V6

Slide 26 - Slide

This item has no instructions

HTML & CSS 05 - 4.4 tmt 4.9 - CSS kleuren, hyperlinks, lijsten, tabellen, valideren

September 2023 - Lesson with 34 slides

InformaticaWOStudiejaar 4,5

HTML & CSS 90 - herhaling

June 2023 - Lesson with 33 slides

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

HTML & CSS: Opmaak met CSS

September 2024 - Lesson with 21 slides

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

03 - CSS - css toevoegen

November 2023 - Lesson with 11 slides

ICTMBOStudiejaar 1,2

HTML & CSS: Opmaak met CSS

September 2024 - Lesson with 18 slides

InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

03 - CSS - Toevoegen: de integratie met HTML

April 2024 - Lesson with 10 slides

ICTMBOStudiejaar 1,2

WEEK 3 - INFORMATICA

September 2024 - Lesson with 33 slides

InformaticaMiddelbare schoolhavoLeerjaar 4

Les4 - CSS Selectoren: HTML Elementen Aanspreken

August 2024 - Lesson with 22 slides

Applicatie- en mediaontwikkelaarMBOStudiejaar 1