Click on our Sponsors to help Support SunWorld
Webmaster by Chuck Musciano

Control everything about your documents' appearance with style sheets

In Part 2, regain control of your document text. We show you how to change text and link appearance and define margins, and examine 3 ways to attach styles

SunWorld
March  1997
[Next story]
[Table of Contents]
[Search]
Subscribe to SunWorld, it's free!
Abstract
Our look at style sheets continues with text management styles and three ways to attach styles to your documents. (2,200 words)


Mail this
article to
a friend

Last month, we began investigating style sheets. We covered the basics of style syntax, looked at contextual style definitions, and covered style classes. I also mentioned a few style properties you could experiment with and provided links to the various style sheet documentation available from the World Wide Web Consortium, Netscape, and Microsoft (see Resources below).

This month, we'll forge ahead and look at the various properties you can use to control text and link appearance, change your document margins, and list a few other interesting properties you might want to use. We'll close with a look at three ways to attach styles to your documents.

Managing text appearance
One of the most important things you can do with styles is to regain control of the text in your document. Using various text properties, you can provide a complete specification of the type to be used to render your document.

The font-family property defines the font to be used to render text. Its value is a comma-separated list of font names. The browser will use the first available font on the system. For example, to create a paragraph with Arial, use 

     P { font-family : Arial }
Of course, some systems don't have Arial, so you're better off providing a number of faces: 
     P { font-family : Arial, Helvetica, Lucida-sans }

If all else fails, you can use one of five predefined generic fonts that all browsers should support. These fonts are serif, sans-serif, cursive, fantasy, and monospace. The actual face used for each of these generic families will vary from browser to browser, but they should have the same general appearance between all browsers. To complete our example, a correct style would put a generic family name at the end of the list: 

     P { font-family : Arial, Helvetica, Lucida-sans, sans-serif }

The font-size property sets the font size. Normally, you would set this in points, but styles can use any of several units of measure. All of these rules have the same effect: 

     P { font-size : 24pt }
     P { font-size : 0.33in }
     P { font-size : 1cm }
Other units of measure include px (for absolute screen pixels), mm (for millimeters), and pc (for picas). You can use these units in any rule, not just with the font-size property.

To control the bold and italic appearance of a font, use the font-weight and font-style properties. The font-style property has only two values: italic and normal. The font-weight property is a bit trickier, since font boldness comes in many flavors, ranging from extra-light to extra-bold. In general, specifying bold for font-weight should work.

Putting these together, we can create bold, italic, and bold italic text: 

     P { font-weight : bold }
     P { font-style : italic }
     P { font-weight : bold; font-style : italic }

The last component of a font is the line-height property, which sets the space between the baselines of adjacent text lines. Normally, this is a few points greater than the text size, so that our 24-point text might be rendered with a 28-point line-height: 

     P { font-size : 24pt; line-height : 28pt }
If you want the line height to change as the font size changes, use a percentage value for the height: 
     P { font-size : 24pt; line-height : 120% }
This is particularly handy if you don't know the font size, which may be set in some style sheet you have no control over. Thus to create double-spaced text regardless of the font size, just say 
     P.double-spaced { line-height : 200% }
Notice that we created a class of paragraph named double-spaced. To make a paragraph double-spaced, we can then add class=double-spaced to any <p> tag.

To fully define a font, you need to bring all these properties together: 

     P { font-family : Arial, Helvetica, sans-serif;
         font-size : 24pt;
         font-weight : bold;
         font-style : italic;
         line-height : 28pt
       }
Needless to say, this is pretty cumbersome, especially if you plan on defining a lot of different fonts for your document. To ameliorate this, you can use the font property. This is the same font specification: 
     P { font : bold italic 24pt/28pt Arial, Helvetica, sans-serif }
You can omit portions of the font you don't wish to specify, but you must have the font weight and style first, before the size, line height, and family. Thus, a simpler font might be specified as 
     P { font : 14pt sans-serif }
which gives you the generic sans serif face sized at 14 points. You'll get the default line spacing, weight, and style for the font.

Advertisements

Controlling link appearance
Links have special appearance needs because they can change appearance as the user clicks on and visits each link. For this reason, special pseudo-classes have been defined for the <a> tag to represent its unvisited, visited, and active states. Rules to define these three appearances might be 

     A:link { color : red }
     A:visited { color : blue }
     A:active { color : orange }

If you define a property for the <a> tag without specifying a pseudo-class, all three classes will have the corresponding property set.

A nice feature of this capability is that you can change other attributes of different links instead of just their color. For example, you can make visited links bold, unvisited links italic, and active links underlined: 

     A:link { font-style : italic }
     A:visited { font-weight : bold }
     A:active { text-decoration : underline }

Defining margins
For any block element (paragraphs, lists, tables, etc.) you can define a margin to be placed around that element. The margin-left, margin-right, margin-top, and margin-bottom properties determine the space on the appropriate side of the block. Creating a paragraph that is indented is easy: 

     P { margin-left : 1in; margin-right : 1in }
