Draac.Com's Easy CSS Tricks

• CSS Course
• Table Tricks
• Html Test Bed

Draac.Com's Easy Css Tricks

A Collection Of Easy
CSS Codes To Try.
Updated 04-14-02

• Introduction

These CSS codes shown below need at least IE 4.0, they may not all work with Netscape or MSNTV.
This is a collection of short CSS codes that can be used on your web sites. Once you get the hang of CSS coding, there is no telling what you could come up with on your own. There are many different style codes to try. Mix and match them and come up with your own cool CSS style codes.
For a reference sheet to other elements Click Here.

• No Underline Links

Here is the CSS code to get rid of the underline links once and for all. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>

• Text Links With Lines Above And Below

Here is the CSS code to mouseover and put lines above and below text links. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>

• Text Links With Background Color Highlight

Here is the CSS code to mouseover and put a background color behind text links. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>

• Text Links With Just Mouseover Colored Text

Here is the CSS code to mouseover and change the color of text links. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>

• Non-Tiling Background Image

Here is the CSS code to add a background image that won't tile. Place this CSS code between the <head> and </head> tags. Add a background color too for those who can't see the image.
<style type="text/css">

</style>
You can "center" the background image on the web page but it will not stretch the image out to fill the full screen.
<style type="text/css">

</style>

• Color Or An Image For An Input Button

An example of a colored input button.

Here is the CSS code for colored input button.
<form action="put url here" method="get">
<input style="background-color: #8b008b; color: #ffff00; font-weight: bold; font-size: 10pt;" type="submit" value="Click Me">
</form>
An example of an input button with an image background.

Here is the CSS code for a image on an input button.
<form action="put url here" method="get">
<input type="submit" style="background-image: url(filename.gif); color: #0000cd; font-weight: bold; font-size: 13pt;">
</form>

• Use Images As Bullets In A List

An example of an unordered list with image bullets.

Apples

Pears

Grapes

Here is the CSS code for images used as bullets.
<UL style="list-style-image: url(filename.gif); color: #9400d3; font-weight: bold; font-size: 12pt;">
<LI>Apples</LI>
<LI>Pears</LI>
<LI>Grapes</LI>
</UL>

• Add Spacing Between Your Letters

An example of adding space between letters.

Hi Draac !

Here is the CSS code for add some space between letters in text.
<h4 style="letter-spacing: 20pt; font-size: 20pt; color: #ff0000; font-weight: bold;">Hi Draac !</h4>

You can also use these style codes with <font>
<font style="letter-spacing: 20pt; font-size: 20pt; color: #ff0000; font-weight: bold;">Hi Draac !</font>

• Background Color Behind Text

An example of background color behind text.
This CSS Stuff Is Amazing !!
Here is the CSS code for a background color behind some bold text.
<font style="background-color: #e6e6fa; color: #9400d3; font-size: 14pt; font-weight: bold;">
Put Some Text Here
</font>
Or you can use the style codes in your <b> tags.
Very Cool !
<B style="background-color: #ff0000; color: #ffff00; font-size: 18pt; font-weight: bold;">Text Here</b>

• Background Image Behind Text

An example of an image background behind text.
Use Any Background Image That You Would Like !
Here is the CSS code for a background image behind some bold text.
<font style="background-image:url('filename.jpg'); color: #000000; font-weight: bold; font-size: 16pt;">
Put Some Text Here
</font>

• Colored Scrollbars On Your Web Page

Here is the CSS code for coloring your scrollbars. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</STYLE>

• Adding Color To A Textarea Box

You can add color to the background and text of a textarea box. An example of a textarea box with a colored background and colored text.

This is sure to spice up your textarea boxes. Change the colors to suit your needs or match your web page colors.

Here is the CSS code for a colored textarea box with colored text.
<form>
<textarea cols="48" rows="3" style="background-color: #e6e6fa; color: #9400d3; font-weight: bold; font-size: 12pt;">
This is sure to spice up your textarea boxes.
Change the colors to suit your needs and/or match your web page colors.
</textarea>
</form>
You can even add a background image to a textarea box with colored text.

