Selectors are the foundation of CSS. They are patterns that "select" the HTML elements you want to style. This is how you tell the browser *what* to change.
h1): Selects all elements of a specific type..my-class): Selects all elements with a specific class. (Starts with a .)#my-id): Selects the *one* element with a specific ID. (Starts with a #)div p): Selects all <p> elements that are *inside* a <div>.:hover): Selects an element in a special state, like when you mouse over it.This is the most important concept in CSS. Every HTML element is just a rectangular box. The "Box Model" describes how this box is built.
padding: The transparent space *inside* the border, between the content and the border. (Like cotton stuffing in a box).border: The line that goes *around* the padding and content.margin: The transparent space *outside* the border. This pushes other elements away. (Like a force-field).box-sizing: border-box;: A professional's trick. It tells the browser to include `padding` and `border` in the element's total `width` and `height`, which makes layout much easier.Styling text is what makes a website readable and beautiful. These are the most common properties for controlling text.
color: Sets the text color.font-size: Sets how big the text is (e.g., 16px, 1.5rem, 120%).font-weight: Sets how bold the text is (e.g., normal, bold, or a number 400, 700).font-family: Sets the typeface (e.g., "Arial", sans-serif).text-align: Aligns the text horizontally (left, center, right).line-height: Sets the space between lines of text (e.g., 1.6 for 160% spacing).The position property lets you take elements out of the normal "document flow" to place them in specific spots.
static: The default. The element just sits in the normal flow.relative: The element is still in the flow, but now you can use top, right, bottom, left to "nudge" it from its original spot.absolute: The element is *completely removed* from the flow. It is then positioned relative to its *nearest positioned ancestor* (one that has position: relative, absolute, or fixed).fixed: The element is removed from the flow and positioned relative to the *browser window (viewport)*. It stays in the same place even when you scroll.sticky: A hybrid. It acts like relative until you scroll past it, then it acts like fixed. (Great for navbars).Flexbox is a modern, powerful 1-Dimensional (1D) layout system. It's designed to align and distribute items in a single row OR a single column.
Analogy: Think of it as a smart bookshelf. You can tell it to stack books vertically (flex-direction: column) or line them up horizontally (flex-direction: row). You can also tell it how to space them out (justify-content).
flex-direction: Do items flow in a row or a column?justify-content: How are items spaced out along the main axis? (flex-start, center, space-between).align-items: How are items aligned on the *other* axis? (e.g., if direction is row, this controls vertical alignment).CSS Grid is the most powerful layout system. It is 2-Dimensional (2D), meaning it controls layout in both rows AND columns at the same time.
Analogy: Think of it as a spreadsheet or a chessboard. You define the grid (e.g., "I want 3 columns and 2 rows"), and then you place your items into the "cells" you've created.
grid-template-columns: Defines the size and number of your columns. The fr (fractional) unit is very useful here (e.g., 1fr 1fr 1fr means 3 equal columns).gap (or grid-gap): The space *between* your items. So much easier than margin!grid-column: span 2;).Responsive design is the practice of making your website look good on all devices, from tiny phones to wide-screen desktops. We use Media Queries to apply different CSS rules based on the screen size.
The code @media (max-width: 600px) { ... } means: "If the browser window is 600px wide or *less*, apply these special rules."
Tip: Try resizing your browser window (or the preview pane below, if you can) to see the changes take effect!
max-width: Applies styles when the screen is *smaller* than this value. (Good for "desktop-first" design).min-width: Applies styles when the screen is *larger* than this value. (Good for "mobile-first" design).