Johan de Witt Scholengroep
‹Return to search

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
next
Slide 1: Slide
InformaticaMiddelbare schoolhavoLeerjaar 4

This lesson contains 15 slides, with interactive quiz and text slides.

time-iconLesson duration is: 90 min

Items in this lesson

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 - Slide

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 - Slide

What do you know about a CSS is ?

Slide 3 - Open question

 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 - Slide

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 - Slide

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 - Slide

Slide 7 - Slide

Applying CSS

Slide 8 - Slide

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

Slide 9 - Slide

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

Slide 10 - Slide

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 - Slide

Changing Colors and FontsCSS Selectors

Slide 12 - Slide

Adding Margins and Padding

Slide 13 - Slide

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 - Slide

TO ASK???

Slide 15 - Slide