1 What is CSS?

CSS stands for Cascading Style Sheets. If HTML is the bare cheese block, CSS is what melts it, colours it, and arranges it beautifully on the plate. CSS controls colours, fonts, spacing, layout, and animations.

CSS works by targeting HTML elements with selectors and applying properties and values to them.

/* Select the h1 element and style it */
h1 {
  color: orange;
  font-size: 48px;
  font-family: Arial, sans-serif;
}

2 Selectors

A CSS selector is how you target the elements you want to style. There are three main types:

• Element selector — targets all elements of that type: p { }
• Class selector — targets elements with that class (prefix with .): .cheese { }
• ID selector — targets one unique element (prefix with #): #hero { }

/* Element selector - all paragraphs */
p {
  color: #374151;
}

/* Class selector - anything with class="cheesy" */
.cheesy {
  background-color: #F5C518;
  border-radius: 8px;
  padding: 0.5rem 1rem;
}

/* ID selector - the element with id="hero" */
#hero {
  text-align: center;
  font-size: 2rem;
}

3 Colors and Backgrounds

CSS supports colours in many formats: named colours like orange, hex codes like #FF8C00, and RGB like rgb(255, 140, 0). You can apply colours to text with color, and to backgrounds with background-color.

.cheese-box {
  background-color: #F5C518;     /* Hex color */
  color: rgb(26, 26, 46);        /* RGB color */
  border: 3px solid orange;     /* Named color */
  padding: 20px;
  border-radius: 12px;
}

4 The Box Model

Every HTML element is a box! The CSS Box Model describes how space is calculated around elements:

• Content — the actual text or image
• Padding — space INSIDE the border, around the content
• Border — a line around the padding
• Margin — space OUTSIDE the border, separating from other elements

.box {
  width: 200px;
  padding: 20px;        /* space inside */
  border: 3px solid #F5C518;
  margin: 16px auto;    /* space outside + centered */
  background: #FFF3B0;
  text-align: center;
}

5 Flexbox Layout

Flexbox is a powerful CSS layout tool that makes it easy to arrange items in a row or column, align them, and distribute space. Just add display: flex to the container!

.flex-container {
  display: flex;
  gap: 12px;
  justify-content: center;  /* center horizontally */
  align-items: center;       /* center vertically */
}

.flex-item {
  background: #F5C518;
  padding: 16px 24px;
  border-radius: 8px;
  font-weight: bold;
}

6 Fonts and Text Styling

CSS gives you total control over text. Change fonts, sizes, weight, alignment, and letter spacing. You can even import custom fonts from Google Fonts!

.fancy-text {
  font-family: 'Nunito', sans-serif;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-align: center;
  color: #E8A020;
  text-shadow: 2px 2px 0 #1a1a2e;
}

7 Animations

CSS can animate elements using the @keyframes rule and the animation property. This lets you create smooth, looping effects — no JavaScript needed!

/* Define the keyframes */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-20px); }
}

/* Apply the animation */
.bouncy-cheese {
  animation: bounce 1s ease-in-out infinite;
  display: inline-block;
  font-size: 3rem;
}