Basic CSS Tutorial

Kide83 · 01-06-2007, 06:59 PM

Here's short CSS Tutorial that will teach you how to use css to improve your sites templates and their search engine optimization

I'll start with short explanation what is css and how to use it. CSS is short of Cascading Style Sheets. CSS can be internal (css code is inside head tags of your page) or external which i like more (css code is inside filename.css file and you link to it from line of code inside your head tags)...

Here's code to add between <head> and </head> tags of your page

Quote:

Be careful to use corect path to your css file...

Then open your notepad or some other text editor and type this:

Quote:

body
{ FONT-SIZE: 14px; BACKGROUND: #000000; COLOR: #FF0000; FONT-FAMILY: Veranda, Helvetica, Arial; }

img
{ BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; }

a
{ COLOR: #FFFFFF; }
a:visited
{ COLOR: #FFFFFF; }
a:active
{ COLOR: #FFFFFF; }
a:hover
{ COLOR: #FF0000; }

h1
{ FONT-WEIGHT: bold; FONT-SIZE: 25px; COLOR: #FFFFFF; margin: 0px; line-height: 1.6; }

Save this file as filename.css (most usual is style.css) and then upload it to your server. That's is, if you linked it good (used corect css file path) you will see some changes to your page.

Now let's explain how to modify your css file to fit it your needs

I will go line by line and wil lexplain what part of css code is oing what.

Quote:

body
{ FONT-SIZE: 14px; BACKGROUND: #000000; COLOR: #FF0000; FONT-FAMILY: Veranda, Helvetica, Arial; }

This defines your body tag atributes.
FONT-SIZE: 14px; - Change size of font
BACKGROUND: #000000; - Change hex number to change page bacground color
COLOR: #FF0000; - Change hex to change your page font color
FONT-FAMILY: Veranda, Helvetica, Arial; - Page text font

Quote:

img
{ BORDER-RIGHT: 0px; BORDER-TOP: 0px; BORDER-LEFT: 0px; BORDER-BOTTOM: 0px; }

Change image borders... Will add more image artibutes in next css tutorial

Quote:

a
{ COLOR: #FFFFFF; }
a:visited
{ COLOR: #FFFFFF; }
a:active
{ COLOR: #FFFFFF; }
a:hover
{ COLOR: #FF0000; }

This is very Useful - These are atributes for links on your page.

a
{ COLOR: #FFFFFF; } - Your basic link color, change hex to change color
a:visited
{ COLOR: #FFFFFF; } - Visited links color
a:active
{ COLOR: #FFFFFF; } - Actove links, i always use same color as for a atribute
a:hover
{ COLOR: #FF0000; } - Link color when you scroll mouse pointer over it, very useful

Quote:

h1
{ FONT-WEIGHT: bold; FONT-SIZE: 25px; COLOR: #FFFFFF; margin: 0px; line-height: 1.6; }

Your h1, h2, h3 etc tags look bad. Here's solution...

FONT-WEIGHT: bold; - Keep it bold because bold is more powerful for page seo
FONT-SIZE: 25px; - Font size
COLOR: #FFFFFF; - Font color of your h tags
margin: 0px; - I always keep it 0
line-height: 1.6; - play with values to see which one fits you best

That's it, next time i will post some more css codes and will try to explain them

I hope you'll find this useful, css is awesome and i'm using it for all my sites and pages ALWAYS.

This Tutorial is owned by AdultBizForum.com and it can't be used o other sites. However you can use it on your site(s) if you don't change any part of it and give us credits by providing link to this page.

Thread Tools	Search this Thread
Show Printable Version Email this Page	Search this Thread: Advanced Search
Display Modes
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Hub Site Tutorial	Kide83	Adult Webmasters	6	01-05-2009 01:01 PM
TGP2 Gallery Tutorial	Kide83	Articles / Tutorials / Tools	0	01-02-2007 11:56 PM
Hub Site Tutorial	Kide83	Articles / Tutorials / Tools	1	12-31-2006 06:46 PM
Next Tutorial...	Kide83	Traffic Biz	11	03-15-2006 10:01 AM
Get more from Galleries and Free Sites tutorial - by kide83	Kide83	Adult Webmasters	0	01-01-2006 04:12 PM

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)