CSS Basics tutorial #1

rockinliam · Post by **rockinliam** » Mon Mar 22, 2010 11:31 pm

Note: This tutorial is designed for people who have zero programming knowledge and want to build basic websites in a professional manner.

Welcome to Rockinliam's basic CSS tutorial.

This is a tutorial designed for people with zero knowledge of HTML or CSS, i hope that throughout the next 20 - 40 mins of your life i can enlighten you on the dark arts that is web development. What is CSS? CSS stands for Cascading Style Sheets and is used to define the Style or look of your website without the use of tables.

Part One: Setup
1) Firstly open up your HTML editing software, this maybe dreamweaver or notepad.
2) Create two new documents one named: index.html and the other named style.css

Part Two: Introduction to DIV tags.
In this tutorial we shall be creating divs. Divs (Divisions) define the structure of the webpage, they define the sizes of each section on your webpage how its coloured etc. In short DIV tags are probably the most important feature in css.

DIV's are structed like so:

Code: Select all

.divname {
     feature:defintion;
}

You must use a full stop before the name of your div or else your browser wont interpret the code as a div, unless you are defining things globally like "body" or "p" for paragraphs.

Part Three: The main CSS code.

Open up your style.css

The main body:

Code: Select all

body {
	background-color:#00FF00; 
}

This div defines the values of everything within the main body of our web page, it is defining the background-color as yellow. You may also notice the after i have defined the background-color as yellow there is a semicolon (;), this ends each statement and without it the code would not work.

Underneath the code you have just written add this.
The wrapper:

Code: Select all

.wrapper {
	width:850px;
	margin:0 auto;
}

This div is a very special div, it defines the maximum width of the webpage to 850 pixels wide. The "margin:0 auto;" statement centers the webpage by adding an equal amount of space between each side of your defined width, without a set width this statement will not work.

The banner:

Code: Select all

.banner {
	width:850px;
	height:125px;
	background-color:#000000;
}

The banner div defines how the banner of the webpage will look. It is 850 pixels wide, 125 pixels high and is coloured black. I could have an image instead of color, i would use "background-image:" instead, but for our purposes colour will do fine.

The Side Bar:

Code: Select all

.sidebar {
	width:125px;
	height:500px;
	background-color:#FF0000;
	float:left;
}

As you can see again i defined the width, height and colour. I also use another tag that allows me to have divs side by side, and that the "float:left;" statement. The float statement allows divs with the float tag to line by the side of another if there is enough room.

Content area:

Code: Select all

.content {
	width:725px;
	height:500px;
	background-color:#FFFFFF;
	float:left;
}

I have done the same as before and have included a float tag to allow my content and sidebar divs to line up side by side.

That is our incredibly basic CSS sheet complete, but now we must get it to work in a webpage.

Part Four: HTML
I hope you know a small amount of HTML, if not, it is not a problem.
HTML is not a programming language it is a markup language that define how text etc will look and how it will function.
HTML is started like so:

Code: Select all

<html>

and ended like so:

Code: Select all

</html>

Open up the index.html you made earlier.
Input this HTML:

Code: Select all

<html>
<head>
<title>Basic CSS Tutorial</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div class="wrapper">
	<div class="banner">
    </div>
    <div class="sidebar">
    </div>
    <div class="content">
    </div>
</body>
</html>

The first thing i do is within the head of my site i attach my CSS "<link href="style.css" rel="stylesheet" type="text/css">"
Within the body of my HTML i implemented my Divs using "<div class="">" This tells the browser that i would like to style anything inside the Tag with my CSS. The div is then closed with the </div> tag. You may also notice that all my divs are inside my wrapper div, this is to keep my site together and centered.

You may now load your index.html in your browser and you should see a group of multi coloured boxes on the screen, congratulations this is your first styled webpage. Next time i will show you how to turn this from a group of boxes into a more substantial webpage.

Post by **hallsofvallhalla** » Tue Mar 23, 2010 1:41 am

awesome man thanks!

jpoisson · Post by **jpoisson** » Tue Mar 23, 2010 3:14 am

Impressive. I like it, definitely can be turned into a series

rockinliam · Post by **rockinliam** » Tue Mar 23, 2010 7:24 am

I'l definitely try and make a little series.

CSS Basics tutorial #1

CSS Basics tutorial #1

Re: CSS Basics tutorial.

Re: CSS Basics tutorial.

Re: CSS Basics tutorial.