What Is CSS? Selectors, the Cascade, and Responsive Layout

Key takeaways

• CSS describes presentation while HTML supplies document structure and meaning.
• Selectors choose elements, and declarations specify properties and values.
• The cascade considers more than selector specificity or whichever rule appears last.
• Responsive layout and accessibility depend on how the complete component behaves.

CSS stands for Cascading Style Sheets. It describes how documents are presented, including typography, colours, spacing, and layout.

HTML gives a page its elements and meaning. CSS determines how those elements are displayed across screen sizes and other conditions.

Imagine a page listing three tutorials. The content should remain readable on a narrow phone and use available space on a wider screen. A small card layout shows several core CSS ideas working together.

A Rule Connects a Selector to Declarations

Start with a card:

<article class="tutorial-card">
  <h2>Understanding APIs</h2>
  <p>Follow a request from the browser to the service.</p>
  <a href="https://workshelve.com/blog/what-is-an-api">Read the guide</a>
</article>

A CSS rule can select its class:

.tutorial-card {
  padding: 1.25rem;
  border: 1px solid #d5dbe3;
  border-radius: 0.75rem;
  background-color: #ffffff;
}

The selector is .tutorial-card. Inside the braces, each declaration contains a property and a value.

The class can be reused on multiple articles. CSS does not require duplicating the rule for each card.

Load Styles Into the Document

A page can reference a stylesheet from its head:

<link rel="stylesheet" href="https://example.com/styles.css">

The address is illustrative; use the actual stylesheet URL for the site.

CSS can also appear in a style element or an element’s style attribute. External stylesheets make shared styling easier to maintain, but all applicable declarations participate in the browser’s styling rules.

If nothing changes, first confirm the stylesheet loaded and the selector matches the actual HTML.

The Cascade Resolves Competing Declarations

Several rules may set the same property on one element. The cascade determines which declaration wins.

Within comparable origin, importance, and layer conditions, specificity helps rank selectors. When other relevant priorities are equal, later declarations can win.

But “the last rule wins” and “an ID always wins” are incomplete explanations. Origins, important declarations, cascade layers, and other ordering rules matter before a simple source-order comparison.

MDN’s cascade guide explains the full process.

Use browser developer tools to inspect crossed-out declarations and computed values instead of repeatedly increasing specificity.

Inheritance Reduces Repetition

Some properties, such as text colour and font family, are normally inherited from a parent. Others, such as padding and borders, are not.

Setting the page’s font on a common ancestor can therefore style text throughout the tutorial collection without assigning the same font to every paragraph.

Inheritance does not mean children receive every parent property. Nor does a parent’s inherited value automatically beat a declaration applied directly to the child.

Keeping those distinctions clear helps explain why the card’s text follows one rule while its spacing requires another.

Understand the Box Before Adjusting Width

The box model separates content, padding, border, and margin.

With default content-box sizing, a declared width describes the content box; padding and borders add to the outer size. Border-box sizing includes padding and border in the declared width.

A common project baseline is:

*,
*::before,
*::after {
  box-sizing: border-box;
}

The box-model guide explains these dimensions.

Margins remain outside the border box. Changing box sizing does not make every source of overflow disappear: long unbroken content and fixed-size children can still exceed available space.

Let the Layout Adapt

Place the cards inside an element with the class tutorial-grid:

.tutorial-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

@media (min-width: 48rem) {
  .tutorial-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

The default layout has one column. At the chosen viewport width, it uses three equal columns.

The breakpoint is an example, not a universal definition of a tablet. Choose it according to when the content needs a different arrangement.

Responsive design combines flexible layouts, suitable media, and conditional styling. A media query alone does not guarantee a usable mobile page.

Styling Must Preserve Usability

Keep link purpose clear, retain visible keyboard focus, and check text contrast against the rendered background. RGB and hex are different notations for colour values, not indicators of accessible contrast.

Avoid hiding essential information behind hover alone. Ensure zoom and longer text do not make the cards unusable.

CSS can change visual order, but the document’s reading and navigation order still need attention.

Debug the Rendered Component

For an unexpected result, inspect the element, matched rules, computed styles, and box dimensions. Then resize the viewport and consider inherited values and parent layout constraints.

The browser parses CSS, resolves styles, and uses them during layout and painting. Understanding those responsibilities makes a seemingly ignored declaration easier to investigate.

For the tutorial page, the goal is consistent, readable content across conditions. Selectors, the cascade, and layout tools provide the means to achieve it.

When a style does not appear, inspect the rule the browser actually chose before adding another override.