Loading the Stack...

CSS & Style: The Aesthetics

CSS brings structure to life. Learn how to control colors, typography, and create layouts that look beautiful on any device.

Cascading Style Sheets (CSS)

CSS dictates how HTML elements are presented—it is the language of design. The Cascading nature refers to how styles inherit properties from their parent elements and how the order of rules determines which style wins.

Design Fundamentals

Effective styling relies on more than just colors. Using a system ensures consistency, which is why we defined our colors and spacing using CSS Custom Properties (variables) in the `:root` selector.

Defining Variables

:root {
  --color-primary: oklch(20.768% 0.03985 265.767);
  --color-secondary: oklch(75.353% 0.13906 232.691);
  --space-sm: 0.5rem;
  --space-md: 1rem;
}

Using CSS Variables

.button-primary {
  background-color: var(--color-secondary);
  color: white;
  padding: var(--space-md) var(--space-lg);
}

This allows us to change the look and feel of the entire site instantly by updating a few variable value.

Layout Powerhouses

For decades, creating complex layouts was difficult. Now, we rely on two core CSS features for modern responsiveness and organization:

Flexbox: Perfect for arranging items in a single row or column (one-dimensional layout), such as navigation bars and footers.
CSS Grid: Ideal for arranging items in complex rows and columns (two-dimensional layout), such as entire page templates and article grids. (We used this for our summary cards!)

Achieving Responsiveness

A website must look great on a phone, tablet, and desktop. This is achieved using Media Queries, which apply specific styles based on the user's screen size or device characteristics.

@media (min-width: 768px) {
  .content-grid {
    grid-template-columns: 1fr 1fr;
  }
}

Our site is structured and styled. It's time to make it move!

Proceed to JavaScript & Behavior →