Style Sheets: A Brief Overview for Designers

---

July 3, 1996

Nadja Vol Ochs
Interactive Media Designer, Microsoft Corporation

Have you ever had to go through pages and pages of HTML to make changes to fonts, color selections, or layout? Are you interested in having more control over the layout and design of your Web site? Style sheets enable you to control the formatting and typographical layout of your pages with style and efficiency.

Style sheets, a new World Wide Web Consortium (W3C) feature supported by Microsoft® Internet Explorer 3.0, provides additional formatting options and better control over the HTML tags on your Web pages. If you know how to implement styles and formatting in desktop publishing, you'll appreciate similar capabilities for designing on the Web. You can now control such things as leading, margins, indents, typefaces, colors, and much more.

Style sheets allow you to separate the style and layout of your HTML files from their informational content. With style sheets, you can make all of your HTML layout and formatting changes in one location, either in a separate file or at the top of each HTML page. You will never have to touch every single line of HTML again.

Take a look at some of the enhancements you can add to your HTML pages using style sheets. The sample paragraphs below are positioned on the page within a borderless, non-scrolling, inline frame. (To view the style sheet code, right-click inside the paragraph and select View Source from the pop-up menu.)

Note: These examples require Internet Explorer 3.0 or later. If you're using Netscape® Navigator® clicking the images will open a new browser window (in Internet Explorer 2.0, the examples will replace this page), and you won't be able to see the effect of the style sheets we used in the examples.

Paragraph 1... Paragraph 2... Paragraph 3...

 

For a more detailed example of style sheets, take a look at the HTML source for this page.

Style sheets provide an efficient way to save design time and editorial effort. If you know HTML and some basic desktop publishing terminology, you are prepared to begin implementing style sheets on your Web site today. To learn how to use style sheets on your Web site, see the articles and specs below:

• A User's Guide to Style Sheets is included in the Authoring/EDITING section of the MSDN Online Web Workshop Web site.
• For examples of style sheets, frames, floating frames, and other features supported by Internet Explorer 3.0, see HTML Features on the Internet Explorer Web site.
• For information on using the new CSS features in Internet Explorer 4.0, see George Young's article Cascading Style Sheets in Internet Explorer 4.0
• The W3C site includes several documents on style sheets: Web Style Sheets , HTML3 and Style Sheets , and Cascading Style Sheets, Level 1 .