We accept safe and secure Credit Card and PayPal Payments.
Perl Scripts

All Count
Attachment Mailer
Perl Scripts Build A FAQ Plus
Perl Scripts Clock In Center
eBackup Automated
Easy Poll
Fetch a File
Form Maker
Mailing List Server
MySQL Mate
PDF Creation
Quick Fix
Quote of the day
Speed Search
Task Manager
Traffic Pack
Upload Plus
Upload Gold
Upload Pro
Website Manager

Free Perl Downloads

Free Perl Scripts Main Page
Free Perl Scripts 404 Alerter
AccessLog Viewer
Build A FAQ
PHP Scripts eBackup
Free PHP Scripts ErrorLog Viewer
eVars - Server Info
HT Pass Creator
Upload Lite
Website Manager


Free Java Scripts Alert Boxes
Free JavaScripts Browser Sniffer
Check email
Slide Show
Window Maker

Extra Utilities

ASP Scripts Ascii Codes
Free ASP Scripts Color Picker
Font Finder
HT Pass Creator
Meta Cloak
Meta Magic
Pano Zooms
Server Size

Online Tutorials

Free HTML Scripts Glossary
Free HTML Scripts HTML
Build Traffic


About Us
Latest versions

Hawk Eye in Tennis

Should Hawk Eye replace linesmen and lineswomen at all tennis tournaments?

View all Polls

Run Polls on your site

Run your own Surveys

Store Download FAQs Contact Us Support Programming Policies  
Contents Intro Your first page Text Images Links Lists Tables
Frames Forms Sounds Styles Symbols Colors Tags Publish Index

Chapter 10

Cascading style sheets

Style sheets are html 4's most powerful feature and most extensive addon. Here you will gain the knowledge needed to ensure your styles will achieve the effect you desire in both Netscape Navigator and Internet Explorer! Even experienced programmers will learn a thing a two here. There are three ways in which you can implement styles. External styles, Internal styles and local styles. Each is described in detail below. I recommend beginners start with Internal styles as they are the easiest to understand. To begin with , the syntax may look a little daunting to html programmers, but you will soon realize there are really only three new parameters. These are :

1: the opening brace { and closing brace } meaning group
2: the colon : meaning equals
3: the semicolon ; meaning next or new line

Internal style sheets

Below is a simple example you can copy to your html page. Internal styles are placed at the top of your page between the opening and closing <head> tags. The syntax is placed between opening and closing <style> tags like this:

b { color:red; font-size:15px; }

'b' represents the bold tag or <b> </b>. Everything between the 'braces' is what will be used to render the bold tag every time you use it. color:red; translates to color equals red, next. font-size:15px; translates to font size equals 15 pixels, next. You must add the px so that both MSIE and NN will understand your styles. If you leave it out NN will ignore the whole group. MSIE as always , is more forgiving. Enter the <b> </b> a few times anywhere on your page. Now watch as your styles change every one of them. A computer WILL NOT forget to change the hard to see tag.

Another example of Internal styles. This style will apply to all the links of a given page.

a { color:blue; font-size:12px; text-decoration:none; }
a:hover { color:blue; font-size:12px; text-decoration:underline; }

Once again 'a' represents all the <a href=""> tags. text-decoration:none; translates to no underline , no shadow, nothing. The next line deals with the hover attribute ( IE4+ NN6+ Opera 5+ ). This style will be executed when a user hovers their mouse over a link. The color and size remain the same , however while the mouse pointer is over the link , the link will be underlined.

Let's say you want one or two of the twenty links on our page to contain a different set of properties. You could either use local styles ( described below ) which override Internal styles or you could use what's known as a class of styles. To use a class, first you define it then you add it to a particular tag. The following demonstrates a class named "smalllink"

a { color:blue; font-size:12px; text-decoration:none; }
a:hover { color:blue; font-size:12px; text-decoration:underline; }
.smalllink { color:red; font-size:8px; text-decoration:none; }
.smalllink:hover { color:red; font-size:8px; text-decoration:underline; }

After defining a class, you can add it to a tag, like this:

<a href="blank.html" target="_self" class="smalllink">Blah blah</a>

When defining a class dont' forget to start with a period '.' . This period is not used in the class attribute of the actual tag. Let's say you where creating a twenty page site. To ensure all twenty pages look exactly the same and have a common pleasing feel you would use External style sheets.

External styles sheets

As you have probably guessed, this guide is using an external style sheet. Every page of this tutorial uses the h1 tag for the page header (red), the h2 tag for sub titles (green) and the h3 tag for any code (black). If I was to change the value of the h2 tag to read color:blue , every subtitle on every page of this guide would automatically be changed from green to blue. Amazing! Within a minute, I could create a new and look feel for this whole guide.

