Sierra College Prof. Al's Demo Page Logo

XHTML and CSS Allows You to Define Box Elements

#myBox
font-family: Arial, Geneva, sans-serif;
font-size: 1em;
line-height: 1.4em;
color: #009;
background-color: #FFF;
width: 200px;
height: 400px;
float: right;
clear: both;
padding: 1em;
margin-left: 1em;
border: solid thin #009;
position: relative;
left: 50px;
top: 0px;

The Box ID File #myBox is used on this page and seen on the right, take a look at what you I used to create this box, it is listed inside of the box.

 

All Boxes have four sides, or it wouldn't be a box, right?

These are some of the elements you can control in a Box element: Padding, Margin, and Border. Let's take a look at what each can do for you.

Boxes have a Width and a Height that can be set. They can be told to Float to the Left or Right side of the page.

You can set the Padding for all sides of Boxes or pick any you need from the Top, Right, Bottom, and Left sides.

You can set the Margin for all sides of Boxes or pick any you need from the Top, Right, Bottom, and Left sides.

And, in some special cases (you'll see in this lecture), you may need to Clear the Left, Right, Both, or None of the sides

You can set a Border around a Box Element with the Style, Size, and Color.

You can set the Position of the Box as seen in other slides in this lecture as well.

Of course, you can also set the Font and Text attributes, but let's not get crazy about this, there is enough here to work with already!