CS Basics: Cascading Style Sheets (CSS)

A foundational overview of CSS - understanding how styles cascade, how elements are displayed, and how spacing and typography shape modern web design.

Originally written by Carl Mills · January 2, 2018

What Is CSS?

Cascading Style Sheets (CSS) are used to define the look and layout of web pages. They control everything from colors and fonts to spacing and responsiveness. The name itself describes how style rules "cascade" through elements, influencing layout and inheritance.

Cascading in Action

"Cascading" describes the order in which CSS rules are applied. Styles defined for broader elements (like body) flow down into child elements unless explicitly overridden. 

body {
  color: red;
}

In this example, any <p> text inside the <body> would appear red, since it inherits that style.

The Style Sheet

A style sheet is the external file (typically .css) that contains all styling rules. It governs how HTML elements appear and interact visually on the page.

Below are a few key properties used across nearly all web projects.

display Property

Every element is treated as a box. The display property defines how these boxes behave in the layout. 

h1 {
  display: inline;   /* sits on same line as other elements */
}

h2 {
  display: block;    /* takes full width, starts on new line */
}

font-family Property

Defines the text font. You can list multiple fonts for browser fallback if the first isn't available. 

h1 {
  font-family: Arial, Helvetica, sans-serif;
}

margin & padding

margin adds space outside an element's border, while padding adds space inside the border. Both control spacing and layout precision. 

margin: 20px;              /* 20px on all sides */
padding: 20px 0px;         /* 20px top/bottom, 0 left/right */
padding: 20px 15px 10px;   /* top 20, sides 15, bottom 10 */
margin: 20px 10px 5px 0px; /* top, right, bottom, left */

Specificity and Conflicts

CSS applies rules based on specificity. If multiple rules target the same element, the more specific selector takes priority. For example, p.intro will override p because it's more specific.

Understanding specificity ensures that your styles apply as intended and aren't unexpectedly overridden by other rules.

Next in the Series

In the next post, we'll explore CSS Selectors - the building blocks that define which elements your styles apply to, and how specificity works in depth.

Continue to CSS Selectors →