What Is CSS?
Author: Domeny.ForSale editorial team Published
In brief: CSS is a style sheet language that defines the appearance and layout of web pages: colours, fonts, spacing and the positioning of elements. It works alongside HTML, which describes the structure and meaning of content. With CSS, the same page can have a readable layout on both a phone and a large monitor.
What does CSS control, and how does it differ from HTML?
CSS stands for Cascading Style Sheets. It is a declarative language: you specify the effect you want for an element, and the browser handles displaying it. You do not need to describe step by step how to draw a button or position a paragraph.
The division of responsibilities on a page is easiest to understand using a contact form as an example:
- HTML specifies that the form contains labels, fields for entering data and a submit button.
- CSS sets the width of the fields, the appearance of the button, the spacing and the form’s layout on different screens.
- JavaScript can handle additional behaviour, such as submitting data without reloading the page.
CSS does not replace correct HTML. Making an ordinary piece of text look like a heading does not make it a heading for assistive technologies. An element’s appearance and meaning are two separate matters.
Style sheets also let you separate presentation from content. A single shared CSS file can change the appearance of buttons across many pages without editing each button individually.
What does a CSS rule look like?
A CSS rule consists of a selector, which identifies elements, and declarations, which set their appearance. Each declaration contains a property and its assigned value.
p {
color: #222222;
font-size: 18px;
line-height: 1.6;
}
The p selector targets all paragraphs. The color property sets the text colour, font-size sets its size, and line-height sets the line height. In this example, the line height is 1.6 times the font size, giving the text more vertical space.
However, you do not always want to change every element of a particular type. A class is a name assigned to an element in HTML that lets you target it in CSS. A class selector begins with a dot:
.highlight {
background-color: #fff4cc;
padding: 16px;
border-radius: 8px;
}
This rule gives elements with the highlight class a light background, internal spacing and rounded corners. Simply writing the name in the style sheet is not enough — the relevant element must have that class assigned in HTML.
What does the cascade mean, and why do styles sometimes get overridden?
Several rules can match a single element. The cascade is the mechanism that determines which declaration is applied when different rules set the same property.
There is no simple rule that “the last declaration always wins”. The browser considers factors including the origin and importance of declarations, cascade layers and specificity, meaning the weight of a selector. When all other conditions are equal, the order in which declarations appear matters.
p {
color: navy;
}
.note {
color: darkred;
}
A paragraph with the note class will be dark red. In this example, the class selector has higher specificity than the selector targeting the element type.
Inheritance is a separate mechanism: some properties, such as text colour, can pass from a parent element to its contents. This does not apply to every setting — borders and margins are not inherited by default. When a style does not work, first check whether the selector matches and whether there are competing declarations, rather than immediately adding !important, which changes a declaration’s priority and can make later changes more difficult.
How does CSS adapt a page to the screen?
Responsiveness means adapting the layout to the available space. CSS makes this possible through flexible widths, mechanisms for arranging elements and media queries — conditions that activate selected styles, for example at a particular width of the page’s viewing area.
Tools for building layouts include Flexbox, which is convenient for arranging elements in one direction, and Grid, which is designed for layouts with rows and columns. For example, a product list can have three columns on a wide screen and one on a narrow screen.
When setting dimensions, you need to understand the box model: an element has a content area, internal spacing (padding), a border (border) and an external margin (margin). By default, a specified width applies only to the content. Setting box-sizing: border-box makes it include the padding and border as well, making the element’s size easier to control.
How do you start working with CSS?
Rules are most often written in a separate file with the .css extension, which the HTML document references in its head section. Styles can also be placed directly in the document, but a shared style sheet usually makes a larger website easier to maintain.
You can complete your first exercise without installing any additional tools:
- Open a page in your browser and select the option to inspect an element from the context menu.
- Select a paragraph, then change its
colororfont-sizein the styles panel. - Check which declarations are crossed out — they have usually been overridden by other rules.
- Narrow the window and assess whether the text remains readable and whether any unnecessary horizontal scrolling appears.
Changes made in developer tools are usually temporary and disappear when you refresh the page. If the result is correct, transfer the rule to your project file. Start by changing one element and check the result with enlarged text as well — you will understand how things relate to one another faster than by pasting in a large, ready-made style sheet.
Read also
