What is CSS and what is it for?

What is CSS and what is it for?

CSS is the language used to give style to web pages. When a person opens a website in their browser, they do not see the code: they see colors, letters of different sizes, buttons, menus, well-placed images and tidy spaces. That entire visual appearance is not decided by chance, nor by the browser on its own, but by a set of rules written in CSS, the acronym for Cascading Style Sheets. Together with HTML, CSS is part of the foundation on which the vast majority of websites on the internet are built, and understanding it is essential for anyone who wants to create, maintain or analyze a web page.

This article explains what CSS is, how it differs from HTML, the ways it can be applied to a page, its basic syntax, the most common properties, what responsive design means and the role played by frameworks such as Bootstrap.

What CSS stands for

The acronym CSS stands for Cascading Style Sheets. Each part of the name describes a feature of the language. A style sheet is a set of rules that tells a document how it should look. The word "cascading" refers to the way the browser combines and resolves rules when several of them match the same element: declarations are inherited from parent elements, combined with one another and, when they conflict, applied according to a well-defined order of priority that resembles the course of a waterfall. That is why the value set by one rule can be modified by another, more specific rule written later.

It is worth making clear from the start that CSS is not a programming language. It does not express conditions, loops or calculations the way JavaScript or Python do. CSS is a style language, also called a presentation language: its only job is to describe how the content of a page looks and how it is laid out. This distinction is useful for beginners, because it sets realistic expectations about what each technology can do.

What HTML does and what CSS does

To understand what CSS is, it helps to compare it with HTML, the language used to write the content of web pages. HTML takes care of structure and meaning: it defines headings, paragraphs, lists, images, links and forms. It tells the browser, for example, that one phrase is a heading and another is a paragraph. CSS, in contrast, takes care of presentation: it defines how those headings and paragraphs look, with what color, which typeface, what size, what margins and in what position of the screen they appear.

A simple analogy helps to fix the idea. Think of a house: HTML would be the structure, that is, the walls, the columns, the roofs and the layout of the rooms, because without that structure the house does not exist. CSS would be the decoration: the paint on the walls, the flooring, the lighting and the furniture, because all of that defines how the house looks even though it does not hold the construction up. HTML can also be compared to a person's skeleton and CSS to their clothing: the skeleton supports the body and defines its basic shape, while the clothing is what other people notice first. A modern page needs both languages: a page with HTML but no CSS displays as a plain text document, without colors or layout, much like the first websites of the nineties.

How CSS is applied to a web page

There are three ways to apply CSS to a page, and each one occupies a different place within the project. All three produce the same visual result in the browser, but they change how the code is organized and how easy it is to maintain later.

• Inline CSS: the rules are written directly inside the HTML tag, through the style attribute. For example, a paragraph can include style="color: blue;" and that particular paragraph will appear with blue text. It works for very specific changes, but it mixes presentation with content and makes the code hard to maintain as the page grows.
• Internal CSS: the rules are placed inside a style block located in the head section of the HTML document, that is, in the upper part of the file. This way, all the styling of a page stays together in a single place, although it still lives inside the same file and only applies to that page.
• External CSS: the rules are saved in a separate file with a .css extension, for example styles.css, and that file is linked from the HTML document with a link tag. In this way, a single style file can control the appearance of many pages at once.

In real projects, external CSS is almost always recommended, because it separates content from presentation: design changes are made in one single file and are reflected across the whole site, the code stays more organized, and the browser can store the file in its cache so pages load faster. The three methods coexist in practice, but the external one is the basis of good web development practices.

The basic syntax of CSS

The fundamental unit of CSS is the rule, and every rule follows the same structure. First comes a selector, which indicates which elements of the page the style will apply to. Then braces are opened and, inside them, one or more declarations are written, separated by semicolons. Each declaration is made up of a property, a colon and a value. Written in plain text, the general form is this: selector { property: value; }.

