3 CSS Styling and Layout

CSS rules and selectors

CSS (Cascading Style Sheets) controls how HTML content looks and how its boxes are arranged. A CSS rule combines a selector, which identifies target elements, with one or more declarations, each pairing a property with a value. Browsers also apply default styles, so a page can remain readable without an author stylesheet.

Here, .notice selects elements with the notice class. The declarations set the text color and add space inside each selected element.

Choosing targets with selectors

Selectors can target elements by type, class, ID, relationship, or state. Common examples include:

• p matches every paragraph element.

• .notice matches every element with the notice class.

• #main matches the element with ID main.

• article p matches paragraphs inside an <article> element.

• button:hover matches a button while the pointer is over it.

A comma-separated selector list applies the same declarations to each match. For example, h1, h2 { color: navy; } gives both heading levels the same color. Classes are useful for reusable styling; an ID is intended to identify one element in a document.

How the cascade resolves styles

When multiple declarations set the same property on an element, the cascade determines which value is used. The browser considers which rules apply, their origin and importance, specificity, scope proximity, and source order. In ordinary author CSS, an ID selector has greater specificity than a class selector, which has greater specificity than a type selector. If declarations otherwise tie, the later one wins.

A paragraph inside an article matches both selectors. The second selector is more specific, so the paragraph uses the darker green.

Some properties, such as color and font-family, normally inherit from a parent. Others, such as margin and border, generally do not. A declaration that directly targets an element takes precedence over a value it would otherwise inherit. Avoid using !important as a routine fix because it can make styles harder to override and maintain.

Typography and color

Typography affects readability and visual hierarchy. Common properties include font-family, font-size, font-weight, font-style, line-height, and text-align. A fallback font stack lets the browser use another available font if the preferred font is unavailable. A unitless line height, such as 1.5, scales with the text size.

The color property sets foreground color, usually text, while background-color sets an element's background. CSS supports named colors and formats such as hexadecimal, rgb(), and hsl(). Choose foreground and background colors with enough contrast for text to remain readable.

Sizing with the box model

The box model explains how an element's size and spacing are organized. From inside to outside, a box consists of content, padding, border, and margin. Content holds text or other elements; padding adds space inside the border; the border surrounds the content and padding; and margin creates space outside the border.

By default, width and height set the content-box dimensions, so padding and border add to the rendered size. With box-sizing: border-box, the declared width and height include padding and border. Margins remain outside the border box.

With this setting, the card's border-box width is 20rem; its content area is narrower because padding and border fit within the declared width.

From normal flow to layout systems

Without layout changes, elements follow normal flow. Block boxes, such as paragraphs and headings by default, usually start on a new line and take the available width. Inline content, such as text and links, flows within a line and wraps when needed. The display property changes how an element participates in layout.

Flexbox arranges items primarily along one axis, in a row or column. It is useful for aligning navigation links or distributing items in a toolbar. Grid arranges items in rows and columns, making it useful for page sections or collections of cards.

The navigation items form a row by default. The grid creates as many columns as fit while keeping each at least 14rem wide when space permits.

Adapting layouts to available space

Responsive layout uses flexible sizing and, when needed, media queries so content can adapt to available space and different screen sizes. Flexbox and Grid can support responsive designs by arranging items according to the room available.

A practical approach is to begin with normal flow, then choose Flexbox for primarily one-dimensional arrangements or Grid for arrangements with rows and columns. Combine flexible sizing with responsive adjustments where needed, and check that typography and color remain readable.

Takeaway: Selectors target elements, the cascade chooses between competing declarations, and the box model explains size and spacing. Normal flow is the starting point; Flexbox, Grid, and responsive layout provide ways to adapt arrangements to the page.