Step 2: Basic CSS3 Tutorial

<< Index

This is what we are going to create in this step by step tutorial. Click on the image to view the website in new tab.

CSS3 Example Website Step2
Basic CSS3 - Step 2.1

In this step basic CSS3 styles will be applied to the website like background color, section borders, etc.

Just basic knowledge about CSS3 is enough for this step. Its just adding simple styles like background, text-align, etc.

 /* Website body */
 
body {    
	clear: both; /* Clears float value */
	margin: 50px auto; 
	width: 80%;
	text-align: left;
	background-color:#EEE; /* Sets background color to light grey */
}

/* Main content area - Articles and Side-bars */

.Main {    
	background-color:#FFF; /* Sets background color to White */
	border-radius:5px;
	overflow: hidden;
	line-height: 30px;
}

/* Article contents */

.content {  
	padding-left:2%; 
}
		

Basic CSS3 Step is now complete

Now the website will look like this. Click on the image to view the website in new tab.

CSS Example Website Step2
Next Lesson > Step 3: Header