How To Create Box In Html5

How to Create a Rectangular Box to Contain Your Text/Pictures with CSS

Draw a box around your content

How to Create a Rectangular Box to Contain Your Text/Pictures with CSS

by Christopher Heng, thesitewizard.com

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.

Prerequisites

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 article 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.

Using CSS to Draw a Border Around Your Block of Text and Pictures

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.

The colour ("color" in US English) of the border is specified with an RGB value (like #000 or #000000 for black), or, if it 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.

If you want to give your box rounded corners, please see the article How to Create Rounded Corners for Your Box Borders in CSS. You can also create coloured boxes in CSS, where the background of the box has a different colour from the rest of the page. Another visual effect that can be used is to make the box cast a shadow.

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-2020 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from https://www.thesitewizard.com/.

thesitewizard™ News Feed (RSS Site Feed)

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 https://www.thesitewizard.com/thesitewizard.xml. You can read more about how to subscribe to RSS site feeds from my RSS FAQ.

Please Do Not Reprint This Article

This article is copyrighted. Please do not reproduce or distribute this article in whole or part, in any form.

How to Design a Two Column Layout for Your Website Using CSS
How to Make Your Links Change Colour When the Mouse Hovers Over It (Using CSS)
How to Create 3D Buttons Using CSS
How to Make a Mobile-Friendly Website: Responsive Design in CSS
What is Favicon.ico and How to Create a Favicon Icon for Your Website
Important Precautions to Take When Buying a Domain Name
How to Accept Credit Cards on Your Website
How to Register Your Own Domain Name

New Articles

How to Give Alternate Rows of a Table a Different Colour (HTML/CSS)
How to Generate the Free Let's Encrypt SSL Certificate on Your Own (Windows) Computer
How to Insert Meta Tags into a Web Page with BlueGriffon
How to Play a Song (or Some Other Audio Clip) from a List on a Website
How to Draw a Horizontal Line on a Web Page with Expression Web
How to Create a Website Free of Charge
Why Can't I Make Up Any Domain I Want? Is There a Way to Do Away with a Registrar Altogether?
What's the Difference Between a Domain Name Registrar and a Web Host?
How to Make a Mobile-Friendly Website: Responsive Design in CSS
What's the Difference Between a Content Management System (CMS), a Blog, a Web Editor and an Online Site Builder?

How to Link to This Page

It will appear on your page as:

How to Create a Rectangular Box to Contain Your Text/Pictures with CSS