Link Search Menu Expand Document
HTML&CSS

Introduction to CSS

Class Agenda

  1. Recap of CSS Intro (from lesson 2)
  2. CSS Syntax
  3. CSS Selectors I
  4. How to add CSS to HTML

1. Recap of CSS Intro from Lesson 2?

  • What is CSS?
  • What does Style Sheet in CSS stand for?
  • How do the CSS rules and language looks like?

ETA: 10 mins

2. CSS Syntax

  • What does a CSS rule consist of?
  • How do you construct a declaration block for a CSS rule?

ETA: 10 mins

3. CSS Selectors I

  • How can we categorize the different selector groups?
  • What are the CSS Simple Selectors?
  • How do we use the CSS element selector?
  • How do we use the CSS id selector?
  • How do we use the CSS class selector?
  • How do we use the CSS universal selector?
  • How do we use the CSS grouping selector?

ETA: 40 mins

4. How to add CSS to HTML

  • What are the different ways to add css to HTML?
  • What is the CSS cascading and specificity order?
  • What happens if two identical CSS rules (with different values) are applied to same element?

ETA: 30 mins

Exercise Description

  • Create an external CSS file
  • Link it to your HTML file
  • Make your portfolio website look like this using the element, id and class CSS simple selectors

ETA: 20 mins

Glossary & Terminology

  • CSS cascade - CSS cascade is an algorithm that defines how to combine property values originating from different sources.
  • CSS Selector - A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. More on this here.
  • CSS specificity - CSS Specificity is the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied

Homework

  • Use internal CSS and Inline CSS to achieve the same result from the exercise in this class.

Resources