Basics

CSS

Cascading Style Sheets – the stylesheet language that defines the look of websites: layout, colours, fonts, animations and responsive design.

CSS is what makes the web look good. Without CSS every site would be plain text with blue links. CSS turns HTML structure into responsive layouts with typography, colour and animation. Modern CSS (Grid, Flexbox, Tailwind) has changed frontend development and enables designs that used to need heavy JavaScript.

What is CSS?

CSS (Cascading Style Sheets) is a declarative stylesheet language that defines the appearance of HTML documents. CSS separates content (HTML) from presentation (design). Rules consist of selectors (which elements?) and declarations (which styles?). The cascade determines precedence: more specific rules override general ones. Modern approaches include utility-first (Tailwind), CSS-in-JS (Styled Components, Emotion), CSS Modules and BEM. CSS supports variables (custom properties), nesting, container queries and animations.

How does CSS work?

The browser parses HTML and CSS and builds the CSSOM. Together with the DOM it computes the render tree that determines how each element is displayed. The box model defines content, padding, border and margin. Layout systems (Flexbox, Grid) position elements. Media queries and container queries enable responsive design. The browser uses compositing and GPU acceleration for animations (transform, opacity).

Practical Examples

Responsive layout with Grid: A 3-column layout that becomes 2 on tablet and 1 on mobile – with CSS only.

Tailwind CSS: Utility classes like flex items-center gap-4 p-6 bg-white rounded-lg shadow for fast, consistent styling in HTML.

CSS animations: A loading spinner or a button that changes colour on hover – with keyframes, no JavaScript.

Dark mode: Custom properties and prefers-color-scheme media query for system-aware dark mode in a few lines.

Typical Use Cases

Website styling: Layout, typography, colour and hierarchy

Responsive design: Layout that adapts to screen size

Animation: Subtle UI animation (hover, transitions, loaders)

Design systems: Consistent styles at scale with variables and utilities

Accessibility: Focus styles, contrast and reduced-motion support

Advantages and Disadvantages

Advantages

Separation of content and design: HTML stays semantic, CSS handles presentation
Powerful layout: Grid and Flexbox handle most layout needs without hacks
Performance: CSS animations are GPU-accelerated and often faster than JS
Responsive by default: Media and container queries without a framework
Utility-first (Tailwind): Fast development with composable classes

Disadvantages

Cascade: Unintended inheritance and specificity can be hard to debug
Learning curve: Advanced concepts (Grid, custom properties, layers) take time
No logic: CSS cannot do real logic (except calc() and @supports)
Browser support: New features are not supported everywhere at once

Frequently Asked Questions about CSS

Tailwind CSS or traditional CSS?

Tailwind is utility-first: classes like flex, p-4, text-lg in HTML. Pros: fast development, consistent design, no naming issues. Cons: long class lists, learning curve. Tailwind suits component-based frameworks (React, Vue). Traditional CSS with BEM or CSS Modules suits when you want strict separation of markup and style.

CSS Grid or Flexbox?

Flexbox is for one-dimensional layouts (a row or column): nav bars, button groups, cards. Grid is for two-dimensional (rows and columns): page layout, dashboards, complex forms. In practice both are used: Grid for page structure, Flexbox inside grid cells.

How do I load CSS efficiently?

Critical CSS: inline only above-the-fold styles, load the rest async. Minify: remove comments and whitespace. Remove unused CSS (PurgeCSS, Tailwind content config). Cache: use content hash in filenames. Code-split: load only the CSS needed per page/route.

Want to use CSS in your project?

We are happy to advise you on CSS and find the optimal solution for your requirements. Benefit from our experience across over 200 projects.

Learn more Get free consultation

Back to IT Glossary

CSS