Site Development
Downloads
Help!!
Home
Adding BackgroundsWe'll be making this box throughout this lesson. There's a lot to cover. Lets start with what we already know and make the basic box with a border. In the <body> of our page code:
<div id=colorBox> To put a border around this, lets use the "colorBox" ID and begin styling this box in the <head> of our page:
<style type="text/css"> The above will put a 5 pixel, solid black border around our text. Now we'll use the "background-color:" property to add the red background:
<style type="text/css"> There's an odd note to this. Netscape won't fill in the whole <div> box unless you declare a "border:" property. Go figure. If you don't want a border you can use "border: none". Another Netscape anomaly is that there's a space between the border and the box. This becomes very noticeable when using a background color. I've tried everything to move this and can't. Again, you can remove the border and use a border in the <div> box's content. You can also use a background image by using the "background-image:" property. background-image: url(URL to image file); You can use both of these together. It's a good idea when using an image to also use a compatible background color. On rare occassions, for a variety of reasons, the image may not load or loads slowly. In this case, the "background-color:" will show through and preserve your basic color scheme. Padding & MarginsNow lets get our text away from the edges of the box. We'll use "padding:" to do this:
<style type="text/css"> The "padding:" I've added would make a 5 pixel pad top and bottom and a 20 pixel pad left and right. Here's how "padding:" works: padding: 3px 10px 4px 50px -- This is how you can set padding for all four sides to different values. The order begins at the top and moves around in a clockwise manner: top, right, bottom, left. padding: 10px -- A single value would be applied to all four sides. padding: 5px 20px -- This is what we're using. Whenever two or three values are used, the missing value(s) derive their padding from the value of the opposite side. In this case, we've set top and right. Bottom will get its value from top's 5px. Left will get it's padding from the "left" value of 20px. Finally, you can style individual padding with "padding-top:", "padding-right:", "padding-bottom:", and "padding-left:". This works just like "margin-x:" that you learned in Beginning CSS. One more note: If you are already using margins in your <div> box's content, you may not need padding. It's best to try things out and fiddle with it until it looks right. Width & HeightSizing a <div> box is a lot like sizing <tables> you use "width:" and "height:" properties. Here's the width for the sample box:
<style type="text/css"> The above code in red narrows our box to 100 pixels. You can also use percentage widths like you do with <tables>. Both browsers support this. The "height:" property can be defined in either pixels or percentages, too. When "height:" is defined, it is usually in pixels. Many boxes, like the one in this example, don't use a "height:" property. The content determines the height of the box. Yet another Netscape anomaly. Netscape ignores the "height:" property in most circumstances and dimensions the height strictly by content, margins, and padding. You may have to add some <br> tags to your content to make vertical blank space in your box if height is an issue. We'll be talking a lot more about Netscape and IE workarounds later. Foreground ColorWe're about done styling this box. All we need to do now is make the text blue. Do this with the "color:" property.
<style type="text/css"> In small boxes like this, it's okay to style the content along with the box in the box's ID styling. As you begin making more complex boxes, like those used for pop up menus, you'll find it's easier to style the content separately from the box. In other words, instead of styling the text's color with "color:" in the "#colorBox" styling, set the color by styling the "h2" element. Summary & Exercises
Make at least five fully styled <div> boxes. Make sure to include borders, background, and dimensions. Remember that Netscape doesn't reliably render the "height:" property. |
Add backgrounds with "background-color:" or "background-image:". Netscape requires that borders be defined to fill in a box with color. You can use "border: none" for this if you don't want borders.
To First Advanced CSS Review
Back To Advanced CSS Index