DIV Boxes
A simple guide to add and customize DIV boxes for your profile.
<style type="text/css">
.box
{
width: 200px;
height: 50px;
background-color: #000000;
color: #FFFFFF;
text-align: center;
}
</style>
<div class="box">
Lookie here, I'm a box!
</div>
Lookie here, I'm a box!
Style type div's are more organized and easier to keep track of if you have multiple boxes on a page. The name of the style class (.box) would be called in the div class as box, the period does not carry over into the div class call-
REMEMBER the style name and div class name need to be the same for the box to be called.
Color changes the text color in a div box, while background-color changes the background of the div. The background of the box can be changed into a image by replacing background-color with background-image: url(URLHERE);
<style type="text/css">
.outerbox
{
width: 500px;
height: 200px;
background-color: #000000;
}
.innerbox
{
float:right;
margin:3px;
width: 200px;
height: 100px;
background-color: #FFFFFF;
text-align: center;
border-radius:10px;
}
</style>
<div class="outerbox">
<div class="innerbox">
Box in a box!
</div>
</div>
Div boxes can be placed inside of each other. Float, in this example, is used to make the box align to the right but it can also be used to align a box to the left. Margins are used to add space between one box and another, this helps when making an organized profile so boxes do not overlap.
As for border-radius, this creates the curved apperance of a div box. The radius can be changed to make a smoother or a sharper curve.
Borders can also be added with the use of;
border-width: 2px;
border-style: solid;
border-color: #000000;
border-style can be changed to; dotted, dashed, solid, double, groove, ridge, inset, and outset.
To pick your own colors click here!
