CSS for Dummies

PART I: Introduction

So, you want to make a website right?

Well you have to use the best tools out there, and there's no better tool to use than CSS...

What is CSS? It's an acronym and it stands for

Cascading
Style
Sheets

...As you may (or may not) guess, this is a SHEET of code, that defines the STYLE of the site in a human language and a CASCADEesque structure...

PART II: recognizing CSS and including it

Remember, CSS is your friend, and as part of your friendship, you must RECOGNIZE IT! (quite easy)... This is CSS:

table.layout{  background-image: url(images/layout_02.jpg);  background-repeat: repeat;  width: 800px; } table.content{  background-colro: #eee;  width: 500px }

Let's see what each part means... The First Part (in the past code is table) is the element we are editing and it can be ANY HTML TAG(textarea,p,a,hr,br,img,etc) !!!

The second part, separated with a period is the CLASS of element we are editing:

CLASS? What the hell is that?

Simple!

what if you want to make INDIVIDUAL ATTRIBUTES for different elements using the same tag... Well, you give it a class... a class can be anything you want (poo, layout, content, top, bottom, centered) and it's to make each item individual...

Usage? Quite simple, just add a class attribute to the tag you want to:

<table class="layout"></table> <div class="centered"></div> <img class="ava" src="/img_articles/5516/images/ava4.jpg" alt="something" />

With this, you are making it unique!!!

Now... the next part is a "{" (left curly brace)... this tells us that from that point we are talking about Properties for the stuff we told it about earlier... and that we are talking about the same element untill we use a "}" (right curly brace)...

Now, the content is separated in three important parts

1: The Property: this is the thing that goes on the left, and it says what we are talking about (background-color, margin-x, color, font-weight, font-decoration, border, etc.). (check a list of Properties and Attributes in Part III)

2: The attribute: this is the thing we are going to change in the attribute (#fff, repeat, auto, 5px, fixed)

3: the semicolon: ";" ... why is this so important? Because it tells the code we are done talking about the property... if we don't tell it that, it will go crazy and probably die (a.k.a the code won't work)... NEVER FORGET IT!!! (also called a line break)


#808080 Ok... but how do we integrate this to our website???

EASY!!! save the CSS to a file (let's say... style.css)... then, at the head of your body add this:

<link rel="stylesheet" type="text/css" href="/img_articles/5516/style.css" /> (close the tag with > instead of /> if you are using html 4.01 or less)

Well, now we identify (i hope) CSS and can easily edit anything... we can also put it on our website, but, what can i edit? well, this moves us on to Part III!!

PART III: Properties and their Attributes

Ok... i was making a list, but i discovered i was too lazy to make it... so i add a link to the w3c schools CSS2 REFERENCE!!!

Click Here For A Good Piece Of Reference

PART IV: Farewells

Now that we can easily include CSS in our websites we don't need to change each element of the site when we need some style changes... we just edit our good friend the CSS :) How handy.

I hope you learned with this :)