When it comes to terms like websites, HTML, software and coding, CSS is one of the first that comes to mind. So what exactly is it, and what does it do?

What Is CSS?

CSS stands for "Cascading Style Sheets." Alongside HTML and JavaScript, it is one of the core web technologies, and it gives you a great deal of visual control over web pages.

With CSS you can decide exactly how HTML elements look in the browser, presenting your markup with whatever design you have in mind.

How Is CSS Used?

If you're building a website, you start with HTML. This markup language lets you add headings, paragraphs, images, tables, forms, lists and much more. What it can't do is control how those elements are presented or arranged on the page.

That's where CSS comes in. CSS describes how a page should appear to the browser, and the browser renders it accordingly. It can be used for a wide range of styling purposes: changing the text and background colors on a page, removing underlines from links, and bringing images, text and other HTML elements to life.

There are three ways to apply it:

What Does CSS Do?

As noted, CSS is a language that defines how documents are presented, styled and laid out for users.

A document is usually a text file structured with a markup language. HTML is the most common one, but you may also come across others such as SVG or XML.

Presenting a document to a user means converting it into a form your audience can actually use. Browsers like Firefox, Chrome and Edge are designed to present documents visually — on a computer screen, a projector or a printer, for example.

CSS can handle very basic document text styling: you can change the color and size of headings and links, and you can use it to build a layout. You can turn a single column of text into a design with a main content area and a sidebar for related information, or even use it for effects such as animation.

The Advantages CSS Offers

Without extra HTML needed just for formatting, the structure of your document becomes far more readable, and it's easier to update without breaking anything. All of your CSS can live in a separate file, which makes updating your styles simple.

Using cascading style sheets generally means less code behind your web pages, and that helps with download times. Images are often the heaviest element on a page and usually the biggest culprit in slowing sites down, so make sure yours are optimized and compressed.

CSS gives you more control over how your pages are presented. Given how little control web designers sometimes have, it's reassuring to know there's a way to claim some of it back. Beyond offering more formatting options than HTML — such as control over letter spacing and line spacing — CSS can also determine the order in which parts of the page load. If you have some heavy graphics, you can place them last in your code so visitors at least have text to read while your graphics load.

While not everyone agrees, CSS is also likely to help your pages get found in search engines. Because a CSS-driven site contains less code and has a simpler structure, it's easier to read — not just for you, but for search engines too. In other words, CSS is good for SEO as well.

The Most Popular CSS Libraries

Animate.css is a ready-to-use library of CSS animations that works across multiple browsers and is very easy to set up. You define the animation's length, delay and interactions, all through fairly simple commands.

With Bootstrap, developers don't have to create separate projects to adapt a site to smaller screen sizes. They just combine the necessary Bootstrap classes, and the design adjusts itself.

UIkit gives you a comprehensive collection of HTML, CSS and JS components. It's extendable with themes and easy to customize to create your own look — a lightweight, modular CSS library for building fast, powerful web interfaces.

Some Handy CSS Snippets

By learning a few simple CSS rules, you can design your website however you like. Here are a few examples:

Basic paragraph styling: Styling with CSS means you don't have to specify a style every time you create an element. For example: p { font-size: 120%; color: dimgray; }

Changing letter case: Used to render lowercase paragraphs in small caps, with p.smallcaps { font-variant: small-caps; } applied via <p class="smallcaps">paragraph</p>.

Changing link colors: A link can be assigned four different colors — its standard, visited, hover and active states: a:link { color: gray; } a:visited { color: green; } a:hover { color: purple; } a:active { color: teal; }

Removing underlines: While underlined text clearly signals a link, removing the underline sometimes looks cleaner. This is done with the text-decoration property: a { text-decoration: none; }

Making a link button: To draw attention to your content with a button-style link, use a:link, a:visited, a:hover, a:active { background-color: green; color: white; padding: 10px 25px; text-align: center; text-decoration: none; display: inline-block; }

Creating a text box: If you want to highlight an element on your page, you might add a border: p.important { border-style: solid; border-width: 5px; border-color: purple; }