Site Development
Downloads
Help!!
Home
The Uniqueness Of The <body>The <body> is unique because it is the parent tag of most of the elements you'll be styling. Like any good parent, its child elements inherit styling properties from it. When you style the "body" element in CSS, you're really setting default properties for the whole page (or site!). If you, say, set Tahoma as the "font-family" in your "body" element, all fonts on the page will be Tahoma unless you style the child elements differently. You'll come to find that the "body" element is the first one styled when designing a site. I usually start out by styling default font and text properties and then moving on to setting the page's background. Everyone has their own method, but expect to spend some time fiddling with the "body" element. BackgroundsYou can style the "body" element just as you would the <body> tag. Some of the more unique properties used when styling the "body" element concern setting a background. Lets begin by setting a background color similar to using BGCOLOR in the <body> tag:
<style type="text/css"> The above style rule has the same effect as <body bgcolor="green">. You may be asking yourself, "Then why bother with CSS styling when I could just put BGCOLOR in the <body> tag"? Well, the answer is not so apparent now, but remember that you will soon be learning how to make external stylesheets where this one style rule could set the background for all of your pages at once. NOTE: Using a hexadecimal code for the color's value would be better than the color's name. You can also set a background-image that works like the BACKGROUND attribute in the <body> tag. Later in this lesson we'll see how we can get much better control of our background images with CSS.
<style type="text/css"> Notice the syntax used in the "background-image" value. First you must type "url" and then put the URL to the image inside parentheses. The image's URL is not put in quotes. In this case, it's assumed that the background image is in the same directory as the CSS. You can "fix" the image, as with <body bgproperties=fixed>, by using the CSS property "background-attachment":
<style type="text/css"> This allows text to be scrolled over the background image. The image doesn't scroll. This becomes a more interesting effect as we learn the new things we can do with backgrounds in CSS Background-RepeatWhen we use a small background image in the BACKGROUND of our <body> tag, it automatically "tiles" across the page in a left-to-right, top-to-bottom pattern. With CSS we have control over this tiling process with the "background-repeat" property.
<style type="text/css"> The above tag would prevent a background image from repeating or tiling. This would be appropriate for large pictures used as backgrounds or for the special effect seen here. There are two other values that "background-repeat" supports: repeat-x and repeat-y. The "repeat-x" value tiles only one row across as in this example. The "repeat-y" value makes a vertical column of your background image as seen here. Background-PositionThe "background-position property is only supported by recent versions of Microsoft's Internet Explorer. It is ignored by Netscape. But, I'm sure Netscape support is just around the corner. It's a good idea to learn how to use this interesting property. Remember, if you're using Netscape, you won't be able to see the "background-position" effects in the examples. What "background-position" does is position an image that has had its tiling limited by "backround-repeat". The easiest way to do this is to use words as values:
<style type="text/css"> This will make a column of the background image and place it to the right as in this example. We could have used "background-position: center;" or "background-position: right;" as well. A left alignment is the default. We can also position a background vertically. This is a little trickier because it depends on the length of your page which is not as standard as your width.
<style type="text/css"> This places a row of avocado images at the bottom of the page like this. Putting things at the bottom and center is tricky because it jumps around upon initial scrolling. The values you can use for vertical alignment are "top", "center", and "bottom". Another thing to notice on this page is that I used a grey backgoround-color. This color will show through wherever there isn't any background image showing. Keep this in mind when selecting your background-color. You can use both vertical and horizontal alignment together. This is most noticeable when you set "background-repeat" to "no-repeat". When using both a vertical and horizontal value, the vertical value (top, bottom, center) comes before the horizontal value (left, center, right). A space separates the values:
<style type="text/css"> This places the avocado image to the bottom-right corner of the page. Click here to see the rendered page. Again note that the background grey color appears wherever the background image is absent. You can use other types of values for "background-property" for even more precise positioning control. We'll cover them in Advanced CSS when we cover other CSS positioning techniques (CSS-P). The "Background" PropertyThe "background" property is a shorthand property similar to the "margin" property. You can use this single property to set all of the values above in one declaration. The tag below will make a column of avocados on the right of the page. The page will have a grey background.
<style type="text/css"> The above single line of CSS renders this page. The order in which you should code the values is: background-color: -- I used "#aaaaaa" to get a medium-dark grey. background-image: -- I used the avocado.jpg I've been using in the examples. background-repeat: -- Using the "repeat-y" value, I made a column as opposed to a row or single image. background-attachment: -- I didn't use a value for this, I just moved on to the next property. The "background-attachement" property value "fixed" keeps the background image from scrolling. You just code in "fixed" in the "background" property if you wanted to use it. background-position: -- I wanted my column to the right as opposed to the default left. If I'd used a single image ("background-repeat: no-repeat;"), I might have added a top, center, or bottom value as well. When styling a more complex background, I start out using separate properties like in the first examples to experiment with. When I've got what I want, I squeeze it all into a single "background" declaration. Get some different sized images and practice with all of this. You may want to make a text copy of this page because this is something you'll need to refer to often. I can't remember this stuff and have to use a reference about every time I code a background. What's important is that you know what's possible. You can always look up the specific code. Below is some very typical code. I made this style for a client that wanted a fixed background image that was just a narrow column on the left. It was a blue sky with clouds image that was designed to look good when stacked vertically. Her background styling looked like this:
<style type="text/css"> Making CommentsYou can see that CSS code can get a little bulky. To help organize it you can add comments using /* comment */. You can add these comments anywhere you'd like.
<style type="text/css"> Note that you cannot use the HTML <!-- comment --> tag inside the <style> tags. You must use the "/* comment */" syntax for CSS comments. Setting DefaultsWhile this lesson emphasizes styling your pages' background, don't forget that the "body" element should also include a default font-family (font-size and font-weight don't work so well in "body"). It should also include the page's base margins and text-alignment (if not default left alignment). You can also choose a master foreground color ("color:" property). Netscape does not have the extensive inheritance rules that IE does. Font's styled in the <body> may not be inherited by later text elements like the "p" element. Just remember that if this happens, to include the full styling in the "p" element or other elements. Now you see why I made a whole lesson just dedicated to styling the "body" element. Spend some time with all of this. It's a good time to review all of the CSS you've learned so far by styling the <body> and making some heavily styled pages. Spend most of your time styling <body> and <p>. |
To Next Beginning CSS Lesson
Back To Beginning CSS Index