Adding CSS Style to HTML: The Box Element

The Box Element

In the last article, I showed you how to style just about everything with Cascading Style Sheets. In this article I’ll cover everything there is to know about the box element.

CSS treats everything as if it was a box. Every box has the following properties:

Content Area: Which holds all of your content including text, images, etc.
Padding Area: Blank area that lies between the Content Area and the Border
Border: Optional line, that lies between the Padding and Margin
Margin: Optional area, that surrounds all of the other parts of the box.

Examples of How to Edit Boxes with CSS

Here I’ll give you many examples to pick from. Think of it as a cookbook of box designs.

A Simple Box Design

Here is the code I used to define this design.

<style>
.boxelement1 {
border-color:            black;
border-style:            solid;
border-width:            1.5px;
background-color:     gray;
background-image:     url(images/logo.gif);
background-repeat:    no-repeat;
background-position:    top left;
line-height:            1.8em;
font-family:             verdana, arial, sans-serif;
font-style:             italic;
margin:                25px;
padding:            20px;
}
</style>

Box Properties

• border-color: Defines the color of your border. Can be any color defined in HTML.
• border-style: Can be either solid, double, groove, outset, dotted, dashed, inset, or ridges.
• border-width: Define the width of the border in pixels, thin, medium, or thick.
• background-color: Defines the color of your background. Can be any color defined in HTML.
• background-image: Defines an image you want displayed in your box background. Plays no barring on the size of the box displayed.
• background-repeat: Defines if, or in what direction the background image will repeat. ( no-repeat, repeat-x, repeat-y, or inherit )
• background-position: Defines the position of the background image in the box. There are many ways to position images in boxes and I’ll cover that later in the article.
• line-height: Defines the distance between lines of text within the box.
• font-family: Defines the type of font to use inside of the box.
• font-style: Defines if you want the text to be italic or not.
• margin: Defines the width of the margin of the box element.
• padding: Defines the width of the padding of the box element
• Also you can use any of the additional text properties for editing the information in the box.
• You can also edit the sides of the box individually with the properties: padding, margin, border-width, border-style, and border-color. For example you could define the different border styles by setting border-top-style, border-right-style, border-left-style, and border-bottom-style.

Here is a Crazy Box Design

Here is the code I used to define this design.

.boxelement2 {
border-color: yellow;
border-top-color: fuchia;
border-style: double;
border-right-style: ridge;
border-width: 2px;
border-left-width: thick;
background-color:     cyan;
background-image:     url(images/LittleBrain.png);
background-repeat:    no-repeat;
background-position: top left;
line-height: 2em;
font-family: verdana, arial, sans-serif;
font-style: italic;
margin: 25px;
margin-right: 250px;
padding: 25px;
padding-left: 300px;
}

Here is another design.

Here is the code I used to define this design.

.boxelement3 {
border-color: white;
border-style: dotted;
border-width: 2px;
background-color: #F0F8FF;
background-image:     url(images/LittleBrain.png);
background-repeat:    no-repeat;
background-position: top left;
line-height: 1.5em;
font-family: verdana, arial, sans-serif;
font-style: italic;
margin: 25px;
margin-right: 250px;
padding: 25px;
padding-bottom: 100px;
padding-left: 200px;
}

We’ll that is all there is to know about the box element in CSS. In the next article I’ll teach you everything else there is to know about CSS.

till next time…