Step 4: Main Content 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.

CSS Example Website Step4
Main Content - Step 4.1

In Step 4.1, CSS3 style is applied to the articles.

In this step, line height, margin, width and float properties are applied to the articles.

The style is provided below with HTML comment explanation.

/* Main Content */

.Main {
	overflow: hidden;
	line-height: 30px; /* Specifies the line height of each line */
}

.Top {
	margin-bottom: 3%;
}

.content {
	width: 70%; 
	float: left;
}
		

Main Content 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 Step4