[CSS] Short CSS Introduction

[Raremandan]

Well I have been extremely bored for a while, and as I have quite good knowledge on this subject; I have attempted at writing a half-decent tutorial.

Many of you will find this long, but I assure you this is not long compared to some things I have read about in CSS.

What is CSS?

CSS is actually 'Cascading Stylesheets' which is used to style webpages, it also has the advantage of edited 10 webpages with just one link on each of them. The code to actually do this; is:

<link rel="stylesheet" type="text/css" href="main.css" />

Of course like any external Javascript file or anything like that, you change the name and directory as needed.

Structure of CSS

Really the structure of CSS is broken down into three main things, the selector, the property and the value, here is a brieft example and explanation of all these things.

The selector is what you want the style to apply to, so basically its any html tag all be it from tds, the li's and so on and so on.

body{
background-color: #000000;
}

This is selecting one, although you can select more than one, this saves writing out lots of code and is more efficient in my view.

body, td{
background-color: #000000;
}

I have used the background-color property as it is an easyish one which will be remembered as most people will use this. For a full reference on different properties look http://www.w3schools.com/css/css_reference.asp

The value is, from percentage or pixels which are the two main used ones, I have found a nice list of them though here:

pixels (px)
percent(%)
em, one em is the same as the font size of the current element
inches(in)
centimeters(cm)
millimeters(mm)
points (pt)one pt is equivalent of 1/72 inches.
pica(pc) equal to 12 points.

Reminder!

Reminder about the semi colon, much like in PHP the semi-colon actually splits the code up so after every property you must use a ; and then write the next one.

ID's and Classes

Classes and ID's have played a big part in CSS for me over the past year and they're good for use with even tables if you are still using tables.

.class1{
background-color: #000000;
}

Now this is a basic class, you can tell this by the . at the beginning and this is used to add style to tables as well as various other things, to add the style of class one to a table simple put into your table code:

<td class="class1"></td>

Or to even execute that in a rather large table situation even just once or twice:

<table>
 <tr>
  <td class="class1">Content</td>
  <td>Content</td>
 </tr>
</table>

See how simple it actually is. You can also select Classes for your own styling needs so to say with:

<div class="class1"></div>

Moving onto ID's more, many people seem to use ID's more but I tend to use both an equal amount, they're both extremely good.

 #id1{
background-color: #000000;
}

You can always recongnise the ID by the # sign unless it's a hexademical code or something else, now to select the actual ID in your XHTML document.

<div id="id1"></div>

A few good code snippets:

 a:link{
color: #;
}

a:visited{
color: #;
}

a:hover{
color: #;
}

a:active{
color: #;
}

This is for your link customization, I was in two minds whether to add the actual Scrollbar feature, but as it's only in IE I found it pointless to add it.

Bare in mind this is only a short introduction, and I may create a longer more advanced one very soon.

Thanks
Raremandan

[Flisker]

Niceeeeeeeee

[ADAM:]

Thanks Dan, im learning CSS and i needed apart of that

[YouFail]

Dan well done that helped loads!

[Luckyrare]

Great tut, rep+

Also, this is very handy.

<span id="idhere"></span>

Good for just giving one word/sentence/phrase a style.

[Flisker]

Who thinks i should put this on Tutorials section.?

[Php]

thats good dan =]

[Raremandan]

I suppose that could be classed as spam . Although it's something nice and descriptive

Niceeeeeeeee

There are loads of CSS tutorials out there, better ones that that even, you use use CSS with XHTML complient to the standards of W3C www.w3schools.com

Thanks Dan, im learning CSS and i needed apart of that

Thanks, I aim to please, and any ideas are welcomes for the upcoming longer more advanced one where to go into Psueado.

Dan well done that helped loads!

Thanks for the rep bbz, and yes thats very handy, i'll make sure to put that into the next tutorial

Great tut, rep+

Also, this is very handy.

<span id="idhere"></span>

Good for just giving one word/sentence/phrase a style.

Personally I don't think it's worthy of the tutorials section, home to the greats of Charlie, James and Mike!

Who thinks i should put this on Tutorials section.?

Thanks; again you have any ideas for what to include in the next one?

thats good dan =]

Thanks to all the comments, + rep to all that I can!

[craigg.]

Nice and simple Dan. I'm sure inexperienced users of CSS will read this.

Good work,

- Craig.

[Mentor]

You need to exspand, it such as other ways of including it, eg style attribute or style tags for in page incluson.

Also you missed of Element's Which are pretty important, Since its how you would add backgrounds etc
body{}
or
div {}
or what ever, quite global, and quite useful "/
Plus maybe exspand on how to use some of the elmets, say positioning, relative and abosult for layer creation. or maybe how u add multiple attributes to a single css class etc etc "/