Custom Bullet List



Below is a very basic css file that I created for the purposes of this tutorial. Its just a basic css, nothing fancy in there. I will try and give you a quick run through to help you with it.



A:link
{ text-decoration: none; color:#FB0590;font-weight:bold; style:bold}
A:visited
{ text-decoration: none;font-weight:bold; color:#fb0590;}
A:active
{ text-decoration: none; color:white;}
A:hover{COLOR:#9775A9;font-weight:bold; text-transform:uppercase}
cursor: crosshair }

This bit here is your links. "Link" is the colour it will be when its just sitting there, "Visited" is the colour it will be once someone has clicked on it, "Active" is the colour it will be once someone has clicked on it also...? and "Hover" is the colour it will be when someone puts a cursor on it. Change the HEX codes to whatever colour you want. "Font-weight" is either bold or normal and "text-transform" will make it uppercase. If you don't want this just take it out.

body
{ background-color:transparent;
background-attachment: fixed;
text-align: justify;
font-family:Tahoma;
color: white;
letter-spacing: 0;
font-weight: normal;
font-size:8pt;
line-height: 11px}

Text-align is like center, left or right. Font-family is the font you want to use, Color is the colour of your normal text, spacing is the space between each letter of your text, font-weight is either normal or bold, size is obviously size and line height is how much height is between each line of text.

table, tr, td
{ font-family:Tahoma;
color: white;
line-height: 11px;
font-size: 8pt;
border: 0pt solid white;
padding-left: 0cm;
padding-right: 0cm;
padding-top: 0cm;
padding-bottom: 0cm;
padding: 0cm; }


This code changes what your tables and text areas will look like, pretty self explanatory, the padding is how much room there is on all the sides on the table between the edge and the text.

BODY{scrollbar-face-color:#FB0590; scrollbar-shadow-color:#fffffff;
scrollbar-highlight-color:#000000; scrollbar-3dlight-color:#000000;
scrollbar-arrow-color:white;
scrollbar-darkshadow-color:white; scrollbar-track-color:#000000;
 

This is the code for the scroll bar on the site, you can pretty much have any colours you like, just change and play with all the hex codes.

HOW TO USE THIS CSS IN YOUR WEBPAGE:
Yes, there's more!! Save the whole code into notepad and call it "css.css" MAKE SURE YOU HAVE .css AT THE END!! Upload that to your webpage!

Now copy and paste the following code onto every page of your website. It must be on EVERY page to work.
<link rel="stylesheet" type="text/css" href="css.css">

Now that's its, play around with the colours and now your website can be automatically coded!! Every time you want to change a layout and your colours just update the css file with new colours and re-upload it, it will change all the pages instantly!

Back

Jessica-Ann is 20, living just out of Melbourne, Australia. Working as a trainee support technition at a university in the IT department. Has a passion for web design and image manipulation and shopping. Enjoys going out dancing and drinking but knows when to take it easy. You've somehow stumbled on her space, please enjoy and respect. Layout: Hilary Duff
Programs: PSP9 and Dreamweaver 8 and using WACOM tablet.
Host: Dani at S-S.org
Thanks: Mentioned in Artwork
Optimised: Site has been optimised for use with both IE7 and FF with a resolution of 1280x800.
COMING SOON