Categories:

Applying a frame to the document using CSS

With CSS, webmasters can apply a border to a html document, making the document appear as if it's enclosed in a picture frame. For the uninitiated, CSS stands for Cascading Style Sheets, and is a powerful tool in manipulating the look of a document.

In this tutorial, we will see how to utilize CSS to apply a border to a document.

Applying borders to a document

Adding a border to a document requires that we insert an inline style inside the body tag. All inline styles follow the below syntax:

style="style attributes"

where "style attributes" represent the kind of styles we want to add to the <body> tag, such as a big fat border, or a thin and skinny one. Taking this one step at the time, lets first insert a generic inline style into the <body>:

<body style="CSS attributes">
"
"
"
</body>

The "style attributes" required to apply a border looks like this:

border: borderWidth borderStyle borderColor

where border-width is the width of the border, border-style is the type of border, and border-color is the color of the border. Before even attempting to go any further, the below gives a document a solid border of width 20px and color green:

<body style="border: 20px solid green">
"
"
"
</body>

We can manipulate this border in countless ways, by changing the values associated with the border-width, border-style, and border-color attributes. Here are the available values:

border2.gif (6588 bytes)

Lets play around a little with these values, and see what happens.

<body style="border:5px ridge green">

Document

<body style="border:10pt double blue">

Document

<body style="border:10pt groove red">

Document

<body style="border:10pt outset red">

Document

As you can see, things can get quite interesting. Below is a live border tester which you can use to see the effect different border settings have on the document:

Border width:: Style: Color:

Finally, the border attribute we've just learned can in fact be applied to elements other than the body, for example:

<div style="border: 10px solid blue"></div>

And with that, go frame something!

Copyright 1997-2014 JavaScript Kit. NO PART may be reproduced without author's permission.