CSS Styling

What is CSS?

CSS stands for Cascading Style Sheets. It's the language that styles your web pages — colors, fonts, spacing, and layout. HTML is the skeleton, CSS is the skin and clothes! You write CSS rules that say: 'target this element, apply these styles'. One CSS file can control the look of an entire websit…

Selectors & Properties

A CSS rule has two parts: a selector (what to target) and declarations (what to change). You can select by tag name (h1), class (.my-class), or ID (#my-id). Classes are the most common — add a class in HTML and style it in CSS. Properties like color, font-size, and background control appearance.

Colors & Backgrounds

CSS gives you many ways to set colors: named colors (red, blue), hex codes (#ff5733), rgb(), or hsl(). Backgrounds can be solid colors, images, or gradients. The linear-gradient() function creates smooth transitions between colors — great for hero sections and buttons.

The Box Model

Every HTML element is a box! The CSS box model has four layers: content (the actual text/image), padding (space inside the border), border (the line around it), and margin (space outside the border). Understanding this is key to spacing elements correctly. Use box-sizing: border-box so padding does…

Text & Fonts

Typography is huge in design! CSS lets you control font-family (typeface), font-size, font-weight (bold), line-height (spacing between lines), text-align, and text-decoration (underline, strikethrough). Use Google Fonts by adding a link in HTML, then reference the font name in CSS.

Flexbox Layouts

Flexbox makes it easy to arrange items in a row or column. Set display: flex on a container, then control direction, alignment, and spacing. justify-content aligns items along the main axis; align-items aligns along the cross axis. gap adds space between items without needing margins.

CSS Grid

CSS Grid is perfect for two-dimensional layouts (rows AND columns at once). Define grid columns with grid-template-columns. Use fr units to share available space. gap controls gutters between cells. Grid is ideal for card galleries, page layouts, and dashboards.

Animations & Transitions

CSS can animate elements without JavaScript! transition smoothly changes properties when they change (like on hover). @keyframes defines an animation sequence with from/to or percentage steps. animation: then applies it. Animations make UIs feel alive and fun.

Responsive Design & Media Queries

A responsive website looks great on phones, tablets, and desktops. Use media queries to apply different styles at different screen widths. The mobile-first approach starts with small screen styles, then adds @media (min-width) for larger screens. Relative units like %, vw, and rem help elements sca…

CSS Variables & Mini Project

CSS variables (custom properties) let you store values and reuse them everywhere. Define them on :root and use them with var(). Changing one variable instantly updates everything that uses it — great for themes! Let's put everything together and style a mini landing page.