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?

CSS, short for Cascading Style Sheets, controls how a web page looks. It sets colors, typography, spacing, and layout by applying rules to HTML elements. Think of HTML as labeled moving boxes and CSS as the instructions for where they go and how they should look.

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 Need to Learn CSS With Frameworks and AI?

You still need CSS knowledge when using frameworks or AI assistants. Both can write styles for you, but you need to understand the cascade, sizing, and layout to fix the result. Learn enough to explain why a rule works before trusting it on your own page.

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?

Start with plain CSS if you are learning web development. It teaches the rules that Tailwind utilities depend on. Tailwind makes sense when a team already uses it or you want consistent styling across many screens; its utility classes still produce CSS.

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?

Front-end developers use CSS to style websites, web apps, dashboards, and documentation. Designers and back-end developers also use it when working on browser interfaces. Even a page without an author stylesheet gets default styling from the browser.

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?

Start with selectors if you are new to CSS, then learn layout and typography. If you are fixing an existing page, choose the section that matches the problem below.

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?

CSS is still evolving through separate modules. Work began at CERN in 1994 to separate presentation from HTML, and CSS1 became a W3C Recommendation in December 1996. New layout and styling features continue to build on that foundation.

Learn flexbox, grid, and custom properties before copying old layout workarounds. Modern browsers support these fundamentals, while newer features still need checking against the browsers your project supports.

Which Old CSS Advice Should I Ignore?

Avoid using floats for whole-page columns, absolute positioning for ordinary page structure, or repeated !important declarations to force a style. Modern layout tools handle those jobs more reliably. Keep an old workaround only when you understand the browser or layout problem it solves.

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, so check whether a prefix is still needed by your supported browsers before removing it.

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.

Which Modern CSS Features Are Worth Learning?

After the basics, learn container queries for reusable responsive components, :has() for relational styling, and native CSS nesting for related rules. HTML features such as popover can also replace some scripted interface behavior. Check support before depending on newer features.

Feature	Use It For
:has()	Style an element based on related elements, such as a card containing an image.
Container queries	Adapt a component to its available space instead of the entire viewport.
CSS nesting	Group related rules inside a parent rule without a preprocessor.
HTML popover	Show and hide an overlay using built-in HTML behavior, then style it with CSS.
@starting-style	Set starting styles for entry transitions.

A feature working in your browser does not guarantee it works for every visitor. Use the compatibility information in its documentation and keep the page usable when a newer enhancement is unavailable.

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?

CSS basics are approachable, but reliable layouts take practice. A first weekend can be enough to style a simple page; responsive layouts usually need repeated practice over weeks or months. The syntax itself uses 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.

How Does the CSS Cascade Choose a Style?

The CSS cascade picks a winning declaration for each property on an element. Origin, importance, and cascade layers are considered before selector specificity. Scoping proximity can then break a tie, followed by source order. When all earlier conditions tie, the later declaration 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 CSS Selectors Target Elements?

CSS selectors target elements by features such as their tag, class, ID, attributes, or state. A valid selector can still match nothing if it describes the wrong element. Start with type, class, and ID selectors, then add relationships only when you need them.

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 You Arrange a Page With CSS?

Use normal flow for ordinary text, flexbox for rows or columns, and grid when both dimensions need coordinated tracks. Positioning handles overlays and sticky or fixed controls. Start with a sensible HTML order so the page still reads correctly before those layout rules apply.

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 handles special placement, such as a sticky header that retains its space or an absolutely positioned badge removed from normal flow. Using it as a general layout tool is a common early mistake, and the CSS layout guide explains why.

How Can CSS Make Text Easier to Read?

CSS makes text easier to read through an appropriate font size, comfortable line height, manageable line length, and clear foreground/background contrast. Check those choices together at narrow widths and with browser zoom. A tidy layout cannot rescue unreadable text.

Units matter just as much as type size does, and a rem size follows the root font size. Leave that root tied to the browser default to respect the reader’s text-size preference; browser zoom can scale pixel-based text too. 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 CSS Guide Covers Your Task?

Use the flexbox guide for alignment, grid for coordinated rows and columns, and specificity for rules that will not apply. The task links below take you straight to the relevant example.

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 You Learn First in CSS?

Learn CSS selectors and the cascade first, then the box model, normal flow, flexbox, and grid. Add typography and color as you build a small page. That order gives you the tools to understand and fix each example.

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 can load assets such as images and fonts, but it does not handle application tasks such as saving a form or processing an API response. HTML controls provide some interactions without JavaScript. Scripts handle behavior that those built-in controls and CSS states cannot express.

CSS Guides by Topic

Selector Guides

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 Guides

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 Guides

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.

Related Frontend Guides

• 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?

CSS is a stylesheet language that describes presentation rather than a general-purpose programming language. It has calculations and conditional styling, but it does not run application logic the way JavaScript does.

Can an AI assistant write all my CSS?

An AI assistant can draft CSS, but you still need to review its output. Check for conflicting rules, unnecessary styles, unreadable text, and layouts that break on small screens.

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?

Most beginners building websites should learn CSS before JavaScript, after learning HTML. CSS lets you style the page that JavaScript will later change. If you only want to build back-end services, CSS can wait.

Does declaration order inside a CSS rule matter?

Declaration order matters when CSS declarations set the same property or when a shorthand overlaps a longhand. Among valid declarations of equal importance, the later declaration wins. Unrelated properties can usually appear in any order.

Can CSS change content as well as appearance?

CSS can add decorative text or icons through generated content such as ::before and ::after, but it does not create or rearrange real HTML elements. Use HTML or JavaScript for meaningful content and changes to the document structure.

Is Sass the same thing as CSS?

Sass is a separate language that compiles into CSS before the browser reads it. Sass still offers features such as mixins and loops, while modern CSS provides its own custom properties and nesting.

Do browsers support new CSS features at the same time?

Browsers do not introduce new CSS features at the same time. Check support in the browsers your readers use before relying on a new feature, and provide a usable fallback when needed.