Free Webmaster Help Logo
Tutorials Articles Tools Images Directory Ask Newsletter
*
 

Tutorials
Cookies
ASP
Advanced HTML
Frames & Tables
.htaccess
Rounded Table Corners
Flash 5
FTP
Beginners
Javascript
PHP/MySQL
Site Promotion
Mobile Internet: WML/WAP
Server Side Includes (SSI)
HTML - The Basics
XHTML
Stylesheets
XML
PHP
*

125x125

Related Links
Webmonkey
More Stylesheets Sites
*

 
Sitemap | Contact | Link To Us | Advertise
Report A Problem

Stylesheets Tutorial
Part 4 - Other Stylesheet Effects

Introduction

In this, the final part of the Stylesheets Tutorial, I will show you some of the other useful effects you can do with Stylesheets. Many of these are very good for making nice looking websites. Note that on this page all blue text should be placed within the { and } in your stylesheet on in an inline style.

Indenting and Aligning Text

One clever effect you can achieve with stylesheets is to indent text

text-indent: 1cm

You can use this with the normal units (see part 3).

You can also use stylesheets to align text:

text-align: left

This may not seem particularly special as you can align text with HTML but the benefit of stylesheets is that now you can use justify as well as left, right and center.

Positioning Objects

Here is what you have always been looking for on when making a web site. You can exactly position anything on a web page, just like in a Desktop Publisher! To do this you should use:

position: absolute; left: 100px; top: 100px

This would place whatever you applied this to 100 pixels from the top of the page and 100 pixels from the left. Again you can use any of the length units you learned earlier. You can also use percentage values.

This is an extremely useful tag as it can be used to place objects with precision.

Colors and Backgrounds

The first, and most simple, color option you can do with stylesheets is to set the text's color using:

color: #FF0066

This does the same as an HTML color (using HEX) but you can also use the following:

color: RGB(53,36,102)

This specifies the color in RGB values, like in PhotoShop or PaintShop Pro. This could be very useful if you are trying to match colors.

background-color: #FF0066

This will put a background color on a piece of text (like using a highlighter), very useful for making some of a page stand out. You can also use RGB values for this, like above.

background-image: url(http://www.yourwebsite.com/file.gif)

Instead of applying a background color to some text, this will put a picture in the background. It works best on a paragraph of text. The image will tile, just like a web page background.

Conclusion

As you can see from this tutorial, stylesheets are one of the most useful technologies available on the web. Using stylesheets you can make your site easy to update and can add new effects to make it stand out from the crowd.

If you would like to learn more about the possibilities of stylesheets, look at some of the tutorials on Webmonkey.

© 1999 - 2001 FreeWebmasterHelp.com