Draac.Com - Building A Better Internet


  CSS Course

  Table Tricks

  Html Test Bed

QuickLinks - What Are These ? DraacMail Web Tools - Resources The Board Home - Draac.Com
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">
<!--
A:link { text-decoration: none }
A:visited { text-decoration: none }
-->
</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">
<!--
A:hover { text-decoration: overline underline }
-->
</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">
<!--
A:hover { color: #ff0000; background-color: #ffff00; }
-->
</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">
<!--
A:hover { color: #ff0000 }
-->
</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">
<!--
BODY { background: #ffffff url(filename.gif) no-repeat }
-->
</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">
<!--
BODY { background: #ffffff url(filename.gif) no-repeat center }
-->
</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">
<!--
BODY { scrollbar-face-color: #d8bfd8; scrollbar-shadow-color: #333333; scrollbar-highlight-color: #0063F7; scrollbar-3dlight-color: #3399cc; scrollbar-darkshadow-color: #333333; scrollbar-track-color: #800080; scrollbar-arrow-color: #ff00ff; }
-->
</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.

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.

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.

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">
<!--
p {text-indent: .25in}
-->
</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">
<!--
.myparagraph:first-letter{
font-size:200%;
float:left;
color:blue;
-->
</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">
<!--
BODY { cursor:url("mycursor.cur"); }
-->
</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">
<!--
a.red {width: inherit; height: 30; color: #000000; font-size: 24px; font-weight: 900; font-family: verdana; Filter: Glow(Color=#FFFF00, Strength=4)}

a.red:hover {Filter: Glow(Color=#FF0000, Strength=4) }
-->
</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">
<!--
body { overflow:hidden; }
-->
</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
new 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.


ValueWeb Banner
Draac.Com Is Hosted By ValueWeb

Register UK domain names at Domain Names UK

| Advertise | Link To Us | Status/Updates | Privacy Statement |
| Copyright 1999-2003 Draac.Com All Rights Reserved. |