This is a funky way to display a textarea box. These CSS codes are more fun than a barrel of monkeys !

Here is the CSS code for a textarea box with background image and colored text.
<form>
<textarea cols="48" rows="3" style="background-image:url('filename.jpg'); color: #000000; font-weight: bold; font-size: 12pt;">
This is sure to spice up your textarea boxes.
Change the colors to suit your needs and/or match your web page colors.
</textarea>
</form>
You can also color the scrollbar in just your textarea box. If you have a colored scrollbar on your web page, this will not effect that scrollbar, only the scrollbar in the textarea box.
CSS codes and can add lot to your web pages. You can also add this colored scrollbar to the textarea box with just the colored background.

Here is the CSS code for a textarea box with background image and colored text and scrollbar.
<form>
<textarea cols="48" rows="3" style="background-image:url('filename.gif'); color: #ffffff; font-weight: bold; font-size: 12pt; scrollbar-highlight-color: red; scrollbar-3dlight-color: blue; scrollbar-darkshadow-color: green; scrollbar-track-color: pink; scrollbar-face-color: tan; scrollbar-arrow-color: yellow">
CSS codes and can a lot to your web pages. Just don't over do it, use these codes where it will enhance. You can also add this colored scrollbar to the textarea box with just the colored background.
</textarea>
</form>

• Adding Color To A Pulldown Menu

You can add color to the background and text of a pulldown menu.
An example of pulldown menu with a colored background and colored text.

Here is the CSS code for a colored drop down menu with colored text.
Note: You need the whole Javascript code to make a working pull down menu. You can get the whole Javascript code for this drop down menu Here. The code below is just part of the Javascript code and will not work alone.
<form name="form">
<select name="site" size=1 style="background-color: #e6e6fa; color: #9400d3; font-weight: bold; font-size: 10pt;">
<option value="">Pick A Link</option>
<option value="http://www.draac.com">Draac.Com</option>
<option value="http://gifs123.tripod.com/">Draac's Gifs 123</option>
<option value="http://www.draac.com/tools.html">Web Tools</option>
<option value="http://www.draac.com/java.html">Javascripts</option>
</select>
<input type=button value="Go!" onClick="javascript:formHandler()" STYLE="background-color: #e6e6fa; color: #9400d3; font-weight: bold; font-size: 10pt;">
</form>

• Paragraph Indent

This code will indent the first line of each paragraph <p> on the whole web page to the value set in the code. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>

• CSS Borders

By using CSS border style codes you can add cool borders to your images, tables, textarea boxes and IFRAMES.

Sample table with a "ridge" border.

Here is sample image with "dashed" border.

logo Other borders:

dotted
dashed
solid
double
groove
ridge
inset
outset

Here is the code for a sample table. Just change the word "ridge" to any of the border types in the list above. You can also change the color and/or pixel value (px) of your border to make it thicker or thinner.
<table cellpadding="10" cellspacing="0" border="0" style="border:15px ridge #ff0000">
<tr><td align="center" valign="middle" bgcolor="#ffffff">
CELL CONTENTS GO HERE
</td></tr></table>
Here is the code for the sample image. Just change the word "dashed" to any of the border types in the list above. You can also change color and/or the pixel value (px) of your border to make it thicker or thinner.
<img src="image file here" width="120" height="83" alt="logo" style="border:15px dashed #6495ed">
You can also add this style code to a TEXTAREA box, or combine any one of border style codes with the other TEXTAREA style codes in the previous lessons.
<form>
<textarea rows="6" cols="30" style="border:15px ridge #ff0000">
Very cool border Draac...!!
</textarea>
</form>

If you would like the border around your whole web page use the script below. Paste the script right after your <body> line of code.
<script language="JavaScript">
if (document.all) document.body.style.cssText="border:10 ridge #0063F7"
</script>

• Creating A Separate Style Sheet File

