CSS (Cascading Style Sheets)

Page 2

Image Protection

Imagine if someone were to right click on an image on your site and save it to their computer for their own use at a later time. Now imagine if they go to open their newly acquired image and there is nothing there. Frustration is a good deterrent...

Once again the power of cascading style sheets (CSS) comes to our rescue. In a previous Tips and Tricks issue we showed you how to use CSS to place background images. Let's take that concept further for image protection.

What we would like to do is place an image as a background inside a Span Tag, then place a transparent image over top of it. The effect is that when someone views the page through their browser, they will see the image just fine. But if they right click and save the image, all they will save is the transparent image, which rests on top of the real image. Pretty slick, huh?

We?ll make a couple of assumptions at this point. We will say that the image is stored in the images directory on your server, that its name is camera.gif, and that it is 32 x 32 pixels. The next thing we will need is a transparent image. The size of this image doesn?t matter, but the smaller the better. We can make it any size we want in the code. But for the illustration, let's say that we made it 10 x 10 pixels.

The next thing we want to do is place the two images on our page:
<span style="background-image:url('http://www.yoursite.com/images/image.gif')"><img src="http://www.yoursite.com/images/image.gif'" width="32" height="32" border="0" alt="description"></span>
Highlighting text with CSS
<div style="border-left:4px solid #ff0000;font:11px verdana;padding-left:5px;">

Wrapping our paragraph in a styled " div" has given this paragraph the highlighted red line on the left. This is a very stylish method for highlighting sections of text.


This is another commonly used method of highlighting text. <span style="background-color:yellow;">   This is easily accomplished with CSS.   </span>

The Importance of Default Pages

Often when you visit a website you will arrive there by typing the URL as something like http://www.sitename.com in your browser. The page that opens is the default page for the root directory of that website. If you were to enter http://www.sitename.com/images/, the page that is loaded is again the default page. The default name that your web server uses will depend on how it has been specifically configured.

The most common default names are index.html, index.htm, index.asp, default.html, default.htm. Confirm with your website hosting company what default file name is being used on your server.

A problem that is common is that if there isn't a default page in the specific directory, most servers will display all the files that are contained within that directory. This could prove to be a problem if you have files in directories that you don't want easily accessible to the public as a whole.

Typically, domains or directories resolve to an index page so you don't have to type in the full page address. On the other hand, if you have a directory that you don't want people to have access to, such as an image directory, adding a default page will ensure you keep the contents of the directory hidden. A redirection page, or a page that tells viewers, "You are not authorized to view this page" will be effective.

Making Text Look Important

Sometimes simply wrapping a special section of text within a display box will give extra punch to the contents of the box.

One option is to wrap the entire paragraph within a border. The entire paragraph can be declared in one CSS command.

<p style="border:1px solid #000000;padding:5px;font:11px verdana;">your paragraph text here</p>
Another option is to use a little variety. Consider the code below.
<p style="border-right:1px solid #000000;border-bottom:1px solid #000000;border-left:2px solid #EEEEEE;border-top:2px solid #EEEEEE;padding:5px;font:11px verdana;">your paragraph text here</p>

Note how we also defined the text attributes as well as the borders in this paragraph style declaration. Now you can begin to see the real power of CSS.

This is an example of the first style box using the same color that is given above.  The #000000 and #EEEEEE are the color codes in the style box coding above.  You can change this to any color you want it to be so long as you use color coding.

This is an example of the second style box using different color than what it gives above in order for you to see it better on the background that I use.  The #000000 and #EEEEEE are the color codes in the style box coding above.  You can change this to any color you want it to be so long as you use color coding.

[ CSS 1 | CSS 2 | CSS 3 | CSS 4 ]


[ About Me | Site Legal Info | Site Design | CSS Coding ]
[ JavaScripts | Hints & Tips | BackGrounds | Misc. Images ]
[ Templates | Logo Page | Special Characters | Color Chart ]
[ Contact Us! | Awards Won | Links ]
[ Home | Site Map ]


Go to Top

Webmaster & Owner: Anita Eberline
No part may be reproduced without prior permission by Anita Eberline