CSS code

                                                                                                                                                                               

 

CSS (Cascading Style Sheets) allows web authors to apply styles to their web pages. More importantly, CSS enables them to do this independently of the HTML that makes up each web page.

Therefore, as a web author, you can code your HTML without having to be concerned with what each HTML element is going to look like. You can change the look later using CSS.

Here is some CSS codes for you..

Background Image :

<style type="text/css"> body {background-image: url(http://your image.GIF);} </style> 

Fixed background image :

<STYLE type=text/css><!-- body {background: url(http://www.your image url here) fixed; background-color: ffffff;} //--></STYLE>

Nontiling background image :

<STYLE type=text/css> body { background-image: url(YOUR IMAGE); background-attachment: fixed; background-repeat: no-repeat; background-position: top center; } </STYLE>  

Solid color background :

<style type="text/css"> body { background: #FFFF00; } </style>

Flip your page to the left side :

<STYLE>body{direction:rtl;}</STYLE> 

Image links on mouseover :

<STYLE type=text/css> a.navbar:hover{color:red; font-weight:bold;background-image:url(http://www.your image url here);} a:hover, a.redlink:hover, a.navbar:hover {background-image:url(http://www.your image url here); text-decoration:none; border:0px solid;} a:hover img {background-image:url(http://www.your image url here); filter:alpha(finishopacity=0, style=2); } </STYLE>

Blured links on mouseover :

<style type="text/css"> a:hover img {filter: blur(add = 0, direction = 225, strength = 10)}</style>

Blured links, normal mouseover :

<style type="text/css"> a:link img {filter:blur(add = 0, direction = 225, strength = 10);}a:visited img {filter:blur(add = 0, direction = 225, strength = 10);}a:hover img {filter: none}</style>

Invert link color on mouseover :

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:invert;} </style>

X ray mouseover links :

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:xray();} </style>

Transparent links on mouseover :

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:alpha(opacity=60);} </style>  

Transforming links with color change :

<style type="text/css" > A:hover { color:red; font-size:10pt; font-family: Verdana, Times New Roman, Helvetica, sans-serif; font-style:italic; font-weight:bold; text-decoration:underline; cursor:hand; font-variant:small-caps; text-transform:uppercase; background-color:white; } </style>  

Upsidedown links :

<style type="text/css"><!-- a:hover{filter:flipv(color:#FF9999, strength=3);height:0px;width:inherit} //--></style> 

Embossed links :

<style type='text/css'> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.emboss;} </style>

Capitalize first letter in a paragraph :

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

Link decoration overline :

<STYLE type="text/css"><!-- A:link{color:#00FF66;text-decoration:underline;} A:visited{color:#00FF66;text-decoration:underline;} A:active{color:#00FF66;text-decoration:underline;} A:hover{color:#00FF66;text-decoration:none overline;} --></style>

Fixed vertical text left side :

<STYLE type=text/css> .vert { position:absolute; left:1px; top:50px; width:1px; writing-mode: tb-rl; } </STYLE> <SPAN class=vert><FONT color=#ff0000>YOUR MESSAGE HERE</FONT></SPAN>

No underlined links :

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

Engrave links on mouseover :

<style type="text/css"> a:link img {filter:none;} a:visited img {filter:none;} a:hover img {filter:progid:dximagetransform.microsoft.engrave;} </style>

Engrave with normal mouseover :

<style type="text/css"> a:link img {filter:progid:dximagetransform.microsoft.engrave;} a:visited img {filter:progid:dximagetransform.microsoft.engrave;} a:hover img {filter:none;} </style> 

Invert color with normal mouseove :

<style type="text/css"> a:link img {filter:invert;} a:visited img {filter:invert;} a:hover img {filter:none;} </style>

X-ray with Normal Mouseover :

<style type="text/css"> a:link img {filter:xray();} a:visited img {filter:xray();} a:hover img {filter:none;} </style> 

Transparent links with normal mouseover :

<style type="text/css"> a:link img {filter:alpha(opacity=60);} a:visited img {filter:alpha(opacity=60);} a:hover img {filter:none;} </style>


...................................................................................................................................................................................