CSS or Cascading Style Sheets is a computer language used to tell web browsers what elements should look like. CSS is most commonly used to describe HTML elements, thus setting the aesthetics for web pages. A user’s web browser interprets the CSS and renders the web page elements according to the CSS rules for each element.

Examples of properties include font-size, colour, width and so on. If you were to set these properties for a HTML paragraph element, the CSS syntax would look something like this:

p{
    font-size: 14px;
    color: red;
    width: 200px;
}

The purpose of CSS is to allow web developers to separate the page content from the visual design of that content. This makes website code cleaner, tidier and easier to make changes to. Before CSS, visual styling was done with HTML properties, within the HTML document. It was a horrible mess.

CSS code can be written within HTML files but more commonly is written in its own files. The HTML document then calls the CSS file within a <style> tag.

The name Cascading Style Sheets refers to the priority system inherit in the CSS specification. Elements may have one or more matching CSS rules applied to it with conflicting values. Each rule has a priority assigned to it in a cascade and the rule with the most priority overrides the others.

CSS is developed in ascending levels with each building upon the last. The current level of CSS is CSS3; CSS4 is in development.

CSS Preprocessor

CSS is a dumb language without much programming functionality. Because of this, it’s hard to keep CSS code organised and clean, and it’s hard to avoid repeating yourself with rule statements. Also, CSS is rendered slightly differently by each individual browser. For some CSS features, workarounds are required to ensure the rendered output is consistent between browsers. This makes CSS code bloated and wastes developer time testing the same web page on different web browsers.

To improve this situation CSS preprocessors were developed. These preprocessors add functionality we wish CSS had. Code is written in the preprocessor language and then the preprocessor converts it into basic CSS that any browser can interpret. The most common CSS preprocessors are SASS, LESS and Stylus. We usually use SASS, but the others are perfectly capable too. CSS preprocessors are discussed further at this vanseo design article.

Another way to preprocess CSS is to embed the CSS in a server side scripting language like PHP. This allows style values to be drawn from variables. A cool use for this is to fill in style values from the database, which is handy for allowing non-coders to set colours and other styles in a friendly admin interface.

Further Reading

Read more about CSS at the CSS Wikipedia article and the W3 CSS overview.