CSS Tricks

You are here:
also see CSS Reference Sheet

Here is the CSS code for colored input button.

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>

Here is the CSS code for coloring your scrollbars. Place this CSS code between the <head> and </head> tags.

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>

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>

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>

Here is the CSS code to capitalize the first letter in each paragraph. Place this CSS code between the <head> and </head> tags.

Then use this code where ever you begin a new paragraph <p>.

<p class="myparagraph">YOUR TEXT GOES HERE".</p>

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

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 at Draac.com.

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;">

Sandra's Page Home is a personal and experimental site on the McIntyre Network
at http://www.mcintyre-network.com. Original and adapted material from credited sources.