Being able to draw a line around a block of text and/or pictures is handy if you want to group a section of related items together. This has the visual effect of placing your text and pictures in a rectangular box. The box serves to separate the content from the rest of the page, and may be used either to emphasize its content, or to make it like an inset in your page. This tutorial shows you how you can accomplish this using CSS.
This article is targeted at those who hand code directly in HTML and CSS. As such, some basic CSS/HTML knowledge is assumed. You do not have to be an expert, but you will need some working knowledge of what CSS is as well as how you can insert CSS into your page.
If you have arrived at this page with the intention of learning more about how to create your own website, you should read my Beginner's A-Z Guide on How to Start Your Own Website instead. It will take you through all the necessary steps of making your own site. Creating a website is more than just designing the visual appearance.
Let's say that you have some text or pictures that you want to enclose in a box.
Create the HTML for the block. For this tutorial, I shall use a DIV block to enclose the text/pictures.
<div class="boxed"> This text is enclosed in a box. </div>
I gave the DIV block a class of "boxed" but you can of course use some other valid CSS class name. Replace my dummy content with your actual text and/or images.
Next, you will need to style the DIV box by adding a border. In your CSS section, or external CSS file, add the following code:
.boxed {
border: 1px solid green ;
}
The CSS code above specifies a 1 pixel border for the class "boxed". The box will have a solid green border. An example
of a box using this code can be seen above. I use the exact same code, "border: 1px solid green", to enclose
most of the code examples on thesitewizard.com (at the time I write this).
The thickness of the border can be changed if you find a 1 pixel border too thin for your liking. Similarly, other border styles besides "solid" are also possible. For example, "dotted" gives you a dotted border, "dashed" a border consisting of dashes, and "double" a double-lined border. Other values, which may or may not be implemented in your browser (depending on which browser you're using), include "inset", "outset", "ridge" and "groove". These give a 3D effect to your box. (If you want to see what they look like, you will need to use a modern browser like Opera or Firefox.)
The colour of the border is specified with an RGB colour value (like #000 or #000000 for black), or,
if your colour is one of the 16 basic colours defined in the CSS specifications, by its colour name. If in doubt, use the colour code. Most
HTML editors and
programmer's editors have colour pickers which you
can use to select a colour by simply clicking on it. The editor then automatically generates the appropriate RGB colour value for you, so
using a numeric colour value should not be exceptionally difficult.
That's it. The procedure for creating a rectangular box around your text/images with CSS is, as you can see, very simple.
Copyright © 2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this,
on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.
If you find this article useful, please consider making a donation.
Do you find this article useful? You can learn of new articles and scripts that are published on thesitewizard.com by subscribing to the RSS feed. Simply point your RSS feed reader or a browser that supports RSS feeds at http://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.
This article is copyrighted. Please do not reproduce this article in whole or part, in any form, without obtaining my written permission.
It will appear on your page as:
How to Create a Rectangular Box to Contain Your Text/Pictures with CSS
