Dress Up Your Div

Add pizazz to ordinary text, making it stand out from the rest of your page (without having to use a table), by using a DIV tag formatted with CSS in the HEAD of your document.

Here is a poem,
To test out your style.
Try it yourself,
Dress up your file!

Here is the code I placed in the head of this page to create the framed poem above:

<style type="text/css">

</style>

Here is what the HTML for the page looks like:

<div class="frame">

<p class="poem">

Here is a poem,<br />
To test out your style.<br />
Try it yourself,<br />
Dress up your file!<br />

</p>

</div>

Here are some definitions to help understand what each part does and how to make changes to the CSS to suit your needs:

border:: sets style, color, width of a border around the element. Can be solid, dashed, inset, outset, or dotted. All three attributes can be specified together in one command: {border: dotted 2px green;}
margin:: sets width or height of space around the outside of an element, helpful for keeping other elements from touching. All four sides can be specified in one command: {margin: 0px 30px 0px 30px;} (the sides read clockwise starting from top: top right bottom left) I used pixel measurements, but percentages could also be used, especially when sizing an element in proportion to page size which changes with the user's browser and screen resolution.
padding:: sets width or height of space around the content of an element, inside the border or edge. Use the same format as for margin: {padding: 0px 20px 0px 20px;}
background:: sets background properties of an element. Color can be spcified with a color word (red, lightblue, black, etc.), full hexidecimal color number (#ff0000), or shorthand hex (#f00): {background: white;} A background image may also be used with this format: {background: url(image.jpg);}

Dress Up Your DIV