To create an external style sheet open a new file and name it mystyle.css   . Save it to the same directory your html files are located at. Define your styles just as above, except don't need use <style> or < head or any other tag for that matter. So your external style sheet's code might look like this:

a {color:ff9951;text-decoration:none;font-size:20px}
a:vlink {color:ff9951;text-decoration:none;}
a:hover {color:red;text-decoration:underline;}
a:alink {color:red;text-decoration:none;}

To use this css file , in between the opening and closing <head> tags , you will need to add the following tag.

<link rel="stylesheet" type="text/css" href="mystyle.css">

Thats it. Your 're done. Place the same <link> tag in as many html documents as you please. Remembering that external styles are overridden by internal styles which in turn are overridden by local or inline styles.

Local styles

Local styles are applied to individual tags within the body of your html doc. The most common tag being the <Div> </Div> tag. This is the tag that is replacing all deprecated tags. Let's start by using the tag in its basic form. Instead of using <center> </center> which has been deprecated ( disapproved of ), use this:

<Div align="center">You can type text or add any other tag here</Div>

The effect

You can type text or add any other tag here

To place the contents of a <div> tag precisely where you would like them, replace the align="" attribute with style="" like this:

<Div style="position:absolute;left:0;">You can type text or add any other tag here</Div>

The effect

You can type text or add any other tag here

The position can either be absolute or relative to the previous <div> tag and must be added to the style. You can add the contents on one div tag directly over of the contents of another div tag. Use the z-index property to do this. Below is a table of some of the many properties styles use. Do not underestimate the power of styles as I did. Learn to use them and begin to see some the amazing possibilities. The more you use them the better your pages will become. To get a full list you can either download a free css editor or any good html editor.

value description
position: Absolute or relative to last style. Must be added when positioning elements.
left: any number Number of pixels from left side of window
top: any number number of pixels from top of window
z-index: any number Used to overlay elements, the higher the number the higher the element sits
width: any number sets width of the style, to stop wrap
height: any number sets height
color: any predefined or hex color sets color of text , do not use the # in hex colors
visibility: show or hide a layer, can only be changed on user initiated events using javascript
font-size: #px Size of text. The # represents any number. You must add the px for it to work in MSIE and NN
font-weight: Normal of bold text

Changing the color of scrollbars

Internet Explorer, from Version 5.5, allows you to change the scrollbar's color. The easiest way is to change the base color from the default. Enter any color name or RGB hexadecimal value.

body{ scrollbar-base-color: #909000; }

If you would like to change the look further, here is an example that has the same effect, but uses the full list of attributes. You can also have the color change on the onmouseover event, discussed in our JavaScript tutorial.

body {
scrollbar-face-color: #a0a000;
scrollbar-highlight-color: #f0f000;
scrollbar-shadow-color: #606000;
scrollbar-3dlight-color: #a0a000;
scrollbar-arrow-color: #ffff00;
scrollbar-track-color: #c0c000;
scrollbar-darkshadow-color: #000000;

Click here to download Top style lite 979kb

Quick Topstyle lesson

Download the file to any folder. Un compress it. (You will need winzip or any other decompressor). It will extract files to a folder named Bradbury. Open this folder then open the Topstyle folder. There may be another topstyle folder and inside this you will find TSlite.exe   . Execute it (open it). Now you should have the program open. At the very top in the Edit menu select 'New selector'. Choose a tag you want to work with and press ok. You should now see a full list of properties on the right. Choose a property then choose a value. It has now generated the code you want. Easy. You can either save this file as an external style sheet or copy and paste the code. At the bottom of the TSlite window there will be a preview of what you have created (as long the creation has visible elements.

You have reached the end of this tutorial. All that remain are the appendixes. I recommend you at least look at ' Appendix B Colors in hex '. Hope to see your wizardry up on the web. Good luck and remember what you see is not always what you get. Check your pages in as many browsers and as many versions as you can.

Contents Intro Your first page Text Images Links Lists Tables
Frames Forms Sounds Styles Symbols Colors Tags Publish Index
Speed Search our site
Linux Hosting Plans from $9.12 per month, includes Plesk Control Panel, MySQL databases, cgi-bin, crontab manager and 50 email accounts.

Survey Software
Create unlimited web based surveys on your website from your website

Discounted Scripts
Subscribe to our periodial newsletter to receive special offers.

Bathroom Hygiene
How often do you thoroughly clean your bathroom?

View all Polls

Run Polls just like this one on your website!

About us | Contact us | Script FAQs | Script Support | Website Hosting | Our Policies | Store | Testimonials
Subscribers log in here. Subscribe to our periodical newsletter for special offers on commercial scripts, hosting, exciting business opportunities, and industry news and events. Our Mailing List Software is powered by Consolidator    
HTML Plain text
©1999 - 2015 All content Copyright PerlScriptsJavaScripts.com Proudly hosted by LinuxHostingPlans.com