Johan de Witt Scholengroep
‹Terug naar zoeken

CSS

STARTKLAAR
  • Phones Away in Your Bag or Pocket
  • Take Off Your Coat and Sit in Your Seat
  • Sit in Your Assigned Seat (If Applicable)
  • Name Tag on the Table
  • Keep Your Laptop Closed
  • Notebook on the Table
  • Push Your Chairs in When Leaving the Classroom
1 / 15
volgende
Slide 1: Tekstslide
InformaticaMiddelbare schoolhavoLeerjaar 4

In deze les zitten 15 slides, met interactieve quiz en tekstslides.

time-iconLesduur is: 90 min

Onderdelen in deze les

STARTKLAAR
  • Phones Away in Your Bag or Pocket
  • Take Off Your Coat and Sit in Your Seat
  • Sit in Your Assigned Seat (If Applicable)
  • Name Tag on the Table
  • Keep Your Laptop Closed
  • Notebook on the Table
  • Push Your Chairs in When Leaving the Classroom

Slide 1 - Tekstslide

LEARNING OBJECTIVES
  • CSS stands for Cascading Style Sheets.
  • It is used to style and layout web pages.
  • CSS controls how HTML elements are displayed on the screen.
  • You can use CSS to change colors, fonts, spacing, and layout.

Slide 2 - Tekstslide

What do you know about a CSS is ?

Slide 3 - Open vraag

 Introduction to CSS
CSS stands for Cascading Style Sheets.
It is used to style and layout web pages.
CSS controls how HTML elements are displayed on the screen.
You can use CSS to change colors, fonts, spacing, and layout.

Slide 4 - Tekstslide

How CSS Works with HTML
HTML provides the structure of a web page, while CSS is responsible for the style.
CSS can be written in three ways:
Inline: Directly in the HTML element.
Internal: In a <style> block within the HTML file.
External: In a separate .css file.

Slide 5 - Tekstslide

Basic CSS Syntax
Selector: Selects the HTML element to style.
Property: Defines what you want to change (e.g., color, font size).
Value: Specifies the value of the property.

Slide 6 - Tekstslide

Slide 7 - Tekstslide

Applying CSS

Slide 8 - Tekstslide

RETROSPECTIVE
WHAT WENT WELL IN THE SPRINT
WHAT CAN BE IMPROVED
WHAT ARE YOU ENCOUNTERING IN YOUR DEVELOPMENT

Slide 9 - Tekstslide

RETROSPECTIVE
WHAT WENT WELL IN THE SPRINT
WHAT CAN BE IMPROVED
WHAT ARE YOU ENCOUNTERING IN YOUR DEVELOPMENT

Slide 10 - Tekstslide

CSS Selectors
  • Content:
  • Tag Selector: Selects all elements of a certain tag.
  • Example: h1 { color: blue; }
  • Class Selector: Selects elements with a specific class.
  • Example: .intro { font-size: 20px; }
  • ID Selector: Selects an element with a specific ID.
  • Example: #header { background-color: grey; }

Slide 11 - Tekstslide

Changing Colors and FontsCSS Selectors

Slide 12 - Tekstslide

Adding Margins and Padding

Slide 13 - Tekstslide

CSS Basics Recap
  • CSS is used to style and layout HTML elements.
  • There are different types of CSS selectors like tag, class, and ID.
  • You can change the colors, fonts, and spacing using CSS properties.
  • Practice using inline, internal, and external CSS.

Slide 14 - Tekstslide

TO ASK???

Slide 15 - Tekstslide