SEARCH
Newsletter
Subscribe to get design
tips, latest trends, free
stuff and more.
It doesn't look like an e-mail address

hosting

  Tutorials HTML and CSS Tutorials CSS Basic, CSS Codes

CSS Basic, CSS Codes

Adam Priestley Tutorials Aug 02, 2004

CSS Codes Here i will teach you the basics of CSS (Cascading Style Sheets) and will make a list of many many CSS codes for you to use :D

Ok, CSS codes are written like this:

<style type="text/css">
All of the CSS code goes in here
</style>

And the code is inserted into the <head> and </head> tags of the page.

These are just some CSS codes that I picked up somewhere or other over the internet, I didn't make them, I am just showing you them so you can use them :)

Hope you find what you need!

Colourful scrollbar

<style type="text/css">
body{scrollbar-face-color:#EEEEEE; scrollbar-shadow-color:
#000000;scrollbar-highlight-color: #EEEEEE;scrollbar-3dlight-color:
#000000;scrollbar-darkshadow-color: #EEEEEE;scrollbar-track-color:
#EEEEEE;scrollbar-arrow-color: #000000;} </style>

Add a background

<style type="text/css">
body {background:url(http://www.yoursite.com/the)} </style>

Add a background and have it fixed

<style type="text/css">
body {background:url(http://www.yoursite.com/thebackground.gif) fixed} </style>

Change link text

<style type="text/css">
a:link,a:visited{color:gold;font:9pt verdana}
a:active{color:red;font:9pt verdana}
</style>

Change link background on mouseover

<style type="text/css">
a:hover{background:gold}
</style>

Text to capitols on mouseover

<style type="text/css">
a:hover{text-transform:uppercase}
</style>

General font size, type and colour

<style type="text/css">
body{font-family:verdana;font-size:8pt;font-color:red;}
</style>

Get rid of all the white stuff in images

<style type="text/css">
img{filter:chroma(color=white)}
</style>

Get a crosshair as a cursor

<style type="text/css">
body{cursor:crosshair}
</style>

Put a picture anywhere you want

<style type="text/css">
i.anypic1 {background:url(http://www.yoursite.com/theimage.gif);
height:80;width:80;position:absolute;top:200;left:300}
</style>
<i class="anypic1"> </i>

Change table borders

<style type="text/css">
table {
border-style: solid;
border-color: #CCCCCC;
border-width: 1px;
}
</style>

   
subscribe to newsletter