What is LessonUp
Search
Channels
Log in
Register
‹
Return to search
Webdesign (3: CSS)
Webdesign: CSS
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 16
next
Slide 1:
Slide
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
This lesson contains
16 slides
, with
interactive quizzes
and
text slides
.
Lesson duration is:
30 min
Start lesson
Save
Share
Print lesson
Items in this lesson
Webdesign: CSS
Antje Roestenburg
a.roestenburg@minkema.nl
Slide 1 - Slide
Herhaling: Structuur van een webpagina
Slide 2 - Slide
Herhaling: Structuur van een HTML element
Slide 3 - Slide
Hoe werkt CSS?
Een stylesheet maak je in een
eigen bestand
.
Je slaat het bestand op met de naam
style.css
.
Je
verwijst in al je HTML-pagina's
naar de stylesheet.
(zie ook
w3schools.com/css
)
Slide 4 - Slide
Wat is CSS?
Slide 5 - Mind map
HTML
HyperText Markup Language
INHOUD & STRUCTUUR
(paragraph, kopje, links, etc)
CSS
C
ascading Style Sheets
OPMAAK
(kleur, lettertype, plaatsing, etc.)
Slide 6 - Slide
Waarom CSS?
Slide 7 - Mind map
Waarom CSS?
Alle opmaak van de website in
één
bestand.
Een kleine verandering wordt
gelijk
doorgevoerd op alle
pagina's van je
website.
Maakt de HTML-code een stuk
overzichtelijker.
Slide 8 - Slide
Hoe werkt CSS?
Slide 9 - Slide
Hoe werkt CSS?
Een stylesheet maak je in een
eigen bestand
.
Je slaat het bestand op met de naam
style.css
.
Je
verwijst in al je HTML-pagina's
naar de stylesheet.
(zie ook
w3schools.com/css
)
Slide 10 - Slide
Hoe werkt CSS?
<html>
<head>
<title>Dit is de titel van pagina 1</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<p>Dit is de eerste alinea van pagina 1</p>
</body>
</html>
Slide 11 - Slide
Hoe is CSS opgebouwd?
Slide 12 - Slide
(zonder CSS)
style.css
h1 {color: yellow;}
p {color: #e88300;}
Voorbeeld
Slide 13 - Slide
Voorbeeld
body {
background-color: lightblue;
}
h1 {
color: #88cc00;
}
p {
font-family: verdana;
font-size: 18px;
}
Slide 14 - Slide
Opmaak definiëren met selectors
Tag selector (HTML tag)
h2
{
color: blue;
font-style: italic;
}
ID selector (een per pagina)
#footer {
color: red;
}
Class
selector (meerdere)
.article {
background-color: #cccccc;
}
Slide 15 - Slide
Aan de slag:
Kijk t/m video 4
Maak t/m opdracht 12 (stel evtl vragen in het Q&A document)
Verzamel ideen (teksten en plaatjes) voor je Website
Volgende les:
Tabellen
Slide 16 - Slide
More lessons like this
CSS - Introductie
October 2018
- Lesson with
10 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
Webdesign (6: CSS Grid)
March 2021
- Lesson with
15 slides
Informatica
Middelbare school
havo, vwo
Leerjaar 4,5
2. Lists en CSS Basics
September 2020
- Lesson with
30 slides
Software Developer [WEB_A]
MBO
Studiejaar 1
3. CSS Box Model
September 2020
- Lesson with
18 slides
Software Developer [WEB_A]
MBO
Studiejaar 1
4. Divisions en Classes
September 2020
- Lesson with
26 slides
Software Developer [WEB_A]
MBO
Studiejaar 1
20MVABCD | HTML & CSS quiz
June 2020
- Lesson with
12 slides
web
MBO
Studiejaar 1
HTML & CSS quiz --> Les 2
June 2020
- Lesson with
10 slides
web
MBO
Studiejaar 1
HWUD04-sj2122-03-HTML-document
February 2021
- Lesson with
31 slides
Communication & multimedia design
HBO
Studiejaar 2