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:
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:
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!
