CSS (Cascading Style Sheets) is a language for describing the presentation of web pages. It controls colours, fonts, spacing, sizes and layout. In Joomla, CSS styles the pages produced by templates and extensions.
How CSS rules work
A rule contains a selector and declarations consisting of properties and values. The selector identifies the elements to style, such as elements with a particular class. HTML defines content structure, while CSS defines presentation.
Classes suit repeated elements such as cards, buttons and blocks. Broad selectors can affect an entire website, so custom styles should usually be limited to the relevant component or container.
Cascade, specificity and inheritance
When multiple rules set the same property, the browser resolves the conflict through the cascade. It considers declaration origin and importance, cascade layers, selector specificity and, when other factors are equal, source order. The last stylesheet therefore does not always win.
Inheritance is a separate mechanism: some values, such as text colour, can pass from a parent element to its children. Not all properties inherit. Frequent use of !important makes later changes harder and usually does not replace investigating the conflict.
The box model
An element’s box consists of content, padding, a border and margin. With box-sizing: border-box, the specified width and height include padding and borders. This makes the sizes of cards and columns easier to predict.
Responsive presentation
Flexbox and Grid support page layouts, while media queries adapt styling to conditions such as screen width. CSS custom properties allow colours and sizes to be reused. Test text zoom, long headings and keyboard use as well as different viewport widths.
CSS in Joomla
A Joomla template and installed extensions can each load stylesheets. Use the template’s supported custom stylesheet or a child template for modifications. Names such as user.css and custom.css are not universal: the correct name and loading behaviour depend on the template.
Joomla extension developers manage stylesheets through Web Asset Manager. After a change, inspect the files actually loaded, relevant caches and the element’s computed styles in browser developer tools.
Summary
CSS separates presentation from page structure. Maintainable Joomla styling requires an understanding of the cascade, appropriately scoped rules and checks across different screen sizes.