CSS Basics: Stop Making Ugly Sites, fr

Listen up, kid. You think you’re a "web developer" because you can write some HTML tags? Sit down. HTML is just the skeleton. Without CSS, your site looks like a Word document from 1992. It’s embarrassing, no cap. CSS is where the magic happens, but it’s also where most "devs" lose their minds and start crying because they can't center a div. If you’re one of them, pay attention. We’re about to fix your skill issue. fr.

Selectors: Choosing Your Targets Like a Pro

You can't style what you can't find. Selectors are how you tell the browser, "Hey, make this specific thing look less trash." Most of you just use class selectors and call it a day. That’s amateur hour. We’ve got ID selectors (use them sparingly, kid, they’re high maintenance), element selectors, and the real powerhouses: attribute selectors and pseudo-classes.

Pseudo-classes like :hover, :nth-child(), and :not() are how you make your site feel alive. Want every even row in a table to be gray? tr:nth-child(even). Want to style a button only when it's being clicked? button:active. It’s not rocket science, it’s just knowing the tools. And then there are pseudo-elements like ::before and ::after. These are literally free elements you can inject into the DOM without touching your HTML. That’s big brain energy right there. If you’re not using them to create decorative flourishes or custom icons, you’re missing out. No cap.

But wait, there's more. Combinators. The space (descendant), the (child), the + (adjacent sibling), and the ~ (general sibling). These allow you to target elements based on their relationships. "Style the paragraph only if it's directly inside a div." div p. "Style the image if it's right after a heading." h2 + img...

Want to read the full lesson?

Sign in or create an account to unlock this content and start learning.

Sign in to read