Talon's Blog

Back to Talon's Blog

Introduction
Some people might know, I planned to use this Blog to make Tutorials.
Many where asking me about how to use CSS for they list styling. That's why I start of with some CSS training. I'm really going for the fact you are dumb and explain every step in the fullest detail it would need!
There are 3 things you can do:

• Saying, "okay, I'm dumb, I'll listen carefully, Sensei!!"
• Saying, "Baka ya nai! (I'm not dumb!)" and skip some steps (but please use firefox first after reading further)
• Close this blog, write my name in your death note

CSS?
CSS is a way to write code and can only change apperience, nothing more, nothing less. The best thing about CSS is that it overwrites HTML styling.
But to understand CSS you'll have to understand the html source first.

HTML?
Welcome to the internet!
Nearly every website you visit is build with HTML and every website has his source code.
And know what?
you can see this source code! just by pressing you right mouse key and select view source!
C'mon try it! Don't be shy!
leaving the jokes aside, there are many internet users who don't know this and some wish they never learned about it.
Some users Don't even know what IE, Firefox, Opera, etc is because they are just using "the internet" and laugh about the Stupid mistake that Microsoft didn't fix the Blue E wich should be a blue I. Stupid mistake, isn't it? Enough of the lauching matter, we're here to style some lists!

Understand the HTML source
Some might know this for some HTML is new. HTML pretty easy build, it can't even be called a scripting code. If you wan't to do something just open a tag and if you're done just close it:

Konichiwa!

would make the text like this:

Konichiwa!

Everything is between tags, even tags are in tags.
Some of those tags have attributes:

This opening tag would make a table wich has a width of 600 pixels. 
Let's add CSS to the story!
I'd say somewhere CSS overwrites HTML, didn't I?
CSS can give tags attributes to HTML tags, let's start another table:
<style type="text/css">
	Table{ width:600px;}

omg! I'd add width="700" to my table but it will be 600 pixel wide! That's because CSS says Tables should be 600 pixel no matter what. 
I love it, because this will really make ALL you tables in your HTML 600 pixel wide and it really will end up in a mess. 
Anyway, for our list styling we only need to look at the next 4 tags: 
 
 
 
and we need to look at something else, some attributes called class!
Again some code:
<style type="text/css">
	Table{ width:600px;}
	.yay{ width:500px;}

To cut it down, the table will be 500 pixel wide! I did gave the table a class wich referent to the in css given class.
If within the CSS code is a dot in front of a tag, it means it's a class.
Homework
This is the very basic of html and CSS and if you accepted me as a Sensei you'll get some homework from me! (you're free too choose to do them)
This homework will be
"go to you list and look at the source" 
at the top is the CSS defined and some lower you'll find most of the 4 nessasary styling tags. look at some classes and how those work with your CSS
this gives me time to write a part 2 wich will be about.
Colors 
Borders
Position of your list
Adding external images
Being creative
Comments are welcome
Corrections are also welcome (I'm human o_o) 
Saying what you want to learn is welcome