‹Return to search

Webdesign (3: CSS)

Webdesign: CSS
Antje Roestenburg
a.roestenburg@minkema.nl
1 / 16
next
Slide 1: Slide
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

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

time-iconLesson duration is: 30 min

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.

Slide 4 - Slide

Wat is CSS?

Slide 5 - Mind map



HTML
HyperText Markup Language 


INHOUD & STRUCTUUR 
(paragraph, kopje, links, etc) 



CSS
Cascading 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.

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

2 HTML: CSS

- Lesson with 17 slides

Webdesign - Les 2 (22/23)

- Lesson with 30 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Webdesign - Les 3 (23/24): CSS

- Lesson with 24 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4

Webdesign (6: CSS Grid)

- Lesson with 15 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

CSS - Introductie

- Lesson with 10 slides
InformaticaMiddelbare schoolhavo, vwoLeerjaar 4,5

CSS_ALA_webdesign 1

- Lesson with 10 slides
Applicatie- en mediaontwikkelaarMBOStudiejaar 1

03 - CSS - css toevoegen

- Lesson with 11 slides
ICTMBOStudiejaar 1,2

03 - CSS Toevoegen: de integratie met HTML

- Lesson with 10 slides
ICTMBOStudiejaar 1,2