If you need to set three or four margins for an element, you might want to use the margin property. This property accepts up to four values that define the top, right, bottom, and left margins in that order. If only one value is supplied, it is used for all four margins. If two or three values are supplied, the missing margins are set equal to the opposite side's margin. Setting the top and bottom margins to one centimeter, and the left and right margins to 60 pixels requires only two values: 
     P { margin : 1cm 60px }

Other properties
There are many other properties you can use in your styles, and I encourage you to read the style references I provided to learn more about them. The border properties are useful, as are the text alignment and spacing properties. Keep in mind that, at this early date, many of these properties are not yet supported by any browser. As time goes by, though, you'll be able to use these properties to great effect in your documents.

Referencing external style sheets
To this point, everything I've told you has been all talk and no action. Specifically, except for a bit of unexplained boilerplate, I haven't told you how to associate your styles with your documents. Let's correct this omission by describing external style sheets.

External style sheets offer the most flexible and managable way to apply styles to a document. The styles are stored in a separate document; documents wishing to use those styles do so using a <link> tag in their <head>. The style sheet is retrieved from a server just like any other resource on the Web.

To make this work, your server must be able to deliver style sheet documents with a content type of "text/css." The burgeoning convention is that style sheets are named with a ".css" suffix; your server simply adds the appropriate content type when asked for a document whose name ends in this suffix. Your server documentation should explain how to make this association.

For the sake of example, let's assume that we're using style sheets stored on server.com in the styles directory.

Within the <head> of your documents, use this tag to refer to a style sheet named normal.css: 

     <link rel=stylesheet href="http://server.com/styles/normal.css" type="text/css">
This tells the browser to load a cascading style sheet from the indicated URL. The rules in the sheet will control how the document is presented to the user.

The benefit of external style sheets is that one sheet can be used to manage any number of documents. If it becomes necessary to update your documents' look and feel, you only need to modify the shared style sheet to change all of your documents.

The downside, of course, is that all of your documents look the same. If some documents need to deviate from the standard, they might have to use other style sheets or use document style definitions to override the global rules in the central sheet.

Document style definitions
You can place style rules directly in a document by placing a <style> tag directly in the document <head>. Everything between the <style> and </style> tags is assumed to be a style rule. Since many browsers don't support the <style> tag, you must further enclose the rules in a regular HTML comment to prevent them from being placed into your document as content.

A typical document style might look like 

     <style type="text/css">
     <!--
     P { color : blue }
     -->
     </style>

You can also reference external style sheets from within a document style using the special @import command. The browser will read rules from the specified URL as if they were placed directly in the <style> tag. To read the sheet we referenced previously from within a document style, you could use 

     <style type="text/css">
     <!--
     @import url(http://server.com/styles/normal.css)
     -->
     </style>
Beware! That syntax is unique to style sheets and is not like the normal URL specification used in regular HTML tags.

Document styles are good for providing local overrides to global style sheets. They are a problem when it comes time to modify those overrides, since every affected document needs to be edited to effect the change. Use document-level styles sparingly. If they seem to be getting out of control, think hard about creating an external style sheet to create the same effect.

Inline style definitions
Inline style definitions are used to add a style directly to a single tag. They completely subvert the concept of shared styles and can make document management a nightmare. Use them only as a last resort.

To add a style to a single tag, add the style attribute to the tag. The value of the attribute is a list of properties to be applied to that tag. No selector is needed, and the declaration's curly braces are dropped. For example, 

     <h1 style="color : blue">
creates a single blue level-1 header. All other level-1 headers are unaffected by this style.

Inline styles are good for experimenting and for making single changes to an otherwise document-wide style. If you use them a lot, you should really consider creating multiple tag classes and moving the actual style definitions to a document or external style.

Next month
I hope I've whetted your appetite for styles in these past two months. In April, we'll look at a different way to apply styles to a document, using Netscape's JavaScript Style Sheets. Until then, keep experimenting and have fun with style sheets. Make sure you read the related documents I've referenced; they provide much greater detail than I am able to here.


Click on our Sponsors to help Support SunWorld

Resources

About the author
Chuck Musciano has been running Melmac and the HTML Guru Home Page since early 1994, serving up HTML tips and tricks to hundreds of thousands of visitors each month. He's been a beta-tester and contributor to the NCSA httpd project and speaks regularly on the Internet, World Wide Web, and related topics. His book, HTML: The Definitive Guide, is currently available from O'Reilly and Associates.

What did you think of this article?
-Very worth reading
-Worth reading
-Not worth reading
 -Too long
-Just right
-Too short
 -Too technical
-Just right
-Not technical enough
 
 
 
    

SunWorld
[Table of Contents]
Subscribe to SunWorld, it's free! 		[Search]
Feedback 		[Next story]
Sun's Site

[(c) Copyright Web Publishing Inc., and IDG Communication company]

If you have technical problems with this magazine, contact webmaster@sunworld.com

URL: http://www.sunworld.com/swol-03-1997/swol-03-webmaster.html
Last modified: