CSS Guide: Selectors, Flexbox, Grid, Typography, and Color

CSS is the language that tells a browser how a page should look, from colors and type to spacing and where every box sits. HTML supplies the content, and CSS dresses it.

You are probably wondering whether Tailwind, component frameworks, and AI assistants made CSS optional. They didn't, though how much CSS you need depends on what you build.

What Is CSS, in Plain Words?

Picture a moving crew arriving at your new place. The boxes are your HTML, and each one is already labeled with what is inside. CSS is the stack of sticky notes you leave on them: this one goes by the window, that one is fragile, these all belong in the kitchen. The crew follows your notes, and the boxes themselves never change.

Every CSS rule is one of those notes, and every note has two halves. A selector says which boxes the note is for. A declaration says what to do with them, such as a color, a size, or a gap. Browsers treat each element as a box with its content in the middle, then padding, then a border, then a margin that keeps the neighbors away. Most early spacing bugs come from changing the wrong one of those four layers.

Two more words matter before we go on. The cascade is the rulebook for what happens when two notes disagree, and it gets its own section below. Layout is the job of placing the boxes on the page, which is separate from decorating them and has its own family of properties.

Do I Still Need to Learn CSS with Tailwind, Frameworks, and AI?

Yes, and the docs of the tools that supposedly replace CSS say so themselves. Next.js says its documentation assumes you are comfortable with HTML, CSS, JavaScript, and React. Tailwind says its fourth version is built on native CSS features such as cascade layers, registered custom properties, color-mix(), and container queries. Both sets of docs treat CSS as the foundation under their own tool.

Tailwind classes are CSS properties wearing short names. Reading flex or p-4 in someone else's markup means knowing what display and padding do. An AI assistant can draft a layout in seconds, and that is real help. It can also answer a styling bug by piling on more rules, so you need enough CSS to tell a fix from a pile-on.

Helper	What it handles	What you still need
Tailwind	Writing styles as classes in markup	The CSS properties behind each class
Component framework	Keeping styles next to components	Selectors, specificity, and inheritance
AI assistant	Drafting rules and layouts fast	Reviewing what it hands back

Our call is simple. Learn the core of CSS first, which means the box model, the cascade, flexbox, grid, and readable text. After that, let Tailwind or an assistant speed up the typing. Your own CSS knowledge is what lets you review the output and catch a wrong answer before it ships.

Should I Use Tailwind or Plain CSS?

Tailwind is a utility-first framework, which means you stack small single-purpose classes straight in your markup instead of inventing class names. Tailwind's own docs list the upsides as speed, safer changes, easier maintenance, and a stylesheet that stops growing with every new feature. Plain CSS gives you full control and nothing extra to learn, at the price of naming and organizing everything yourself.

Question	Plain CSS	Tailwind
Where styles live	In a separate stylesheet	As classes inside your markup
Naming things	You invent every class name	Utility names come ready-made
Consistency	Depends on your discipline	Values come from a shared theme
Learning curve	Slower start, nothing else to learn	Quick once you know CSS names
Browser floor	You choose it	Chrome 111, Safari 16.4, Firefox 128

The browser floor is the row people overlook. Tailwind's compatibility page says its fourth version needs Chrome 111, Safari 16.4, and Firefox 128 or newer, so a project that must support older browsers needs a different plan.

My pick for a beginner is plain CSS first, because a helper only makes sense once you know what it is helping with. Reach for Tailwind when your team or framework already uses it, or when you are building many screens and want the spacing and colors to stay consistent. You can also mix the two, using utilities for layout and a small stylesheet for the odd custom piece.

Who Uses CSS, and What Is It Used For?

Every web page you have ever opened uses CSS, so the list of users is the list of websites. Marketing pages, web apps, dashboards, blogs, and documentation all lean on it. A framework changes how you write styles but still ships CSS to the browser, and the Next.js docs, for one, list Tailwind CSS, CSS Modules, and global CSS among the ways to add it.

