CSS
Cascading Style Sheets is what makes the web beautiful. It controls layout, colors, typography, and how your site responds to different devices.
CSS Overview
If HTML is the skeleton, CSS is the skin, hair, and fashion. It's the Interior Designer of your web page.
The Paint Job
Think of CSS as the paint, furniture, and lighting that turns a house into a home.
Readability First
CSS isn't just for "looks"—it's for making content easy and pleasant to read.
CSS Syntax
A CSS rule consists of a selector and a declaration block.
background-color: #007bff;
color: white;
padding: 10px 20px;
}
Selectors
Learn how to point to the exact element you want to style.
Used for reusable styles. Prefixed with a dot: .card
Unique identifier. Prefixed with a hash: #header
When multiple rules apply, the most specific one wins. An ID selector is "heavier" than a class selector, which is heavier than an element selector.
The Reset
Browsers come with default styles that can be annoying. A reset gives you a clean canvas.
The "Standard" Reset
Setting box-sizing: border-box is the single most important reset. It makes width and height calculations predictable.
margin: 0;
padding: 0;
box-sizing: border-box;
}
Values & Units
Understanding px, rem, em, and colors.
Flexbox
Flexbox is for aligning items in one direction (row or column).
The Clothesline
Think of Flexbox as a clothesline. You can hang items, space them out evenly, or push them all to one end.
display: flex;
justify-content: center;
align-items: center;
}
CSS Grid
Grid is for two-dimensional layouts (rows AND columns). Perfect for dashboards and card layouts.
Control both axes simultaneously.
Perfect spacing between every cell.
The Spacing Secret
Social Distancing
Margin is like social distancing—it keeps others away from you. Padding is like wearing a thick jacket—it's the space between you and your skin.
Responsive Design
The web isn't just on laptops anymore. Your site needs to work on fridges, watches, and massive TVs.
Always design for the smallest screen first, then scale up. It's easier to expand than to cram.
Pro Tips for CSS
Let content define the height. Use padding and gap instead.
Store colors and spacing values for easy updates later.
Right-click > Inspect is your best friend for debugging layouts.
Avoid complex selectors. If you need 4 classes to target one button, use a new class.