Cascading Style Sheets are documents used in tandem with another document to dictate the stylistic presentation of data. Cascading Style Sheets are often referred to by the initials "css," and play an important role in modern web design. While Cascading Style Sheets may be used with any sort of structural XML document, the overwhelming bulk of their use is for giving stylistic instructions to XHTML and HTML pages.
Cascading Style Sheets allow a designer to separate the structural and stylistic elements of their web page completely. In the past web pages were written almost exclusively as a single HTML document. Things such as background colors, justification of text, font sizes, and borders, were all dictated within the HTML document itself. While this was, in many ways, a common-sense way to handle design, it was by no means the most efficient.
A truly structural HTML or XHTML document possesses none of these features. It contains semantic codes, indicating what sections of text are intended to be headers, which are intended to be emphasized or stronger, and which are meant to be basic paragraphs — but the actual presentation of this information is left undefined. Of course, it is important to note that most web browsers have basic Cascading Style Sheets that they apply to any page without its own — rendering text within <strong> tags as a certain weight of bold, for example, or text within the <h1> header tag
as a certain size and weight.
Once a page has been built structurally, with the relevant semantic tags, and labels applied to important tags — given either as classes or IDs — it is time for one or more Cascading Style Sheets to be applied. The sheets are referred to in the header of the HTML or XHTML document, and can have values there assigned to them, such as a specific name, or a specialized type — e.g. defining a sheet to be used exclusively when the webpage is printed.
Cascading Style Sheets can then define all of the stylistic bits of the web page, referencing them by tag type, class or ID, or by their location in the data structure of the page. Using Cascading Style Sheets, a designer can define fonts, colors, positions, borders, hover effects, sizes of elements, visibility, and much more.
Unlike the older model, where each page had to contain all of its own stylistic definitions, with Cascading Style Sheets, all the style for an entire site can be contained in one document. This has a number of large benefits. To begin with, file sizes are usually drastically reduced — the larger the site, the larger the savings, as all the styles are being loaded only once, rather than one time for each page. A site built with Cascading Style Sheets also tends to be much easier to update, as the code that needs to be changed is much less. For example, under the older model, in order to change the font size of the copyright line at the bottom of each page, one would have to go through and manually edit every page in the site — for a large site, this could be many thousands of lines of code. Using Cascading Style Sheets, however, only a single line need be edited in one document, and the change would take effect over the entire site.
Cascading Style Sheets are becoming more and more widely used, with the advent of better implementation in popular browsers, a more wide-spread acceptance of Web Standards as a whole, and as mainstream web design programs begin using them more. Overall, most would agree that Cascading Style Sheets can make a designer's life much easier, and make for a faster, cleaner Internet for all.