Home -> About Us -> Security & Privacy -> Terms of Use -> Add Url -> Add Your Article
Search:   
spunkycontent.com spunkycontent.com
Add Url
 

Teens & Children

Shopping & Auction

Self Healing

Music & Entertainment

Technology & Science

Society & Communities

Property & Estate

Finance & Investment

Home Family & Garden

Healthcare & Treatment

Drink & Food

Adventure & Sports

Indoor Games

Fitness & Health

Relationship & Lifestyle

Education & Learning

Automobile & Automotive

Careers & Employment

Travel & Vacation

Business & Companies

Issues & News

Computers & Software

Government & Politics

Culture & Art


 

  Home –› Computers & Software –› Web Design & Development
   
 

Dress Up Your Website With Fantastic CSS Tricks

   
Author: Merle Stinnett

In Part 1 of this series, we discussed the different ways of implementing style sheets into your site and the basic layout of tags. Now, let's move on to some of the fun ways you can dress up your site with some standard CSS tags.

Have you ever been to a website and saw text that appeared to have been highlighted with a yellow highlighter pen? Many sales-oriented sites use this technique to call attention to ad copy they want to stand out.

The tag looks like this:

< span style= "background-color:yellow" > Text Here < /span >

Pretty simple, really. How about sites that remove the underlining from hyperlinks? Think it can't be done? Think again. Here's how to do it:

< style type="text/css" > < !-- A:link {text-decoration:none} A:visited {text-decoration:none} --> < /style >

or like this -

A:link, A:visited, A:active { text-decoration: none }

How about setting your link colors? And how about making the links change colors when you hover over them? This is easy, too, but be aware it only works in Internet Explorer 5.0 or higher.

< style type="text/css" > < /style >

Many sites you go to these days have fancy colored scroll bars instead of boring gray ones. This code only works in Internet Explorer 5.5 or higher; Netscape users will still see the standard gray.

< STYLE TYPE="text/css" > < !-- body {scrollbar-3dlight-color:#ff9909; scrollbar-arrow-color:#000099; scrollbar-base-color:#ff9909; scrollbar-darkshadow-color:#000099; scrollbar-face-color:#ff9909; scrollbar-highlight-color:#000099; scrollbar-shadow-color:#ff9909} --> < /STYLE >

If you'd like some free software that will generate the colored scroll bar tags easily, go to http://harmonyhollow.net/cws.shtml You'll also find an online tool you can use to generate the code at: http://www.draac.com/mouseover-scrollbars.html

Page Margins are easy to control with CSS and can be set in mm,cm,in,points (pt) or pixels (px).

Example: To set a left margin margin-left: 2.0 in;

To set all 4 margins at once use Body {margin: 2 in }

To set individual margins at once use Body {margin: 2% 5% 10% 12% }

Did you know some sites even use CSS to lay out their tables? This is a pretty advanced topic and not for the faint of heart:

http://developer.apple.com/internet/CSS/introcsslayout.html

Want to keep a background image from tiling on your pages?

Body {background: #333399 url (filename.gif) no-repeat center}

Think indenting paragraphs online is impossible?

P { text-indent: .50in }

Tables don't have to be boring. You can give em fancy borders by inserting this instruction into your table tag:

Style= "border: 4px solid red"

You can change the above color and px size to whatever you'd like.

Ever notice how almost all submit buttons are all dull gray? Yours doesn't have to be. Use the following tag between the

tags.

< form > < input type= "submit" value="submit" style="background-color: #333399 > < /form >

For more information on dressing up your forms with CSS see these tutorials:

http://outfront.net/tutorials_02/adv_tech/funkyforms1.htm

These are just a few of the page elements you can control with CSS. For more tricks and tips, visit some of these sites:

http://www.boogiejack.com/css_tutorials.html
http://www.w3.org/Style/Examples/007/
http://www.mako4css.com/Tutorial.htm
http://www.videoproductions.com.au/px/css_tips.html

Using CSS to dress up your site is really pretty simple. Just a few tags can have you looking like an instant Webmaster Genius. Try some today and your friends will be dying to know your secrets. Whether you share or not is up to you.

Author Bio:
Merle Stinnett is a renowned writer. Merle likes to compose articles about this field.
You can search for this article using: web site development, web design & development, website development tampa
 
 
 

Related Articles

 
Free Online Affiliate Program: The Power In Testing
 
Making Money on the Internet - It's All in the Design
 
Google AdSense - A Quick Overview For Beginners
 
An Introduction To Internet Marketing Strategy
 
Do You And Your Website Have Credibility?
 
The Hidden Power of Online Manual
 
Effectively Tracking And Testing Your Ads
 
Top 7 Ways To Make More Money With Your Articles
 
Essential Features That Make Your Advertisement Successful
 
Keyword Lists - Their Proper Care and Feeding
 
 
 
   Home -> Security & Privacy -> Terms of Use
Copyright © www.spunkycontent.com - All Rights Reserved Worldwide.