Style with CSS and Tailwind

What CSS does

You've built the structure of your portfolio with HTML and organized the data with JavaScript. But the tools list still looks basic — just a plain bulleted list with no visual personality. This is where CSS comes in. CSS — Cascading Style Sheets — is the language that controls how everything on a webpage looks: colors, spacing, typography, layout, animations, and more. If HTML is the skeleton, CSS is everything that makes it look like a finished design.

CSS is completely separate from HTML. HTML says "this is a heading." CSS says "make it 32 pixels, bold, and blue." This separation is powerful because you can change the appearance of an entire site without touching the structure, and vice versa.

Selectors and specificity

The basic unit of CSS is a rule, which has three parts. A selector tells CSS what to style — which elements to target. A property tells it what aspect to change (color, font-size, padding). And a value tells it how to change it (blue, 32px, 16px). A CSS rule looks like: .button { background-color: blue; padding: 10px; }.

The most common type of selector is a class selector, written with a dot: .button, .card, .hero. You apply a class to an HTML element using the class attribute, and the CSS rule targets all elements with that class. Classes are reusable — many elements can share the same class. ID selectors (#header) target a single unique element and are less common in modern CSS.

Specificity is how the browser decides which CSS rule wins when multiple rules target the same element. Element selectors (h1, p) have the lowest specificity, class selectors (.button) are higher, and ID selectors (#header) are higher still. This matters because specificity conflicts are a common source of confusion — a style that should be working gets overridden by a more specific rule. Understanding this helps you debug styling issues.

Tailwind and utility classes

In practice, many modern projects don't write a lot of custom CSS from scratch. Instead, they use Tailwind CSS — a utility class framework that provides pre-made classes for common styles. Instead of writing a separate CSS file with .button { background-color: blue; padding: 10px; }, you apply Tailwind classes directly in your HTML: <button class="bg-blue-500 px-4 py-2">. No separate CSS file needed.

Tailwind is popular for several reasons. It's fast — you style things right where they are, without switching between files. It's consistent — the spacing scale (by default based on the popular 8px grid, though it can be customized) and color system are built in, giving you a design system out of the box. It also works exceptionally well with AI tools because Tailwind's predictable class names are easy for AI to generate and understand.

Even though much of the modern web uses Tailwind, I would still recommend getting familiar with more traditional ways of writing CSS alongside learning Tailwind. Learning Tailwind without understanding how CSS works underneath is a bit like always relying on external design systems without ever making a custom component from scratch. And even though it has become extremely popular lately, it's not like the entire internet is written in Tailwind. There's a good chance you'll encounter projects that don't use it, so it's best to be prepared.

Layout and responsive design

Responsive design is how you make layouts adapt to different screen sizes. Tailwind uses a mobile-first approach with breakpoint prefixes: classes without a prefix apply to all screen sizes, and prefixes like md: and lg: add styles for tablets and desktops. For example, text-sm md:text-base lg:text-lg makes text small on mobile, medium on tablets, and large on desktops.

Layout in CSS is primarily handled by two systems. Flexbox (display: flex) arranges items in a row or column with control over spacing, alignment, and distribution. It's what you use for most one-dimensional layouts — like placing buttons side by side or centering content. Grid (display: grid) is for two-dimensional layouts — rows and columns together. In Tailwind, these are accessed with classes like flex, items-center, gap-4, and grid, grid-cols-3.

If you're familiar with Figma Auto Layout, you will definitely notice similarities. Figma's dynamic layout features have been heavily inspired by these CSS models and have improved over time to bring them even closer to full parity.

CSS variables

Also known as CSS custom properties, CSS variables let you define values once and reuse them everywhere. You define them in a global CSS file — --color-primary: #5755ff; — and reference them with var(--color-primary). Change the variable and every element using it updates. This is how themes and color schemes work, and it's especially useful for dark mode.

If you've used variables in Figma, this idea will feel familiar. In both cases, you define a design value once and reuse it across multiple places, so updating the source updates everything connected to it. But CSS variables are different from JavaScript variables. A JavaScript variable stores data for logic and behavior. A CSS variable stores styling values for the browser to apply visually. CSS variables also participate in the cascade, which means they can change based on where an element lives in the page, the current theme, or a responsive breakpoint.

The box model

Another central CSS concept that is vital to understanding its basics is the box model. Every HTML element is a rectangular box, and CSS styles that box in layers. At the center is the content area, where text or images appear. Around that is padding, which adds space inside the element. Then comes the border, which draws the edge of the element. Outside of that is margin, which creates space between this element and other elements nearby. Understanding the box model is essential because a lot of layout bugs are really just spacing bugs.

To see this in action, inspect any element in your browser's DevTools and open the Computed tab inside the Elements panel. You'll see a box model diagram that shows the element's margin, border, padding, and content size, which makes it much easier to debug layout and spacing issues.

Why this matters for designers

For designers, CSS is arguably the most relevant of the three web technologies. It's the layer closest to what you already think about — spacing, colors, typography, layout, visual hierarchy. You don't need to memorize every CSS property. You need to understand how styling works in code — selectors, specificity, Tailwind's utility approach, responsive breakpoints, variables, and the box model — so you can read what you're looking at and give precise direction to AI tools. When you can say "change the gap to 24px and add a subtle border" instead of "make it look better," that's the difference CSS knowledge makes.