The numbers back that up. In the 2025 Stack Overflow Developer Survey, 61.9% of all respondents used HTML/CSS, and 63% of professional developers did, which put it second only to JavaScript at 66%. The 2024 survey showed 52.9%, though part of any yearly move comes from who chose to answer.

The people writing CSS are front-end developers first, followed by designers who code and back-end developers who touch templates. If you build anything a human looks at in a browser, you are in that group.

Which CSS Section Should I Start With?

Category	What it covers	Start here if
CSS Selectors	Type, class, and id selectors, combinators, pseudo-classes, and specificity	Your rule is written correctly and the element still refuses to change
CSS Layout	Normal flow, flexbox, grid, and coordinate-based positioning	Your boxes are styled but sitting in the wrong places
CSS Typography and Color	Colors, units, fonts, text, custom properties, and shadows	The layout works and the page is still tiring to read

Is CSS Still Changing, and Where Did It Come From?

Early web pages carried their looks inside every tag. Work on CSS began at CERN in 1994 so presentation could live in one stylesheet, and the W3C published CSS1 as a Recommendation in December 1996. Since then the language has grown through separate modules instead of big version numbers.

The pace picked up in recent years. According to the Baseline data that browser teams maintain, flexbox reached every major browser in 2015, custom properties and grid in 2017, cascade layers in 2022, and container queries and :has() in 2023. That timeline changes what you click next. A search result written before those dates will teach you workarounds for problems that now have a real property, so you will want flexbox, grid, and custom properties in your toolkit before you copy an old fix.

Which Old CSS Advice Should I Ignore?

CSS collected plenty of workarounds for problems the language could not solve yet, and search results have a long memory. Recognizing the old shapes saves you from copying a fix for a problem you no longer have.

Floats were designed for wrapping text around an image, then got pressed into building whole page columns, which is why older stylesheets carry a clearfix rule. Use flexbox for one direction and grid when rows and columns must agree. A pile of !important usually marks a specificity fight nobody won, and understanding specificity removes most reasons to write it. Vendor prefixes were added when browsers shipped experimental properties under their own names, and most of them now sit in old stylesheets as dead weight.

The tell is the same each time. If a snippet works around something that has since gained a real property, the workaround costs you clarity for no benefit.

What Can Modern CSS Do That Used to Need JavaScript?

Many small interactive jobs that once meant writing a script now have a CSS or HTML answer. The table uses Baseline, the shared yardstick for browser support. Newly available means all four major browsers ship the feature, and widely available means that has been true for 30 months.

Job	Modern answer	Browser status
Style a parent by its children	:has() selector	Widely available
Cards that adapt to their own width	Container queries	Widely available
Nest rules without Sass	CSS nesting	Widely available
Open and close an overlay	popover attribute	Newly available, January 2025
Fade an element in on arrival	@starting-style	Newly available, August 2024
Animate between two screens	View transitions	Same page: October 2025. Across pages: limited
Animate as the page scrolls	Scroll-driven animations	Limited, not every browser
Tether a tooltip to its button	Anchor positioning	Limited, not every browser

Treat the bottom three rows with care. A feature that works in your browser can still be missing for some of your visitors, and the MDN page for each feature shows a Baseline badge you can check in ten seconds. Use widely available features freely, and keep a fallback in mind for anything newer.

JavaScript still owns anything that needs data, decisions, or events beyond hover and focus. CSS handles the state the browser already tracks. AI assistants can also reach for a script out of habit, because plenty of older examples did. When you review a snippet that toggles a class to open a menu, ask whether a popover or a details element would already do the job.

Is CSS Hard to Learn, and How Long Until I Am Useful?

The syntax is small: a selector, curly braces, a property, and a value. The hard parts are mental models, meaning how boxes size themselves, how the cascade picks a winner, and how flexbox and grid share space. Like a Jersey diner menu, CSS has a very long list of properties, and nobody orders them all. You will use the same dozen again and again and look up the rest.

Results vary a lot by person, so read this table as a rough guide for someone practicing most days, never as a promise.

Time you put in	What you can do	Start with
First weekend	Style a simple bio page	Selector basics
First few weeks	Lay out a real page	Flexbox
First couple of months	Build responsive layouts and themes	Grid and custom properties

