Css Basics Just for those who know nothing about css yet.

[KansukeKojima 0]

A tutorial on some of the basics of css.... I wrote if for my site, may as well post it here too

 

CSS Basics

 

Description

For those of you that don't know, CSS stands for Cascading Style Sheets. The whole point of it is to easily edit all of the pages on your website, so you don't have to edit each on individually. In this tutorial, you will learn some of the basics.

 

Try It Out

Css Syntax has three parts to it. The object (where you want to edit), the property (what part of the object to edit), and finally the value (what you want to edit).

 

Example

body { color: #3B3B3B;}

In the above case body is the object, color is the property, and #3b3b3b is the value. (This would cause all the font in your body to be the color #3b3b3b).

 

As shown above, you state the object first, and then state the property, finally, you state the value. Note: As shown above, all properties must be in the "{" brackets and the values must end with a semi-colon ( ; ).

Now for something more complex.

 

Example

body, td { font-size: 8pt; color: #3B3B3B;}

This time, we have two objects! The objects are body and td are both edited by separating them with the comma ( , ). (Note: you can have three, four, etc. objects as long as they are separated by commas.)

 

When you have a property with more than one word, you must place a dash ( - ) in between each word. In this case font size is our property, so we will place a dash in between the words: font-size.

 

Those are some of the basic rules to CSS, I will cover more later.

[musicmaza 0]

hi KansukeKojima
can u plz help me out I have actually some problem with css ...I uploaded style.css a template which I got from freewebtemplates.com ...to my public_html folder and I also uploaded images to images folder but when i open my site the images aren't displayed and the setting of the template is also not good

Please check my site out ..here and then suggest me the possible causes for it....

greetz

[midnightvamp 1]

Just from a quick look myself musicmaza, it looks like your style sheets are in the wrong file. In the source code for the page, I see that it is calling for two style sheets:

<!-- **** layout stylesheet **** --><link rel="stylesheet" type="text/css" href="style/style.css" /><!-- **** colour stylesheet **** --><link rel="stylesheet" type="text/css" href="style/colour.css" />

Therefore there should be a file named style.css and another named colour.css inside a folder named style to have them display properly. Right now, I've found your style.css in the public_html folder like you've said, but for the page to be able to find it, you'll have to put it into a folder with the path public_html/style/style.css

Does that make sense? Hopefully that helps!
Edited December 18, 2007 by midnightvamp (see edit history)

[musicmaza 0]

yes thanks for that I did the same step which you instructed now almost everthing is getting displayed but the images aren't displayed....please check it out can you please help me with the images also...like the top header images is not being displayed...so where do I have to uplaod the images

[KansukeKojima 0]

It would appear you fixed it while I was figuring out what was wrong.... good job...

[musicmaza 0]

yes thanksBut I didn't did that myself ...I am still new to the world of making websites and know very little about css templatesWithout the help of other members it wouldn't have been possible for me........

[calwolf 0]

Thanks for your CSS tutorial... I'm currently in the process of learning HTML and CSS. If you'd like to post more, you've certainly got an audience. If you know of any other good online tutorials, I'd love to hear about them. Thanks.