microsoft.com Home   All Products  |   Support  |   Search  |   microsoft.com Home  
Microsoft

Microsoft Typography | Typography on the Web | Specifying fonts... | Introduction to CSS next


Introduction to CSS

Many Web page creators, who consider themselves 'typographers' or 'graphic designers', reject the use of HTML heading tags in favor of setting their headings using FONT SIZE tags or bitmap graphics.

Some take this approach to make their pages stand out. Many use these alternatives because they dislike the appearance of Times New Roman Bold or Times Bold in large type sizes.

Level One Heading

An interesting point is that Times Bold is not specified anywhere in the HTML specification. It was chosen as a default by the programmers who created the first graphical Web browsers. To maintain backward compatibility the publishers of recent browsers chose to adopt these defaults.

From a typographer's perspective using various sizes of Times Bold is a clumsy solution to providing a hierarchy of headings. In other media, designers enjoy the use of color, space, ornament as well as scale and typeface to signify the position of a heading in such a hierarchy.

There are various drawbacks to rejecting the official HTML conventions and using FONT SIZE, COLOR and FACE tags or bitmap graphics to typographically define a hierarchy of headings. Control over a document's appearance when viewed using a specific browser is only attainable at the expense of document structure. Life is made more difficult for the visually impaired, especially when bitmap headings are used. It also becomes impossible for a site administrator to create an index based on subject headings.

When tags are used to define appearance rather than structure, many of the advantages of HTML over formats such as PostScript or Acrobat PDFs are lost.

The advantages of using the FONT FACE tag instead of supplying headings or passages of text as bulky bitmap graphics are obvious. However, the FACE tag does little to reverse this movement away from structure towards appearance.

The World Wide Web Consortium's solution to this problem is to add style sheet support to HTML. To most users of word processing and desktop publishing applications, style sheets are a familiar and often essential tool. In these applications passages of text are assigned one of any number of defined styles. The designer can amend the predefined default styles and create new ones, assigning typeface, type-size, inter-linear spacing, color and other properties.

The W3C style sheet standard, Cascading Style Sheets, works in exactly the same way. Properties can be assigned to standard tags such as P or H1, and custom tags can be defined.


CSS1

The World Wide Web Consortium describes CSS1 as 'a simple style sheet mechanism that allows authors and readers to attach style to HTML documents.' According to its authors CSS1 uses 'common desktop publishing terminology' which should make it easy for professional as well as untrained designers to make use of its features. For full details of the CSS1 specification please see the official W3C Cascading Style Sheets [ext link] page.

CSS1 provides the designer with various ways of specifying style for a Web page. Style information can be stored in an external file and referenced by any number of Web pages, or the attributes can be applied to a specific section of text within the body of a page. The method described below involves including style information within a STYLE section in the HEAD part of a particular HTML file. A simple example is shown below.

<HTML>
<HEAD>
  <TITLE>Style Sheet Demo</TITLE>
   <STYLE TYPE="text/css">
    BODY { background: black }
      H1 { color: yellow;
           font-weight: bold;
           font-size: 12pt;
           font-family: Arial, sans-serif }
       P { color: white;
           font-size: 10pt;
           font-family: Georgia, serif }
  </STYLE> 
</HEAD>
<BODY>	
  <H1>Cascading Style Sheets</H1> 
  <P>Designing simple style sheets 
     is easy. One only needs to know a 
     little HTML and some basic desktop 
     publishing terminology.
</BODY>	
</HTML>

This gives the following result when viewed using a CSS1 enabled browser such as Microsoft® Internet Explorer 3.

CSS diagram 1



this text [ext link] signifies an external link, please read our disclaimer.

this page was last updated 30 June 1997
© 1997 Microsoft Corporation. All rights reserved. Terms of use.
comments to the MST group: how to contact us

 

Microsoft Typography | Typography on the Web | Specifying fonts... | Introduction to CSS next