Agents change the middle of that curve. An assistant can draft the flexbox row in seconds, so you spend less time memorizing property names and more time reading what comes back. I think that makes the cascade and the box model more valuable, because they are how you spot a wrong answer.

What Is the One Rule Everything Else Depends On?

Several rules can target the same element, and none of them causes an error. The browser collects every matching declaration, then picks one winner for each property. That decision process is the cascade, and it runs in a fixed order: origin and importance first, then cascade layers, then specificity, which measures how precisely a selector describes the element. Source order breaks whatever ties remain, so the rule written later wins.

p { color: gray; }
.intro { color: navy; }

A paragraph with class="intro" matches both rules and renders navy. A class selector outranks a type selector at the specificity stage, and specificity is settled before source order is ever consulted. Swap the two lines and the paragraph is still navy.

This is why a declaration can look completely correct and still do nothing. The property is valid, the value is valid, and another rule simply won. Once you can read the cascade, you stop guessing at that whole class of bug, and the CSS specificity guide gives you the scoring.

How Do I Pick the Right Elements to Style?

Selectors are where beginners lose the most time, and the loss is rarely about syntax. You can write a selector that is perfectly valid and still target nothing, or target far more than you meant. Three kinds do most of the work, and each has a cost.

Selector	Use it for	Watch out for
Type	Defaults for every element of one kind	Matching more than you meant
Class	Most real styling, reusable anywhere	Vague names that collide later
Id	One truly unique element	High weight that is hard to override

Classes carry the overwhelming majority of real styling because they are reusable and their specificity stays predictable. After that, combinators target elements by their relationships, and pseudo-classes pick out states such as hover or the first item in a list. The CSS selectors guide works through each in order.

How Do I Arrange Boxes on the Page?

Layout starts before you write a single layout property, because the browser already has a default. Normal flow stacks block elements down the page and runs inline elements along the line, and a lot of layout work is a small adjustment to that default. After normal flow, the real decision is between two tools.

Question	Flexbox	Grid
Direction	One axis at a time	Rows and columns together
Best for	Nav bars, button groups, card rows	Page-level structure
Sizing starts from	The content	The layout you define

Content sharing one line is a flexbox job, and a structure where alignment must hold in two directions is a grid job. Positioning is the escape hatch for the few elements that must sit outside the flow, such as a sticky header or a badge pinned to a corner. Using it as a general layout tool is a common early mistake, and the CSS layout guide explains why.

How Do I Make Text and Color Readable?

A page can be laid out correctly and still be tiring to read. Type size, line height, line length, and contrast decide whether someone stays, and all four are ordinary CSS properties. Contrast deserves extra attention, and WebAIM's 2026 check of one million home pages found low-contrast text on 83.9% of them, the most common accessibility failure it measured.

Units matter just as much as type size does, and a rem size stays relative to the root font size and respects a reader who has increased it, while a fixed pixel value ignores that preference. Custom properties are the piece that changes how a stylesheet ages, because naming a color once means a theme or dark mode becomes a change in one place. Shadows suggest depth and are easy to overdo, so borders stay the more reliable way to separate one surface from another. The CSS typography and color guide covers each of these.

Which Guide Do I Need for This Task?

You want to	Go to
Center something, horizontally or vertically	Flexbox
Build a page-level structure with aligned rows and columns	Grid
Work out why your rule is being ignored	Specificity
Style a hover, focus, or first-item state	Pseudo-classes
Pin a header so it stays visible while scrolling	Positioning
Reuse one color or spacing value across a stylesheet	Custom properties
Set a comfortable line height and font size	Fonts and text
Choose a color format or a sizing unit	Colors and units

What Should I Learn First?

The order below front-loads the things that make everything after them easier to debug.

1. Selector basics, because you cannot style anything you cannot reliably target.
2. Specificity, because it explains the ignored-rule problem that otherwise costs you hours.
3. Display and normal flow, because it is the default every layout tool modifies.
4. Flexbox, which handles most day-to-day arrangement work.
5. Colors and units, once the structure holds and readability becomes the problem.
6. Grid and custom properties, when pages grow past a few screens.

