Home arrow Style-Sheets arrow Page 5 - Understanding Style Sheets (part 2)

Above The Watermark - Style Sheets

The concluding part of this tutorial explores some of the CSS properties related to text alignment, spacing and positioning, together with a look at absolute and relative positioning, z-index stacking, and borders and padding.

TABLE OF CONTENTS:
  1. Understanding Style Sheets (part 2)
  2. Bringing Out The Decorations
  3. Gimme My Space!
  4. Reclining Every Which Way
  5. Above The Watermark
  6. Going Shopping
  7. The View From The Top
  8. The Z-Factor
By: icarus, (c) Melonfire
Rating: starstarstarstarstar / 25
October 04, 2000

print this article
SEARCH DEV SHED

TOOLS YOU CAN USE

advertisement
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>


 
 
>>> More Style-Sheets Articles          >>> More By icarus, (c) Melonfire
 

blog comments powered by Disqus
escort Bursa Bursa escort Antalya eskort
   

STYLE-SHEETS ARTICLES

- What is CSS?
- The Power of CSS
- Understanding Style Sheets (part 2)
- Understanding Style Sheets (Part 1)

Developer Shed Affiliates

 


Dev Shed Tutorial Topics: