CSS (Cascading Style Sheets)

CSS, or Cascading Style Sheets, is the language that controls how HTML content is presented in a browser. HTML describes structure and meaning. CSS describes appearance, layout, and visual behaviour. It decides how text is spaced, which elements align into rows or grids, how components respond to screen size, and what interactive states such as hover or focus should look like.

The word "cascading" is the important part. When multiple rules could apply to the same element, the browser resolves them through the cascade. Source order matters. Specificity matters. Inheritance matters. Browser defaults also matter. That is why CSS can feel simple at first and then surprisingly subtle. A rule is rarely interpreted in isolation. It competes with other rules that may come from the same stylesheet, a component library, inline styles, or user agent defaults.

The browser turns HTML into a DOM tree and CSS into a CSSOM. From those it builds a render tree that is used for layout and painting. This pipeline is why some CSS changes are cheap while others are expensive. Changing a colour may only require repainting. Changing geometry can trigger layout recalculation and move many surrounding elements. On large pages or during animation, those differences affect performance and perceived smoothness.

Layout is where modern CSS became much more capable. Early web design leaned on floats and awkward hacks. Today most interface work uses Flexbox for one dimensional alignment and Grid for two dimensional layouts. The box model remains fundamental: every element has content, padding, border, and margin. Understanding how width, height, overflow, and positioning interact with that model prevents a large share of common front end bugs.

CSS also carries accessibility and maintainability concerns. Poor contrast, invisible focus states, fixed heights, or motion heavy effects can make an interface harder to use. Overly specific selectors, scattered custom values, and ad hoc overrides make a stylesheet fragile. Strong systems usually rely on tokens for colour and spacing, clear component boundaries, and predictable naming or scoping so styles do not leak unexpectedly.

It is worth correcting one common misconception. CSS is not a markup language. It is a style sheet language. It does not define document structure, but it does define the presentation rules that the browser applies to structured content. That distinction matters because good styling follows semantic HTML rather than compensating for poor markup.

In practice, CSS is one of the web's most powerful abstractions precisely because it is global, declarative, and incremental. A small rule can restyle a whole class of elements, and a bad rule can do the same in the wrong direction. Teams that understand the cascade, choose layout primitives deliberately, and treat styles as a system rather than decoration usually build interfaces that are easier to extend, more accessible, and less surprising to debug.