Understanding Style Sheets (part 2) - Above The Watermark (
Page 5 of 8 )
CSS also comes with a bunch of properties
that allow you to define the manner in which your page background is displayed.
First, the "background-image" property allows you to specify a background image
for any HTML element.
.question {background-image: url("http://www.mysite.com/back.gif")} /*
display
background image from url */
If you need this background to work as a watermark, which does not scroll when
you scroll down the page, you need the "background-attachment" property - it accepts
the values "fixed" and "scroll".
You can also control whether or not your image tiles across the page with the
"background-repeat" property. This property can take one of four values: "repeat"
(tile horizontally and vertically), "repeat-x" (tile horizontally only), "repeat-y"
(tile vertically only), and "no-repeat" (no tiling).
The following example demonstrates the "repeat-y" keyword:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 20pt; background-image:
url("http://www.mysite.com/back.gif");
background-repeat: repeat-y}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q.
How many doctors does it take to change a light bulb?
A. It depends on what kind
of insurance you have
</BODY>
</HTML>
And you can also specify the location of the background image with the all-powerful
"background-position" property, which can be used in combination with the simple
keywords "left", "right", "center", "top", "middle" and "bottom". For example,
this would position the image in the top right corner:
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {font-size: 20pt; background-image:
url("http://www.mysite.com/back.gif");
background-position: top right;
background-repeat: no-repeat}
</STYLE>
</HEAD>
<BODY>
<P
CLASS="question">
Q. How many doctors does it take to change a light bulb?
A.
It depends on what kind of insurance you have
</BODY>
</HTML>
You can also specify the position of the image in terms of percentages or absolute
units - for example,
{background-position: 100%,0%}
would position the image in the top right corner, while
{background-position: 100%,100%}
would position it in the bottom right corner.{mospagebreak title=Padding Things
Out} The CSS formatting model assumes that every element is surrounded by three
different areas. Starting from the inside out, these areas are padding, border
and margin. Each of these entities can be controlled through special CSS properties,
allowing developers to precisely adjust the appearance and position of each HTML
element.
Margin widths can be controlled via the "margin-top", "margin-bottom", "margin-right",
and "margin-left" properties, and are specified like this:
DIV {margin-top: 10px; margin-bottom: 10px; margin-right: 5px; margin-left:
5px}
/* 10px width for horizontal margins, 5px width for vertical margins */
You can
also use the catch-all "margin" property
DIV {margin: 10px 5px 5px 10px} /* specify
widths clockwise */
or set a uniform margin width with
DIV {margin: 10px} /*
equal width for all margins */
You can adjust border widths with the self-explanatory properties "border-top-width",
"border-bottom-width","border-left-width", and "border-right-width", or set a
uniform border with the shortcut "border-width" property.
DIV {border-top-width: 50px; border-right-width: 100px;
border-bottom-width:
75px; border-left-width: 125px} /* different width for
each border */
DIV {border-width:
50px} /* equal width for all borders */
You can also specify border widths with
the keywords "thick", "medium",
"thin" and "none", like this:
DIV {border-top-width:
thick; border-right-width: medium;
border-bottom-width: thin; border-left-width:
none}
DIV {border-width: thick}
And finally, padding can be controlled with the...you guessed it!... "padding-top",
"padding-bottom", "padding-right", and "padding-left" properties, or the shortcut
"padding" property. Try this one out yourself!
CSS also lets you control the colour of your borders with the "border-color"
properties. The following example will demonstrate how this works.
<HTML>
<HEAD>
<STYLE TYPE="text/css">
.question {border-color: black;
border-width: thick}
</STYLE>
</HEAD>
<BODY>
<P CLASS="question">
Q.
How many doctors does it take to change a light bulb?
A. It depends on what kind
of insurance you have
</BODY>
</HTML>
/ 25 