For example, the rule p { color: blue; } tells every paragraph on the page to show its text in blue. In that rule, the letter p is the selector and points to the paragraph tags of HTML; color is the property, which defines the color of the text; and blue is the chosen value. If larger text were also wanted, it would be enough to add another declaration inside the same braces: p { color: blue; font-size: 20px; }.

Selectors can name a tag directly, as in the previous examples, but they can also be more specific. A class is written with a dot before the name, such as .highlight, and is used to apply the same style to several elements that share that class. An id is written with a hash sign, such as #menu, and is used to point to a single element within the page. Thanks to this flexibility, CSS can style anything from a single word to entire sections of a site.

The most common CSS properties

CSS offers hundreds of properties, but most everyday designs are solved with a small group of them. The following table summarizes the most common ones, explains what each does and shows an example of the values they can receive:

The margin and padding properties are part of the so-called box model, a central idea of CSS according to which every element on a page behaves like a rectangular box made up of four parts: the content, the inner space called padding, the border and the outer space called margin. Understanding this model helps anticipate why an element takes up more or less space than expected and makes it easier to fine-tune the layout of a page.

What responsive design is

Today, pages are visited from screens of many sizes: phones, tablets, laptops and large monitors. Responsive design is the practice of creating pages that look and work well on all of those devices, automatically adjusting the layout, the font sizes and the visibility of elements according to the width of the screen. Without responsive design, a page built for a computer looks tiny, messy or shows horizontal scroll bars when it is opened on a phone.

The main tool CSS offers to achieve this behavior is the media query. A media query is a special rule that applies certain styles only when a condition about the device is met, almost always related to the width of the screen. In plain text, a media query is written like this: @media (max-width: 768px) { selector { property: value; } }. This means that the styles inside the braces only apply when the screen is 768 pixels wide or less, which is the typical case of a tablet or a phone held in portrait orientation. Thanks to this technique, the same HTML document can show a wide horizontal menu on a computer and a compact, stacked menu on a phone, without creating two versions of the page.

Besides media queries, responsive design relies on other CSS tools, such as relative units of measurement, which are calculated from the size of the screen or the base font, and the layout systems called flexbox and grid, which make it possible to rearrange rows and columns according to the available space. Together, these tools make content adapt to the device instead of forcing the user to zoom or scroll sideways to read.

What CSS frameworks are and the role of Bootstrap

As a site grows, writing every rule from scratch can become slow and repetitive. That is why CSS frameworks exist: sets of ready-made styles that offer classes and components ready to use, such as buttons, forms, menus, cards and column systems. Instead of writing the style for each element, the developer adds the classes provided by the framework to the HTML tags and the design appears immediately, with a consistent look across the whole project.

Bootstrap is the best-known and most widely used CSS framework in the world. It started as an internal project at Twitter and was released as open source in 2011. Among its strengths are its twelve-column grid system, which makes it easy to arrange content in rows and columns that rearrange themselves on small screens, and its collection of ready-to-use components, such as buttons, forms, navigation bars and modal windows. Because it is built on top of CSS, everything learned about this language also applies inside Bootstrap.

Using a framework speeds up development and guarantees consistency, but it has trade-offs: if the styles that are not used are not stripped out, the page may load more weight than necessary; sites built with the same framework tend to look alike, and fine control over the design is limited by what the tool offers. That is why the usual advice is to learn plain CSS first, so as to understand what happens behind every class of the framework, and then choose according to the project: direct CSS for simple, highly customized pages, and a framework when time is short or the site needs many standard components.

Conclusion

CSS is the language that turns the bare structure of HTML into the visual pages users see every day. Knowing what CSS is, telling it apart from HTML, learning the three ways to apply it, mastering its selector { property: value; } syntax, handling properties such as color, background, font-size, margin, padding and display, and understanding responsive design and media queries are the first steps for anyone who wants to work in web development or simply understand how a website works. The next practical step is to open the developer tools of any browser, inspect an element and watch live which CSS rules shape it. That curiosity about what happens behind the screen is, in the end, the best way to learn this language.