Colours for visualizing, not my fault if you go blind. :B

(may 23, reworked link section. USE BBCODE INSTEAD OF FILTERED HTML )

Remember to put your CSS under the cut!
Set your Input Format to BBCode!
Write all CSS in one line!


You don't need to credit me for anything.

CSS Templates

The easiest way yo use these templates is to change #ffffff hex colours and replace background images.
Experiment with the colours to see what is what.

ONE

simplest and easiest to edit; lacking refinement

TWO

simple, easy to edit; slight transparency effects

THREE

refined, transparency effects, right-aligned sidebar; code for 'normal' sidebar in comments (page 2)

FOUR

3 Versions. refined, heavy page altering, lots of transparency

This Blog

This blog is only useful to you when you have any pre-knowledge of CSS!
Otherwise you will not gain much from it. This blog shows the "names" of different parts through different colours.

If you want to understand CSS, check out * {CSS Basics} How Do I CSS?

BLOG CODE
<style>body{background:#ffffff}#logo{background:#FF99FF}#header{background:#cc99cc}#header-region{background:#996699}#center{background:#ff0099}.menu{background:#ff3333}.sidebar{background:#ff6666}.item-list{background:#990000}.breadcrumb{background:#CCFFFF}#wrapper #container #center .right-corner .left-corner{background:#00CCFF}.node{background:#0033FF}.submitted{background:#00cc99}#tabs-wrapper{background:#339999}.picture{background:#66FFFF}.links{background:#003399}#comments{background:003300}.comment.odd, tr.odd, tr.info{background:#99CC33} tr.even, .comment.even{background:#ccff66}.new{background:#FF9933}.comment div.links{background:#FFFF00}</style>

Colours for Sidebar Links
<style>.sidebar h2{color:#ff0000}div#sidebar-left.sidebar a,div#sidebar-left.sidebar ul.menu a,#block-user-1.clear-block.block.block-user a{color:#ffff00}div#block-user-1.clear-block.block.block-user a{color:#ff00ff}div#sidebar-left.sidebar a:hover,div#sidebar-left.sidebar ul.menu a:hover,div#block-user-1.clear-block.block.block-user a:hover,.submitted a:hover{color:#00ff00}div#sidebar-left.sidebar h3{color:#00ffff}#block-user-3{color:#000000}</style>

MAKING A CUT (Terabetha)	BASIC CSS	TAB-LAYOUTS	ORGANIZE YOUR CSS (Ikaron)
Art, Design, Coding Links	Explaining Divs (shamiya)	Div Layouts (shamiya)	Zebbie's CSS Help - Fun With Coding	Iaurdagnire's about:blank

OUTSIDE (RED & PINK)

body
(includes: #logo #header #header-region #center .sidebar .menu .item-list
anything pink and red here)

#logo

#header

#header-region
(includes: .menu)

#center
(includes .sidebar .menu .item-list)

.sidebar
(includes: .menu .item-list)

.menu

.item-list


INSIDE (BLUE)

#wrapper #container #center .right-corner .left-corner
(includes: .breadcrumb .node .submitted(blog only) #tabs-wrapper .picture .links
anything blue)

.breadcrumb

.node

.submitted
(in comments and blog)

#tabs-wrapper

.picture

.links

COMMENTS (GREEN)

#comments
(includes: .comment.odd, tr.odd tr.even, .comment.even)
(only visible when you have "background:none" on .comment.odd, tr.odd and tr.even, .comment.even )

.comment.odd, tr.odd
(darker comments)

tr.even, .comment.even
(lighter comments)

.new
(the "New" that appears by a new comment)

.comment div.links
("edit" and "reply" buttons, although I am not sure if it affects all links in comments)

CSS rule set
I am not a professional, so I can't guarantee accuracy. My english is not perfect either, but I hope this will help you understand CSS a little bit better.

Selectutorial
Very helpful site if you want to understand CSS better. I highly recommend looking through it sometime.

Build of a basic CSS code:


The start tag and the end tag define where your CSS code starts and where it ends.
The Selector "selects" the element of the page that is affected by the rule set. If you want to define more than one Selector at once, you can seperate them with a comma.
  example
      body, .sidebar {color:#ffff00}
The Declaration Block is the container for Declarations. It stands between curly brackets.
The Declarations tell the browser how to draw the selected element.
(Not pictured: A Declaration splits up into Property and Value. The Property is the aspect that you chose to style (like font, background), while the Value is the exact style for this Property (like font style, background color).)



Link colours
To change the colour of links in different parts, you have to add an "a" at the end of your Selector.
  example
      body a {color:#ff00ff}
If you want to change the link-color when you hover your mouse over it, you additionally have to add :hover, which is a so-called Pseudo-Class
  example
      body a:hover {color:#00ffff}
You can apply these Pseudo-Classes not only to links, but pretty much any Selector.

Read more about it here!

If you have any problems, questions, ideas or find any mistakes here, please let me know!
Enjoy. ♥