This is the first guide I've ever written, so I'm sorry if it's crap. gonk


Introduction

You should already have a decent understanding of HTML before you read this. If not, Learn it first.

What is CSS?

CSS stands for "cascading Style Sheets". It is used to define how to display HTML pages.
CSS was originally created to solve the problem of HTML styling getting VERY messy.

Here is an easy way of putting it, HTML is the building blocks to making webpages, and CSS is the pretty paint splattered over the top... to make it look pretty...


OK, lets get started.

CSS can be used on webpages in several ways:

Style Sheets can be directly used on webpages, they would normally be placed in the section of the page.

Example


Another way is to use an external Style Sheet, the link is placed in the section.

Example



Syntax:

the CSS syntax is made of three parts: a selector, a property, and a value.



OR it can be writen on multiple lines for ease of reading:



If you want to be uber tidy with your code, then like this:



How you do it is up to you.

You MUST seperate each property and value using a semi colon:



But what do they mean? gonk

Selector:
This defines the HTML element you wish to edit, for exapmle:
If you placed "body" here, it would apply to everything between the tags.

Property:
The property is the attribute you wish to change.
eg: "font-family" means you want to change the font within the selector you chose.

value:
Defines how you want to change that property.
Simple! blaugh



Example


The above code would make everything between the tags to be blue arial font.


Grouping
You can use more than one selector in one block of code, you just need to seperate each selector using a comma (,).

Example


In this example the code will make the text blue in all the tags

through

.

Class and ID

Ok, now we're getting a little more advanced.


ID

Every HTML tag can be given an ID (usually done with

), the selector will then be "#ID_NAME".

Example
HTML:

text here, blaa blaa blaa

CSS:

#roffle {
color: #ff0000;
}

#roffle img {
border: 2px;
}

This would give red text and an image with a 2 pixle border, notice how you can define a selector within a selector.


Classes

classes are alot like ID's exept they can be more tag specific, the selector is written as "tag.class".
If no tag is defined then it will apply to all the classes of that name.

Example
HTML:

text text, blaa blaa.

more text, lol.

This CSS will make the text inside the

blue, and the text in the

underlined.

div.roffle {
color: #0000ff;
}

p.roffle {
text-decoration: underline;
}

And this CSS will make all the text bold AND underlined.

.roffle {
color: #0000ff;
text-decoration: underline;
}

Code library

There is WAY too much code for me to list it all here, So I'm going to link you to the W3school's CSS code reference.

W3school's code reference



Thought I might add that if you are editing text in a line, use the tag, this way it will not skip to the next line, as

does.

Hi, my name is Hoggs, What's yours?

Any thoughts, additions, or questions, please post them in this thread.

Thanks for reading! 3nodding

Thanks!
It didn't take as long as I thought it would. xD

Updated for ease of reading. wink

Yes? neutral

I knew it! My teacher always told me to learn html first then css coding. eek I guess thats why she is a teacher....