Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat.

free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class">

Free Web tutorials covering HTML, CSS, JavaScript, and DHTML from beginner to advanced. Free downloads and developer resources. Personalized help via email, form, and chat. free, web, tutorials, HTML, html, CSS, css, stylesheet, cascading stylesheet, Javascript, javascript, JavaScript, DHTML, dhtml, beginner, advanced, web development, web page, web site, free web tutorial, free HTML tutorial, free CSS tutorial, free css tutorial, free cascading stylesheet tutorial, free stylesheet tutorial, free javascript tutorial, free DHTML tutorial, free HTML class, free CSS class, free stylesheet class, free cascading stylesheet class, free javascript class, free DHTML class

<Code_Punk>'s

Advanced CSS Box Review

Code Tutorials



Site Development



Downloads



Help!!



Home

A <div> box is merely some content coded between <div> and >/div> tags. The <div> can then be ID'd or CLASSed, and styled a variety of ways. In other words, the content is "boxed" in the <div>.

Netscape started this idea with the <layer> tag. Both Netscape and IE support the <div> tag, but only Netscape supports <layer>s. Therefore, it's a good idea to use <div>s so both browsers can render them.

We can put a border around our boxes with CSS's "border:" property. Netscape requires a "border:" property be set before it fully fills in a box's background. You can set a border's size, color, and type. IE supports more types than Netscape.

We can add a background color or image to our box with "background-color:" and "background-image:" respectively. Works in both browsers.

We can size our boxes with the "width:" and "height:" properties. We can use either pixel or percentage values. Netscape generally ignores the "height:" property and sizes boxes according to the width and content.

Add padding between the edge of your boxes and content using the "padding:" property. Check your box's content margins first. They may already provide enough spacing.

After reviewing the above stuff, try making this page before moving on. Do not worry about the boxes' position on the page. Only the styling.



To Advanced CSS Box Exam (sample for you to recreate)

Back To Advanced CSS Index