You can create a separate .css file to put all your CSS coding in and then link to that file in your Html document. This is handy if you have a lot of CSS coding on your page. It is also handy if you want to place the same CSS coding on all your Html document. Just insert the .css file in your Html document with one line of code.
Here is how to create a .css file and insert the file into your Html document.

Use notepad or your text editor to write your .css file. This file contains your style codes without the <style> and </style> tags.
Here is a brief example on how to write your .css page code.
A:hover { text-decoration: overline underline }
H1 { color: blue }
p { text-indent: .25in }

Save the file as a .css file. Example Name: sheet1.css
Upload your .css file to your web page server
(Note: Not all web page hosts support .css files).
Then insert the line of code below in your Html document.

Here is the html code to insert into your Html document. Edit the file name to point to your .css file. Place this line of code between the <head> and </head> tags.
<LINK REL=stylesheet HREF="sheet1.css" TYPE="text/css">
Now whenever you want to change the CSS coding just edit your .css file and upload it to your server again this will copy over your old .css file and reflect the changes.

• Capitalize The First Letter In Each Paragraph

Here is the CSS code to capitalize the first letter in each paragraph. Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>
Then use this code where ever you begin a new paragraph <p>.
<p class="myparagraph">YOUR TEXT GOES HERE".</p>

• Custom Cursor Script (For IE 6)

Here is the CSS code to place a custom cursor on your web page. Place this CSS code between the <head> and </head> tags.
The cursor image type must be a .cur or .ani image. You can find some animated cursors here or upload one from your computer. They can be found on your C drive under C/Windows/Cursors/.
In the code below, replace "mycursor.cur" with the file name of your cursor.
<style type="text/css">

</style>

• Text Links With Hover Changing Filters

Here is the CSS code to mouseover and change the "filter", using "hover". Place this CSS code between the <head> and </head> tags.
<style type="text/css">

</style>
Then assign the "class" to each of the text links.
Here is an example text link for the above CSS code:
<a href="http://www.draac.com/" class="red">Draac.Com</a>
I am using the "glow" filter in each of the CSS codes in this example but you can mix and match your filters to change the type of filter when mouseovered. You can find other types of filters on the Wild IE Filters page here at Draac.com.

• No Scrollbars In IE

Here is the CSS code to disable the scrollbar on your web page (for Internet Explorer only). Place this CSS code between the <head> and </head> tags.
Be careful where you use this code, you don't want to disable the scrollbar and not have people be able to scroll down through your page when there is a need to. This CSS code might be useful on a "Splash" page or on a web page when there definitely will not be a need to scroll down the page. This code will disable both the X and Y scrollbars.
<style type="text/css">

</style>
You can also disable just the X (bottom) scrollbar or the Y (right) scrollbar. Again, be careful how you use this. If the page is scrolling, there is a need to do so, or the scrollbar would not appear in the first place.
To disable just the X (bottom) scrollbar use:
body { overflow-x:hidden; }
To disable just the Y (right) scrollbar use:
body { overflow-y:hidden; }

• CSS And <HR> Lines

You can add many CSS attributes to your <HR> lines on your web pages. Below is a sample <HR> line with some CSS attributes added to it. This will give you much more control over how these lines appear on your web pages.

Experiment with other CSS attributes in your CSS <HR> lines, there may be other attributes that can be added to change their appearence. For instance in place of a "solid" blue border, try a "dotted" blue border. A list of the different types of borders is listed above in the CSS Border lesson.
Below is the code for the CSS <HR> line in the sample above.
<hr noshade style="width: 300px; color: yellow; height: 10px; text-align: center; border: 2px solid blue;">

• A Final Note

There are many different CSS elements you could add along with what I have shown on this page. Try mixing in a few others or replacing some with new ones. Once you get the hang of CSS styles and what they can do, there is no telling what you can come up with.
For a reference sheet to other elements Click Here.

Draac.Com Is Hosted By ValueWeb
Register UK domain names at Domain Names UK