How to Use Internal Style Sheets

AdminP — Fri, 04 Dec 2009 17:09:33 +0000

Writing an HTML page that has different sizes of fonts, font color, link elements, etc. to make the page interesting doesn’t have to be time consuming or difficult. Rather than coding each word or element individually, using an ‘internal style sheet’ on a page makes setting the tags easy – particularly if you plan on using tables.

The information contained in an ‘internal style sheet’ is placed after the tag but before the tag. All of the information included in the style sheet will be between the tags. You can also assign subcategories to elements . . . for now we’ll just address the basics.

You can assign a variety of tags in the ‘style’ tags, i.e.,

Link color
Hover color (makes the font color of an active link change when the cursor is placed on it)
Remove the underline from active links (Text decoration)
Assign font elements for tables (Rows and columns)
Assign margin sizes for the page
Designate a background image

We all know that when you have an open tag < > you must have a close tag for the code. However, if you are using a table with a lot of text, the code you assign using tags, i,e, font, font color, font size, italics, etc. will not carry from one row to the next or from one cell to the next. This means if you do not use an internal style sheet you will have to code the font tags for each row and cell to maintain the continuity of the table. That’s a lot of work!

However, if you have an internal style sheet set up, you can begin building the page without having to do any coding relevant to the table’s basic styles – or page styles either.

Within the ‘style’ tags each set of properties must begin with an opening curly bracket ” { ” and end with a closing curly bracket ” } “. Also, when you are using more than one style marker per curly bracket, it assigned values must be separated with a semi-color ” ; “. See examples below

In the following examples, HTML code is shown in blue.

Fonts

One of the best uses for an internal style sheet is to assign values to the page’s font – size, face and color. These values can be applied to the body of the page as well as any table (rows and columns).

Example: In writing an HTML page you want to assign values to the page’s body and the table’s rows and columns. The values you want to assign are the font face and size. In our example the font-family is ‘Arial’ followed by a ‘back-up’ font Helvetica should the Arial face not be available. We have also set the font size to 12px (pixels). By assigning this code, the body text and the text for every table on this page will display in Arial, size 12px. The complete code to do this would look like:

Note: In example above we have separated the tags we want to assign values to with commas. By using commas to separate the tags, the properties assigned will apply to all tags – (body, td, tr). If we had only td,tr for our tags, then only the table columns and rows would be effected and the rest of the body would be shown in the default settings.

Links

Active links on a page are underlined by default, however, sometimes you may not want the link underlined. Removing the underline can be accomplished through the use of an internal style sheet as well.

Also, assigning different colors to anchor text allows you to not only highlight an active link but also let the viewer see the links they have already visited.

Example: We do not want the links on our page to be underlined,.i.e., no ‘text decoration’. We also want our active links to display as ‘black’ (#000000), visited links to display as ‘blue’ (#0000FF) and the link’s hover color to be ‘red’ (#FF0000). To accomplish this our code would look like:

Margins

There may be times when you will want to set the size of the margins so that the page displays with no space at the top, left, right, bottom. You would use the information in this style sheet to adjust the position of the page relevant to how it displays on the screen.

Example: We want our page to be placed squarely in the upper left corner – no space. The code for this would look like:

tag. This will hide the style sheet from browsers.

Define additional properties for a tag by typing the dependent tag after the parent tag separated by a space.

Example: You want all the text marked with tags (italics) inside of the H1 tag to be shown in red. This one line of code within the STYLE tags would look like:

H1 EM {color:red}

Summary

Using internal style sheets cuts down on a lot of work by allowing you to address all of the ‘styles’ on a page in one place. And, while the different style codes have been shown separately for sake of discussion, they could all be displayed inside one set of ‘style’ tags by making use of the curly brackets to separate them.

For more information on internal style sheets, get one of the Quickstart Guides on HTML by Elizabeth Castro – available from Amazon.

Upcoming Topics

Gathering Statistics

The unbelievable new program takes you from start to finish on building a profitable blog.

Basic lessons in HTML, CGI, SEO, domain registration, hosting - build an on line business! » Internal Style Sheets

How to Use Internal Style Sheets

Fonts

Links

Margins

Summary

Upcoming Topics