Jan Mikoláš
Glossary
CSS
CSS determines how HTML appears in different contexts. Its cascade allows multiple rules to be combined, but without clear boundaries the same mechanism can create a brittle interface that is difficult to explain.
Short definition
CSS rules assign properties to document elements.
A CSS rule consists of a selector and property declarations. The selector identifies the HTML elements the rule targets, while declarations set properties such as colour, display, gap and font-size. The browser then evaluates the cascade, specificity, rule order, inheritance and available space to determine the resulting style.
The name Cascading Style Sheets reflects how several styles can apply to one element. More than file order is involved: style origin, importance, specificity and inheritance also matter. CSS is therefore not merely “colours and spacing” but a complete system for HTML layout and presentation.
What it is used for
Visual hierarchy, layout and adaptation to the display
CSS connects web content with a particular visual presentation without changing its meaning in HTML.
- typography, colours, spacing and visual hierarchy on a product detail
- Flexbox and Grid for cards, navigation, catalogue filters and administration dashboards
- media queries for mobile views, wider panels and print
- hover, focus-visible and disabled states for interactive controls
- light and dark themes or shared design tokens in a component interface
Practical example
A responsive product card without changing the HTML meaning
The same product article can use two columns on a wide screen and one on mobile. CSS changes the layout, not the role of the heading, price or button. minmax prevents long content from overflowing unexpectedly, and a media query adapts the number of columns to the available space.
focus-visible is a state in its own right. Hover does not exist on every device and must not be the sole carrier of information or an action. Contrast is assessed between the actually rendered text, icon or focus indicator and its background.
CSS
.product-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
}
@media (max-width: 40rem) {
.product-grid { grid-template-columns: 1fr; }
}How it works
From an HTML element to the resulting layout
The final appearance comes not from one rule but from evaluating every relevant style and the container size.
- HTML creates the structure Elements, classes, attributes and their tree give CSS the elements it can target.
- A selector finds elements For example, .product-grid selects a particular component; an overly general selector affects more places than the design intended.
- The cascade selects a declaration When rules conflict, the browser considers origin, importance, layer, specificity and rule order.
- Layout calculates the space The box model, Flexbox or Grid distributes the available width and height among descendants according to their rules.
- Media and user preferences Conditions can adapt styles to the viewport, print or preferences while the content and controls remain the same.
Important concepts and synonyms
Stylesheets, rules and the cascade have precise meanings.
A stylesheet is a file or set of CSS rules; Flexbox and Grid are layout mechanisms, not complete replacements for CSS.
Selector and specificity
A selector identifies target elements. Specificity helps resolve rule conflicts, but long selector chains and !important usually make maintenance harder.
Cascade and inheritance
The cascade selects the winning declaration. Some properties such as colour and font-family can inherit; others such as margin do not.
Box model
Content, padding, border and margin determine the actual space occupied by an element. Misunderstanding the box model commonly creates seemingly inexplicable overflow.
Flexbox and Grid
Flexbox suits one-dimensional layouts, while Grid handles rows and columns. The right choice follows the required layout rather than the popularity of a tool.
Custom properties
CSS variables such as --colour-accent support shared tokens. They are not the same as preprocessor variables, and their values can inherit.
Benefits and limitations
Powerful presentation needs simple, predictable rules.
Benefits
- changing appearance without modifying HTML content
- responsive layouts for different display sizes
- shared components and design tokens across the interface
- focus states and contrast that support keyboard use
Risks and common mistakes
- using !important as a permanent substitute for a clear cascade
- a fixed-width layout that overflows on mobile
- information available only on hover or conveyed by colour alone
- a global selector that unexpectedly breaks another component
- visual reordering that creates a confusing order for keyboard or screen-reader users
When to choose a simpler solution
Design layouts around the content and real widths.
A small website often needs only clear classes, custom properties and a few layout rules. A larger administration interface benefits from a named design system, component isolation and shared rules for spacing, colours and states. The goal is not to maximise the number of utility classes or abstract every value, but to keep the output consistent and easy to change.
Responsiveness is more than a breakpoint for a phone. Long translations, enlarged text, form errors, an empty list and real product content all need to be verified. CSS cannot fix poor text contrast when the design selects unsuitable colours; this must be tested in the actual interface.
What to consider
Prevent brittle CSS before it begins to form.
Rules should have a clear scope, resilient layout and accessible interactive states.
- keep selectors close to the relevant component and do not escalate specificity without a reason
- use Flexbox or Grid for layout rather than manual offsets and fixed dimensions
- test mobile, long content, text enlargement and horizontal overflow
- ensure contrast, visible focus and a disabled state; hover is not the only mechanism
- understand where a cascade conflict comes from before using !important
Common questions
CSS in practice
What is the difference between CSS and HTML?
HTML describes the structure and meaning of content. CSS controls its presentation, including typography, colours, layout and responsive behaviour.
When should I use Flexbox and when Grid?
Flexbox is often natural for one axis, such as a navigation row. Grid suits relationships among rows and columns, such as a card catalogue. The choice depends on the layout.
Is !important the right way to fix a conflict?
Only rarely. It usually conceals a problem with selector scope or the cascade and makes later changes harder. Clarifying the rules and their order is better.
Is responsive design only about mobile?
No. It responds to available space and also accounts for enlarged text, long content, orientation and different input methods.
How I build web interfaces in practice
I connect presentation with accessible structure and real content.
For e-commerce and application interfaces, I address responsive layouts and interactive states as well as how the frontend works with backend data.