What Can't CSS Do?

CSS styles what the document already contains. It cannot add, remove, or reorder real elements, so anything that changes the content itself belongs to HTML or JavaScript. Visual order can be changed with flexbox and grid, and doing so does not move the element for a screen reader or for keyboard focus, which is why reordering is a decision to make carefully.

CSS also cannot store data, make network requests, or respond to events that are not expressed as element state. Hover and focus are available because the browser tracks them as state, while a click that must change something elsewhere on the page needs JavaScript. Knowing the boundary saves you from hunting for a CSS solution that was never going to exist.

What Does Every Guide in This Section Answer?

Selectors: Why Is My Rule Not Applying?

These four guides sit under the CSS selectors hub and read best in this order.

• CSS selector basics covers type, class, and id selectors, and when each one is the right pick.
• CSS combinators target elements through parent, child, and sibling relationships.
• CSS pseudo-classes select states and structural positions such as hover and first item.
• CSS specificity explains which matching selector wins and why.

Layout: Why Are My Boxes in the Wrong Place?

These four guides sit under the CSS layout hub and build on normal flow.

• CSS display and normal flow compares block, inline, and inline-block boxes.
• CSS flexbox arranges and aligns items along one axis.
• CSS grid coordinates rows and columns together.
• CSS positioning covers relative, absolute, fixed, and sticky placement.

Typography and Color: Why Is My Page Tiring to Read?

These four guides sit under the CSS typography and color hub and cover the readable surface.

• CSS colors and units explains color formats and sizing values.
• CSS fonts and text controls typefaces, sizing, line height, and alignment.
• CSS custom properties reuse authored values through variables and themes.
• CSS shadows builds box, text, and alpha-shaped shadows.

Which Related Guides and Comparisons Should I Read?

• HTML and CSS together is the comparison that explains why you learn HTML first and CSS second.
• HTML supplies the structure that every CSS rule selects against.
• JavaScript takes over when a page needs behavior rather than presentation.
• Frontend development puts CSS in the context of the wider role and gives one learning order.
• The programming guide covers the other languages on the site.

Frequently Asked Questions

Is CSS a programming language?

Not in the usual sense, since CSS declares presentation rules rather than executing logic, though custom properties, calc, and container queries give it computed and conditional behavior that blurs the old line.

Can an AI assistant write all my CSS?

It can draft a lot of it, and that saves real time. You still decide what the page should look like, and you still have to read the result for conflicting rules, bloat, and layouts that break on a small screen. Learn enough CSS to review what comes back.

What is the difference between CSS and a CSS framework?

CSS is the language that browsers read and apply. A framework such as Tailwind is a toolkit of ready-made classes that ends up as CSS in the browser. You can write CSS with no framework at all, but every framework still ships CSS.

Should I learn CSS before JavaScript?

For most people building web pages, yes. Learn HTML first, then CSS, then JavaScript, because CSS pays off on your very first page and JavaScript needs a page worth changing. If your goal is purely back-end work, CSS can wait.

Does the order of properties inside one rule matter?

Not for different properties, which apply independently. If the same property appears twice in one block the later one wins, which is the same last-one-wins tie-break that decides between separate rules of equal specificity.

Can CSS change content as well as appearance?

Only narrowly, through the content property on a before or after pseudo-element, which can insert text or an icon that is not in the source. CSS cannot add, remove, or reorder real elements.

Is Sass the same thing as CSS?

No. Sass and Less are preprocessor languages that compile to plain CSS before a browser sees them. They added variables and nesting years before CSS gained its own versions, which is why older projects still rely on them.

Do browsers support new CSS features at the same time?

No. Vendors ship features on independent timelines, so a property can work in one browser months before another. Checking current support is still part of deciding whether to rely on something new.

Where to Start

Build one small page and style it end to end before reading further. Give it a heading, two paragraphs, and four cards, then arrange the cards with flexbox and open developer tools to see which declarations are crossed out, because that is the cascade showing its work. When the page behaves, open the selectors guide and follow the order above.