CSS
CSS (Cascading Style Sheets) is a declarative language that controls the visual presentation of HTML documents across screens, print, and other media.
§ 1 Definition
CSS stands for Cascading Style Sheets. It is the language that makes the web look like anything other than plain text on a white background. CSS selects HTML elements and applies visual properties: colors, spacing, fonts, layout, animations, and responsive behavior. The "cascading" part of the name refers to the priority algorithm that determines which rules win when multiple declarations target the same element. This cascade is the source of both CSS's power and its reputation for being frustrating. Understanding specificity, inheritance, and origin priority is mandatory, not optional. CSS is not a design tool. It is a engineering system for describing visual intent across an unbounded set of devices and contexts.
§ 2 How it works
CSS rules consist of a selector and a declaration block. The selector targets elements (by type, class, id, attribute, or state). The declaration block contains property-value pairs. Browsers compute the final "cascaded value" by resolving conflicts through specificity, source order, and `!important` flags. Modern CSS supports custom properties (variables), container queries, nesting, and layer-based cascade control via `@layer`.
§ 3 Layout evolution
CSS layout has progressed through four eras: floats and tables (bad), positioning (hacky), Flexbox (good for one dimension), and CSS Grid (the actual two-dimensional layout system). If you are still reaching for float-based layouts, stop. Flexbox and Grid handle almost every layout case with less code and fewer bugs.
§ 4 Common misconception
CSS is not "not a real language." It is Turing-complete in its preprocessor forms and, more importantly, it enforces a strict resolution model. Calling CSS easy reveals inexperience. Mastering the cascade, understanding stacking contexts, and debugging cross-browser rendering is a genuine engineering skill.
§ 5 Note
§ 6 In code
```css
/* Target all paragraphs */
p {
color: #333;
line-height: 1.6;
margin-bottom: 1rem;
}
/* Class selector */
.card {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 1rem;
}
```§ 7 Common questions
- Q. What does cascading mean?
- A. It refers to the algorithm that resolves conflicting CSS declarations by considering importance, specificity, source order, and origin.
- Q. Should I use a CSS framework?
- A. Frameworks accelerate prototyping but often ship unused styles. Understand vanilla CSS first, then choose tools intentionally.
- CSS controls visual presentation via selectors and declarations.
- The cascade algorithm resolves rule conflicts by specificity and origin.
- Modern CSS (Grid, Flexbox, custom properties) eliminates most old layout hacks.
Atomic Glue writes lean, maintainable CSS using modern layout and custom properties. We do not ship unused framework bloat. Get in touch to discuss your project.
Get in touchCSS (Cascading Style Sheets) is a declarative language that controls the visual presentation of HTML documents across screens, print, and other media.
Category: Web Development (also: Front End, Design)
Author: Atomic Glue Team
## Definition
CSS stands for Cascading Style Sheets. It is the language that makes the web look like anything other than plain text on a white background. CSS selects HTML elements and applies visual properties: colors, spacing, fonts, layout, animations, and responsive behavior. The "cascading" part of the name refers to the priority algorithm that determines which rules win when multiple declarations target the same element. This cascade is the source of both CSS's power and its reputation for being frustrating. Understanding specificity, inheritance, and origin priority is mandatory, not optional. CSS is not a design tool. It is a engineering system for describing visual intent across an unbounded set of devices and contexts.
## How it works
CSS rules consist of a selector and a declaration block. The selector targets elements (by type, class, id, attribute, or state). The declaration block contains property-value pairs. Browsers compute the final "cascaded value" by resolving conflicts through specificity, source order, and `!important` flags. Modern CSS supports custom properties (variables), container queries, nesting, and layer-based cascade control via `@layer`.
## Layout evolution
CSS layout has progressed through four eras: floats and tables (bad), positioning (hacky), [Flexbox](/glossary/css-flexbox) (good for one dimension), and [CSS Grid](/glossary/css-grid) (the actual two-dimensional layout system). If you are still reaching for float-based layouts, stop. Flexbox and Grid handle almost every layout case with less code and fewer bugs.
## Common misconception
CSS is not "not a real language." It is Turing-complete in its preprocessor forms and, more importantly, it enforces a strict resolution model. Calling CSS easy reveals inexperience. Mastering the cascade, understanding stacking contexts, and debugging cross-browser rendering is a genuine engineering skill.
## Note
CSS custom properties (variables) cascade and can be dynamically changed via JavaScript, unlike preprocessor variables which compile to static values. This makes them far more powerful.
## In code
## Common questions Q: What does cascading mean? A: It refers to the algorithm that resolves conflicting CSS declarations by considering importance, specificity, source order, and origin. Q: Should I use a CSS framework? A: Frameworks accelerate prototyping but often ship unused styles. Understand vanilla CSS first, then choose tools intentionally.
## Key takeaways
- CSS controls visual presentation via selectors and declarations.
- The cascade algorithm resolves rule conflicts by specificity and origin.
- Modern CSS (Grid, Flexbox, custom properties) eliminates most old layout hacks.
## Related entries
- [HTML](atomicglue.co/glossary/html)
- [CSS Flexbox](atomicglue.co/glossary/css-flexbox)
- [CSS Grid](atomicglue.co/glossary/css-grid)
- [Responsive Design](atomicglue.co/glossary/responsive-design)
- [Media Queries](atomicglue.co/glossary/media-queries)
Last updated June 2026. Permalink: atomicglue.co/glossary/css