Style sheets: Step By Step

Follow these steps to use HTML style sheets in your Web pages.

Step 1: Do you need to design a style sheet, or do you just want to add style here and there?

Style sheets are a powerful way of adding formatting to HTML pages. Using style sheets, you will be able to specify font sizes in points, set margins, change link colors, and do many other formatting tasks that were not possible before.

Style information can be added to a document in several ways. Which ones are right for you? That depends on the kind of site you're putting together.

Once you've decided which category you fit into, you'll know which of the next three Steps to read.

Note: Normally you can use these three methods all at the same time. If similar style information is specified both in the page and outside the page, the in-page style is used.

However, for Internet Explorer 3.0 beta 1, if you link to an external style sheet, that style sheet will be used for the entire page; in-page styles will not be used. This will be fixed in an upcoming version.


Step 2: Placing style information in-line.

There are two ways to place style information in-line. The first is to assign a style to a particular tag right when you use it. For example, let's say we want to have a paragraph where the font size is 20 points. Here's how we do it:

<P STYLE="font-size: 20pt"> This paragraph is in 20-point text. As Hemingway once said, it is a great thing to be able to specify point sizes, especially large ones.</P>

The result:

This paragraph is in 20-point text. As Hemingway once said, it is a great thing to be able to specify point sizes, especially large ones.


The second way to place style information in-line is to use a new tag called SPAN. SPAN by itself doesn't mean anything; you use it to surround text to which you want to add style information. Here's how the SPAN tag might be used:

<SPAN STYLE="margin-left: 1.0in"> This paragraph is 1.0 inches from the left margin. That's one small step for a paragraph, one giant leap for browserkind.</SPAN>

The result:

This paragraph is 1.0 inches from the left margin. That's one small step for a paragraph, one giant leap for browserkind.

As you can see, adding style information in-line is easy. But it's much harder to go through a document and change a great number of STYLE attributes than it is to change a handful of them at the top of the document. That's why it's generally better to place style information in a centralized location, such as at the top of a page.


Step 3: Placing style information at the top of a page.

This is done by inserting a <STYLE> block at the top of your document. The block should come after the <HTML> tag and before the <BODY> tag. Here's an example:

<HTML>

<STYLE>
BODY {background: white; color: black}
H1 {font: 14pt Arial bold}
P {font: 10pt Arial; text-indent: 0.5in}
A {text-decoration: none; color: blue}
</STYLE>

<BODY>

<H1>This is a headline! In 14-point Arial bold!</H1>

<P>Yes, folks, here it is in black and white — this page is actually using style sheets. Oh, by the way, <A HREF="http://www.microsoft.com">this is a link,</A> but it's not underlined, because we set text-decoration for links to "none."</P>

</BODY>
</HTML>


Note that to assign more than one kind of style information at once, you simply separate the styles with semicolons. For example, to set the font of an entire HTML page to 10-point Times font, the colors to black on white, and both left and right margins to one inch, place the following before the <BODY> tag:

<STYLE>
BODY {font: 10pt Times; color: black; background: white; margin-left: 1in; margin-right: 1in}
</STYLE>




Step 4: Linking to an external style sheet.

To link to an external style sheet, simply create a file that contains what you would normally place in a <STYLE> block at the top of a page (see Step 3 above). Suppose you've created a file with the following contents:

BODY {background: white; color: black}
H1 {font: 14pt Arial bold}
P {font: 10pt Arial; text-indent: 0.5in}
A {text-decoration: none}


Let's say you have placed this on your server at the following address: http://www.mycompany.com/mystyles.css. To link a page to this style sheet, simply place the following in the <HEAD> portion of the page:

<LINK REL=STYLE TYPE="text/css" SRC="http://www.mycompany.com/mystyles.css">

Note: You will need to make sure that the MIME type reported for "mystyles.css" is text/css.


Step 5: Add text formatting.

Now that you've figured out where to put the style information, here are the text formatting features currently supported by Internet Explorer 3.0.

font: [bold] [italic] [font size]/[font leading] [list of font names]
Sets many font properties at once. You can specify a list of font names separated by commas; if the first is not available, the next will be tried, and so on. Examples:
font: 10pt Arial
font: bold 12pt/14pt "Arial,Helv"

font-family: [list of font names]
Chooses which font to use to display text. As above, you can specify a list of font names separated by commas.
Example: font-family: Courier New

font-size: size
Sets font size. You can set font size not only in points but in inches (in), centimeters (cm), or pixels (px).
Example: font-size: 10pt

font-weight: bold or normal
Sets the font weight. Currently only normal and bold are supported.
Example: font-weight: bold

font-style: italic
Used to set various text styles. Currently only italic is supported.

text-decoration: none , underline, italic, or line-through
Sets text decoration. This is useful for turning link underlining off: simply set text-decoration to "none".
Example: text-decoration: line-through

line-height: [measurement]
Otherwise known as leading, this sets the height of each line of text. (Note: currently the extra spacing is added before lines, not after. This may be changed later to match the standards set by desktop publishing applications.)
Example: line-height: 20pt.

background: #rrggbb, color name, or URL([address of image])
Places a color or image behind text. This can be used to "highlight" portions of text. Examples:
background: #ffffff
background: white
background: URL(http://www.mycompany.com/images/white.gif)


Step 6: Add layout information.

Once you've formatted your text, choose from the following features to control the layout of your pages. As above, all measurements can be set in inches, centimeters, or pixels.

margin-left: [measurement] and margin-right: [measurement]
Sets the left and right margins. Example: margin-left: 0.5in; margin-right: 0.5in

text-indent: [measurement]
Sets the indentation for each paragraph. Example: text-indent: 0.25in

text-align: left, right, or center
Sets text alignment. Example: text-align: right


Congratulations!

That's all it takes to add style to your pages!

UpBack to the HTML Authoring Features page

© 1996 Microsoft Corporation