CSS — an introduction

Cascading style sheets (CSS) refers to an internet design language that facilitates the look and feel of a website and its components.

CSS looks like this:

h1 {
  font-size: 48px;
  color: red;
}

h2 {
  font-size: 24px;
  color: blue;
  margin-bottom: 30px;
}

.overlapping {
  position: absolute;
  top: 0;
  z-index: 10000;
}

Thus, each chunk of CSS code typically consists of a:

• Selector
  • a grouping of HTML objects
    • i.e. everything before the curly braces
• Declaration (or declarations)
  • a pair or pairs of properties and values
    • i.e. everything inside the curly braces

Topics

• Introduction
  • 🎨🛡️ CSS in HTML
    • CSS in an HTML page
    • What "CSS" means
• CSS basics
  • 🎨 ✅ Selectors
    • styling HTML elements
  • 🎨 🌈 Colors
    • ways to represent different hues
  • 🎨 📦 Box model
    • spacing (margins + borders + paddings)
  • 🎨 🔲 Layout properties
    • arranging things on a browser window
  • 🎨 🔌 Reset
    • avoiding browser-defined defaults
  • 🎨 📲 Media queries
    • different styles for different devices
• CSS layouts
  • 🎨 ↔️ Flex
    • positioning elements in flexible containers
  • 🎨 🏢 Grid
    • positioning elements into rows and columns