Web Design Basics: What Is A Stylesheet And What Is It Used For?

Style sheets have changed Web design forever. How they improve the look of your Web site. Advice for newcomers to designing.

Not long ago, Web designers had to change the characteristics of each individual element on a Web page by editing its corresponding HTML (Hypertext Markup Language) code, an often time-consuming and mistake-prone task. In addition, they were limited in the design issues they could address, such as how and where to implement spaces, margins and indentations. Clearly, HTML was not developed with aesthetics in mind; it was made to be functional. And as a result, most Web sites, though purposeful, were lacking in visual appeal. But all of this changed with the advent of style sheets.

What are Style Sheets?

Style sheets are special layout enhancements that give you the ability to define a set of attributes, or "styles," for a block of text, a single Web page, or an entire Web site. They allow you to make sweeping changes to headings, borders, paragraphs, fonts, margins, text alignments, and colors throughout your Web documents by only tweaking a small amount of HTML code. Also, standard HTML tags can be altered to incorporate additional features, and new tags can be fashioned to serve a variety of needs. Besides saving enormous amounts of time, style sheets add a level of mistake-proof efficiency that even the most skilled designer can't match.

How to Use Style Sheets

Working with style sheets takes practice and patience. There are new tags to learn and unique concepts to grasp before you can master them. But before you start, you need to understand the 3 ways style sheets can be used:

1) Inline

You can define styles for a section (usually a paragraph, or two) on a Web page by using special style codes, and inserted them within a HTML tag.

2) Embedded

A special "style" tag, describing the attributes you wish to apply to an entire Web page, is placed before the "body" tag in your HTML document. As a result, your page will incorporate all of your newly-defined styles.

3) External

You create a master file containing a collection of styles. Each individual web page can then incorporate those styles by simply linking to the master file. By using style sheets in this manner, you can change the look of an entire Web site by simply editing its master file.

Group Formatting

Another feature of style sheets is the ability to assign like attributes to a family of HTML tags. For instance, you can force standard heading tags such as H1, H3, and H5 to have the same color and font, eliminating the need to individually define the characteristics of each heading. Or you can override HTML convention altogether by making all three heading tags the same size.

Defining Classes

Style sheets also give you the power to create sub-divisions of standard HTML codes called "classes." For example, you can create a special class of headings called H1.special that has red text, boldface, and italics. Whenever you want to use your new heading, just place "class = special" within the open and closing brackets of a H1 tag and you're set. And because classes are already defined, they can be recycled and used in other Web projects. Style sheets are one of the most significant innovations in Web design, giving you a degree of control over HTML that was once unimaginable. Now everyone has the capacity to produce great-looking Web pages that are easy to maintain.

© Demand Media 2011