CSS
The styling language that controls layout, color, and responsiveness.
CurrentbeginnerBeginner-friendlyFull course available
Overview
CSS (Cascading Style Sheets) controls how HTML content looks and is laid out: color, spacing, typography, and responsive behavior across screen sizes. Modern CSS (Flexbox, Grid) handles layout that once required JavaScript or table hacks.
- What it is
- A rule-based styling language that selects elements and applies visual properties to them.
- Why it's used
- It's the only native way to style web content -- and modern CSS is powerful enough to replace most layout JavaScript.
- Where it fits
- Applied to HTML; often loaded via a framework (Bootstrap, Sass) or written directly.
Core concepts
- Selectors and specificity
- The box model
- Flexbox
- Grid
- Media queries / responsive design
Example
Flexbox (display: flex) arranges children in a row or column with consistent spacing (gap) -- one of two modern CSS layout systems, alongside Grid.
.card {
display: flex;
gap: 12px;
padding: 16px;
border-radius: 8px;
}Common use cases
- Styling any web page
- Responsive layouts
- Design systems and component libraries
Project ideas
- A responsive card grid using Flexbox or Grid
- A dark/light theme toggle using CSS custom properties