Warning: include(/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php) [function.include]: failed to open stream: No such file or directory in /home/jenni/star-girl.org/pages/tutorials/csscgi/typical.php on line 1

Warning: include() [function.include]: Failed opening '/home/.lurky/jenni/star-girl.org/skins/cookiecheck.php' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/typical.php on line 1

Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/typical.php on line 2

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/typical.php on line 2
Typical CSS code for a site

Okay by now you should have grasped the basics of CSS if you didn't know them already. If this is the first or second tutorial you've looked at in my CSS section and you're a beginner, you may want to go back and have a look through some of the others to familiarise yourself with CSS before you begin this tutorial.

1. Copy this code and paste into Notepad:

<style type="text/css"> <!--BODY { color:#000000; font-size:8pt; font-family:verdana; font-weight:normal; background-image: url(BACKGROUND.gif); background-color: #ffffff; background-attachment : fixed; }--> <!-- BODY{scrollbar-face-color: #FFFFFF; scrollbar-shadow-color: #000000; scrollbar-highlight-color: #000000; scrollbar-3dlight-color: #FFFFFF; scrollbar-darkshadow-color: #000000; scrollbar-track-color: #FFFFFF; scrollbar-arrow-color:#000000} } --> <!-- A{cursor:crosshair;color:#000000;text-decoration:none; font-weight:bold; } A:visited{color:#000000; text-decoration:none; font-weight:bold; cursor:crosshair; } A:active {color:#000000; text-decoration:none; font-weight:bold; cursor:crosshair; } A:hover {color:#000000; text-decoration:none; font-weight:bold; cursor:crosshair; } }--> <!--ul { list-style-image: url(BULLETPOINT.gif); margin-top: 0; } --> <!--input,textarea{color:#000000;font-size:8PT;font-family:verdana;background:#FFFFFF;border:1PT solid #000000;} } --> </style>

2. It's an example of the full CSS code you might find on a typical site. It goes between the HEAD tags on your page. The only thing you have to change is the 7th line; change BACKGROUND.gif to the actual name of your background, or if you don't have an image background, remove that line altogether.
3. The rest of the code is basically trial and improvement - mess around until you get something you're happy with. You can look at my 'Text', 'Link Effects', 'Scrollbar Effects' and 'Bullet Points' tutorial to get some idea of the things you have to change.
4. Now you can use your CSS to create an external style sheet for your site. This is really useful, because if you change just one page all your other pages will change too :) Click here and begin from step 4.
Warning: include() [function.include]: Filename cannot be empty in /home/jenni/star-girl.org/pages/tutorials/csscgi/typical.php on line 44

Warning: include() [function.include]: Failed opening '' for inclusion (include_path='.:/usr/local/lib/php:/usr/local/php5/lib/pear') in /home/jenni/star-girl.org/pages/tutorials/csscgi/typical.php on line 44