Web Master Tutorials

this little tutorial will show you how to achieve text rollover using css:

a:hover{
color:red;
}

#container{text-align:center;}
#centered{width:300px; margin-left:auto; margin-right:auto;}

this should be centered

The following code will create dotted hr using css
hr {
height: 0;
border-bottom: 2px dotted #000;
}

Set line-height to less than 1. But be careful - while paragraphs are drawn closer together, the lines within a paragraph are pushed very close together. With anything less than .9, letters on two lines within a para will touch. It is therefore only useful if you know your paragraphs will be less than one [...]

<form>
<input type=”text” onChange=”this.style.color=’red’”>
</form>
</p>
<br>
<p class=”code”>
// Add this to the head section of your page
<style type=”text/css”>
textarea.normal { background-color:FFFFFF }
textarea.hilite { background-color:FFFFCC;color:0000FF }
.textbox_normal { background-color:#FFFFFF; }
.textbox_hilite { background-color:#FFFFCC;color:#0000FF }
</style>
<input type=”text” name=”textbox1″ size=”30″ maxlength=”40″ class=”textbox_normal” onFocus=”this.className=’textbox_hilite’” onblur=”this.className=’textbox_normal’”>
<textarea name=”textarea1″ cols=”100″ rows=”2″ wrap=”VIRTUAL” class=”normal” onFocus=”this.className=’hilite’” onblur=”this.className=’normal’”></textarea>

So you decided to make your bullets nicer and don’t know how… Use this simple trick and you will love css:

<UL STYLE=”list-style-image: url(mybulletimage.gif)”>
<LI>Bullet 1</LI>
<LI>Bullet 2</LI>
</UL>

Result of the code Bullet 1
Result of the code Bullet 2

Changing background color on MouseOver event is really simple in css. Please take a look at this trick:

<div align=”justify” onmouseover=”style.backgroundColor=’#9ACAF2′;” onmouseout=”style.backgroundColor=”” style=”margin-left:20px”>
some text wil go here… some text will go here</div>

Result of the code can be seen here by putting your mouse…

This is one of the most frequest questions I received: how to make a dashed table using css? I hope this trick will help you.

<table>
<tr>
<td style=”border-top:1px #000000 dashed;border-bottom:1px #000000 dashed;border-right:1px #000000 solid;border-left:1px #000000 solid;”>
Some te:</td>text will go here
</tr>
</table>

result of the code: