Alright this is another css layout, its alot cooler than the other one and is also 3 column layout with css!

Lets get started....

Well we need a blank html sheet dont we?

well here it is:



If you read that code you can see the DOCTYPE is Xhtml Strict, thats because its going to be XHTML Strict :D!

It also has meta tags, wondering what they are? well ill explain that later :)

First for the CSS, All the upcoming codes that i put will be in the tags!

Css is like this:

A little information on using selectors...

First if you make a you must make the name like this in the css: .whatever { property: value; } and if you use you must use this code in the css: #whatever { property: value; }



We need a body CSS code....



Alright, well let me tell you what that code does and how the css works...

Note: Please do not copy and paste, you learn nothing from doing that....

Well you see each of them have that syntax... the Font-Family: arial,sans-serif; is just the text you want to use on the site, if you want one that you want just add it there. the color: #333333; is just the default font color if the other css propertys do not define one... Feel free to change that too. The margin is a very important property in CSS, it can move the things around on the screen, to anywhere... the padding adds some space between things...

Next for the links, these are very important in ANY layout you make!!!!!

Note: If you are writing the css code for any links in css, it must be a:link, or a:visited, or a:hover... also a:hover MUST come behind a:link, and a:visited, if it doesnt it wont work.



Alright the a:link selector value is the default color, decoration for any link on the layout... Right now it has a color of #006699, thats a light bluey color, and the property text-decoration is important if you want some things added to your links... right now its at none...

Here is a picture of what that code does to the link:



Why did i make it like that? So it would match the rest of the layout, with these CSS codes it would be a default link color set by the internet or whatever, which is blue and red...



That is a:visited, a:visited means that if you click a link, and go back to that page, the links will changes color, but if you set it to the same color as a:link as ive done here, it wont change any colors... if you want it to, feel free to change it.

Now last code for the links! The coolest one, a:hover!



Alright, when you put your mouse cursor over a link it can change color or remain the same, well it remains the same here, if you want change it. You notice the text-decoration has changed! It now has a underline once you hover over it!

Here is a link of what that does:



Well we are done with the css codes for links, but we still got a lot more code to do!

If you havent noticed yet, im just doing default decorations on the page before i get to the main stuff, i think it makes the CSS code look neater....

Now time for some Headings! We are only using 2 in this layout... For those we dont know headings make text bigger and bolder pretty much.

Heading 1 ( also known as h1)



Alright as you can see, we have another font-family property, so that means it will be a different font than then the default text! Also font-size is in there, hmm WHAT COULD THIS MEAN! oh yeah it just increases the font size! and you should know what the color property does by now... Its also a darker blue color... you guys know what margin and padding does so no need to explain!

Heading 3 time (also known as h3)



Well this one's font doesnt change! and the font size isnt really bigger just bolder, also has a dark blue color! Feel free to CHANGE anything you want, just make sure you know what your doing!

Here is a picture of using h1 and h3 with these css codes:



Why did i put that? Well you need a site title dont you? Thats what heading 1 (h1) is used for, it makes the site name stick out so you can read it easily.

Now for h3, what that is used is for mainly titles of things, like the navigation bar and stuff. it also makes it stand out and easier to read.

Headings, Check! Alright now we move on to Unordered lists (aka ul)



Well that is a default Unordered list code, alright well the list-style-type means if there is a unordered list in the layout it will have a square next to the text.

Here is a picture of using that default code:



Alright we are done with the default decoration pretty much, now we move onto the CSS code that will structure the layout.



This should be your CSS code if you followed the tutorial exactly.



If your wondering when we are gonna add content and stuff just wait... im saving that for last.

First the container thing that will control the layout this is also where you can get confused!....



The padding there has alot of values! well instead of writing them out, i did them in one declaration. Alright from left to right on the padding values: top right bottom left. Alright you see width has a percent value, well if you use percents its tougher, but if your looking for a full screen layout which we are going for its way easier! and the 100% means it extends to the edge of your screen on ANY resolution! Oooo! looky borders! well it has a border for the top and bottom, and its 1 pixel in height and has a color of #cccccc which is a medium grey. Feel free to change stuff

Now for the Navigation css code!



Well first off, we have a float: left; many people seem to get confused and have errors with these!! which is bad! well what it does it is moves the thing to the left, the only values for floats is left and right. and then it has a border for right and the bottom! its one pixel in height and a color of medium grey, alright im going to stop explaining the borders since you should know them by now :)! Also has a width of 20%, which is about 1-2 inches or so, well its pretty big...

Time for headlines! Thats right we have headlines! this will be located on the right!



HEY! looky what we have here! float: right;!!! Well since we have that it moves it to the right! and a padding-right property of a value of 20 pixels, that just moves the text to the left a bit.... and has some borders.

Time for the content section



Another float! coolio! well its floats it to the left, well it doesnt really move it to the left mainly keeps it in the middle since there is another float: left; and it has a width of 55% which is pretty big since its for content :)!

Alright the footer code thats coming up is our final design touch pretty much... after that we start doing more advanced decorations on our layout.



First, clear: both; most imporant property and value if you use floats, this makes the floats not screw up in the final design, its a little hack pretty much. if you EVER use floats add that at the footer css code or something. alright the it has a border on top of it, font size of 75%, bit smaller than normal, and the default text is greyish, also the margin-top: 5px; just pushes the thing down a little bit away from the other stuff. and has alot of padding, just makes it look cooler.

If you think your near done with css think again, we got over 15 more :), told you it was big :)!



Current CSS Code:



Time to start adding some more decorations and other things...

Site name css code:



alright well we have a some margin which is 0 so dont worry about it, and padding... it just moves it down and to the left.... and a border of grey...

Next im going to give you 2 css codes...



Thats the welcome part, the first code it just makes the font size is smaller and has some padding... then for the welcome h3, well thats our heading 3's that we will use for the title of it, its aligns the text to the left and has alot padding...

Time for the News part, which we will use to make news posts look better!!



Well it has another clear: both; just does the same thing as the clear: both; on the footer.... has some padding, and smaller than normal. the #news p just add's padding to the news when we add a to it.



Time for some navigation codes!



Well you see it has a:kink and a:visited on it for unordered lists! well this is possible to have more than 2 selectors for links on one line. it just displays a little block for the unordered lists.

More navigation css codes.



First #navigation ul, it has a list-style of none, which has nothing infront of it. margin and padding have a value of 0 so dont worry about it.

Second the li, it has a border underneath of a grey color.

and the html>body #navigation li just fixes stuff in Internet Explorer.

We are getting close to finishing the CSS code.

Time for main navigation codes



Thats the main navigation codes for text, we still have links after this. well only thing there is to notice is the font size, kinda smaller than normal... then the main navigation h3 just adds come padding...

Time for main navigation links :)



Well for the #mainnavigation a covers a:link and a:visited so it has a border on the top and some padding...

And it has a A:Hover property, so when we hover over the link background will change!! it changes into a darker grey.



Alright now im going to cover all the latest ( latest tutorials, latest downloads ) at once...



Well nothing to much to talk about really, just adds padding changes font size...

Time for our last 2 CSS CODE! B)



Just some decorations for our latest headlines.... nothing to big... padding, change in font size, the usual!

Well we finished our CSS CODE!

Final CSS code:





Time for our final part! The divs and content!

Now we start working inbetween tags.

Im going to give you all the div tags we will be using, then we will start adding into them and ill explain, well not to much explaining since there really isnt any to it...



Add that into the body tags, as you can see there are our names of our css code selectors!!

Alright now we get started into the code, well in that you can add your site name or whatever you want!

Now time for links in the main navigation!



Add that code into

Still a bit more links :)

Add the up coming code to the first



Add the upcoming code to the second





Time for headlines!

Add the headlines code that is coming up to:



Alright we got the links and headlines done... time for the content and footer!

First we are going to work on the content.... this will include the Welcome and Real Content! Add the content code coming up in:



Well Content done now!



Time for our final thing the footer!

Add the upcoming code into



Well you see it has a well thats a HTML Entiny that shows a copyright symbol!

Well the design is done, and it is ALL XHTML Strict Validatable so far! Save it as index.html

Now time to take out the css code and add it to a seperate file....

so copy all the CSS code, DO NOT INCLUDE THE STYLE TAGS! and open notepad and paste it in there and save it where your INDEX.HTML file is as style.css!

Then add:



Alright if done correct, it should be the same....

Final design code:



Add your site description and keywords in the spots! this makes search engines pick up those meta tags and displays them when someone searches your site name in the search engine.



Alright thats all folks!

Here is the final design view: Click Here

Hope everyone likes this tutorial!!! Remember be creative and change the stuff you want to change!

Added a link to twodded and xhtml, css validation links to it :)

Here is a download link for my version that is completey validatable:

Twodded Tutorial Layout