Cascading Style Sheets (CSS) is used to describe the look and formatting of markup language documents like HTML or XHTML. Also, if chosen, it can be applied to any kind of XML documents, including SVG and XUL.
First of all CSS can be implemented in HTML documents in three ways: inline, in document header or external, either one of the ways either a mix of them. The best and most recommended way is to use CSS externally. External CSS can be cached by browsers and also gziped, reducing document load time considerably.
Well, let's suppose we have some boxes with a width of 200 pixels that contain some data like links in a navigation menu or some info of special offers. If we decide to change the width we would need to go and change it manually in all web pages that those boxes are present, or just attach a class attribute to those boxes and declare the width in this class in the CSS file. This way we change the value of the width in only one line of code in the CSS file and it will update the change across the entire web site. And keep in mind that this is just an example, in real applications the use of CSS are limitless.
This is the best feature that CSS has to offer! When using external CSS, not only you remove it from the HTML code, making HTML file size smaller, but also browsers can cache it, and after the first load it benefits both to the user experience, making the site load faster, but also to the server the web site is hosted on, reducing greatly the traffic.
All major browsers and most of the others know to handle gzip files, thus CSS can be gziped, reducing transfer ten to twenty times.
Search engines use robots to get and parse your code, and some algorithms that rate your content. One of the benefits is better code to text ratio, since there is less HTML/CSS code in the document; the content has a higher ratio. Another one is that robots consider first text found in the document to be more important than the one at the bottom, thus using CSS (external) means to remove the CSS code from HTML tags or from the "header" tag, so the content gets a higher position at the top of the document.
By using advanced CSS techniques the same content can be rendered in different ways for different screen sizes or devices like a desktop screen, smart phones etc. Also CSS can be used to customize the HTML document for printing purposes.
This is a pretty cool feature, if you choose to use it. In case you want to use some special font for a title, or any kind of text data, there are two ways. First is use and image editor and create a custom image with the font applied to that text. In this case search engines won't be able to read the text from that image, which is a downside. Second way is to use CSS for custom fonts, which does a pretty good job, and search engines are able to read text. Also in most cases, although the user's browser must download the font, the traffic on server and user download is greatly reduced.
There are many CSS techniques to improve user experience through accessibility. I’ll give one example for the moment. Users are used to identify the links in a html document by looking at the underlined text, but normal underline cuts off the bottom of letters with descended like "g", "j", "q", "y" etc. making text harder to read. A quick fix is to remove the underline and put a border-bottom a few pixels down the text. This technique is present in the current web site you are reading.
If used correctly the layout can be consistent across the whole web site. This can also be done using frames (not recommended, especially on public data) or using full flash web technology to render a web site.