What is CSS?

What CSS is

CSS is the language that controls how web pages look: layout, colors, fonts, spacing, and animation. Good CSS makes a site look right on phones, tablets, and desktops, and supports light and dark themes.

CSS was proposed in 1994 by Håkon Wium Lie, who worked with Tim Berners-Lee at CERN. He developed it together with Bert Bos, and the first version became a W3C recommendation in 1996. The aim was to keep the look of a page separate from its content.

Early browsers supported CSS unevenly, which made layout difficult for many years. After CSS 2, the language was split into separate modules that can advance on their own schedule. Flexbox and Grid later gave CSS proper layout tools, and more recent additions include custom properties, container queries, and native nesting.

How CSS works

CSS stands for Cascading Style Sheets. A style sheet is a list of rules. Each rule has a selector, which picks elements on the page, and a set of declarations, which set properties such as color, font size, or margin.

When several rules apply to the same element, the browser decides which one wins. This is the cascade, and it depends on the order of the rules and on specificity, which is a measure of how precise a selector is. Some properties, such as font and text color, are also inherited from parent elements.

Every element is treated as a box with content, padding, a border, and a margin. This is called the box model. Layout systems such as Flexbox and Grid arrange those boxes in rows, columns, and grids. Media queries let the rules change with the screen size, which is the basis of responsive design.

Key features of CSS

• Flexbox and Grid

  Flexbox lays items out in one direction, and Grid handles rows and columns together. Between them they cover most page layouts.

• Responsive design

  Media queries and container queries adapt a layout to phones, tablets, and desktops from one code base.

• Custom properties

  Also called CSS variables, they store values such as brand colors in one place. They make themes and dark mode much easier.

• Transitions and animations

  Changes in color, size, and position can be animated without JavaScript.

• Selectors and pseudo-classes

  Rules can target elements by type, class, state, or position, such as a link being hovered or the first item in a list.

• Separation of concerns

  One style sheet can style a whole site. Changing a value in one file updates every page that uses it.

When to use CSS

CSS compared with alternatives

How to start learning CSS

1. 01Learn basic HTML first, because CSS needs elements to style.
2. 02Follow the CSS learning path on MDN Web Docs at developer.mozilla.org.
3. 03Learn selectors, the box model, and the cascade before anything else, since most confusion comes from these three topics.
4. 04Practice Flexbox and Grid by rebuilding the layout of a simple site you like, such as a landing page with a header, cards, and a footer.
5. 05Use your browser's developer tools to inspect elements and edit styles live, then make your page work on a phone sized screen with media queries.

What CSS costs

CSS is a free and open standard. There is nothing to buy and no license to accept. Browsers, editors, and the main learning resources are all free.

How DATAL Projects uses CSS

CSS is part of our ui/ux design work in the Philippines. Common uses:

• Responsive layouts
• Brand colors and typography
• Light and dark modes

Common questions about CSS