Add DIV to Existing CSS Style Sheet

CSS Code for a Body DIV

Contemporary web design standards have moved away from creating layouts using <TABLE> tags. The much more flexible and useful <DIV> tag is the way to go. Here are some basic best practices you can use right away on your site.

DIV and Conquer

The best way to think of a DIV is as a box. It is a container of information, nothing more. The great thing about it is that it is a box that can hold anything, and can change the way the content inside it looks. It is used for "block-level" content (for example: large chunks of text, or groups of pictures, or sets of navigation buttons) so that you can set the rules about how that content is presented. There is also a tag that is the DIV's little brother, called SPAN, that is used to change the appearance of in-line content. While that's useful, SPAN has nothing on the many different uses of a well-crafted DIV.

How to DIV with Style (Sheets)

If you open a style sheet, odds are that you will find several classes designed to work with DIVs on the page. There are several different types, but four of the most common are Header, Content, Sidebar, and Footer. The names of these DIVs give you a good idea of their purpose. The following are some examples of the way they can be used within an existing CSS structure.

Perhaps you want to set up the HEADER section. First, set up a class of HEADER that can only be used with DIVs. Then, start shaping the properties of the text, borders, and backgrounds that you are hoping to use:

DIV.header{FONT-WEIGHT: boldest;FONT-SIZE: large;PADDING-BOTTOM: 5px;TEXT-TRANSFORM: none;BORDER-LEFT: #990033 3px solid;BORDER-RIGHT: #990033 3px solid;COLOR: #CCFFFF;PADDING-TOP: 5px;BORDER-TOP: #990033 3px dash;BORDER-BOTTOM: #990033 3px dash;FONT-STYLE: normal;FONT-FAMILY: Verdana, Arial;BACKGROUND-COLOR: #cc3300;TEXT-ALIGN: right;FONT-VARIANT: small caps;TEXT-DECORATION: none}

This will create a section of the page with a light mauve background, dark red borders (with dashed lines on top and bottom), and light gray lettering in a small-caps san-serif font. Normally, this code would be put onto a main stylesheet document ("yourDoc.css") that would be linked to the web page using the following code in the HTML HEAD section:

<link rel="stylesheet" type="text/css" href="yourDoc.css" />

Obviously, this is an example name, and you'd have to make sure that the path to your CSS file was correct. The real power of CSS, though, is that if you decide, after creating hundreds of pages with this header, that you'd rather have red lettering on a gray background in a custom font, you simply have to change the code in this one CSS sheet and it will permeate your entire site.

Once you play around with the various types of properties for various elements within a DIV, you can completely shape and re-shape your entire site simply from the CSS sheet itself. Best of all, there can be DIVs within DIVs, nested as far as you like, and each "container" can have its own properties as well as the properties of the larger DIV. Within a DIV.body, for example, you could decide that all the text should be left-aligned. However, you could also create smaller DIV.redText and DIV.whiteText that simply change the colors of later paragraphs, while still keeping them all neatly aligned on the left.

The Strange and Wonderful FLOAT Property

One other very important quality of nesting DIVs in a style sheet is the idea of "float". This enables you to exactly position where on a page a DIV appears. The FLOAT property helps determine where a SPAN or DIV content will be in relation to the larger container. If you wanted to have two columns inside the main body, one the "sidebar" and one the "content", you would set up two classes: #sidebar and #content. You could style the text, background, and borders all as you did with the HEADER example above, but you'd also add in one more property: FLOAT: LEFT. Adding this property pushes first the sidebar to the left side of the larger container, then the content area right next to it, creating a more flexible structure than tables with all the advantages of a clean layout.

If you wanted to have another DIV underneath the floating sections (such as a footer DIV), it would be necessary to insert a FLOAT:CLEAR property in the DIV underneath, so that the "box" would not inherit the FLOAT: left property. The opposite of a "floating" DIV is one with the POSITION property set at "absolute". In that case, you can determine the position of the box precisely based on the pixel coordinates or percentage values of a browser window.

Mastering the DIV

This is a very basic overview of how a DIV can be used on your site. The full power of the DIV requires many more pages and concepts. You can learn for yourself on websites such as DevArticles, DesignPlace and Juixe. More examples of the amazing possibilities are put up every day in the CSS Zen Garden, or you can try out your own code in the CSS Desk sandbox. Take the time to make the DIV a useful and flexible foundation for your own web design and you will not regret it.

Was this page useful?
Related & Popular
Add DIV to Existing CSS Style Sheet