HTML Project

Chapter: 4

Let's align text and divisions

align text and divisions
Start from style.css file

Open style.css file

Step-1
Write Some code just after #myheader{}
Note: You can write it anywhere but in sequence it will be easy to find
/*this is for Header heading*/
#myheader h1{
color:#ffffff;
padding-bottom:25px;
position: absolute;
bottom: 0;
right: 20px;	
}
/*this is for Header Subheading*/
#myheader h3{
color:#ffffff;
position: absolute;
bottom: 0;
right: 20px;	
}
now add a line in #myheader{}
position: relative;
Step-2
now go to index.html file
and put the welcome paragraph in a division
with class name "col_two_third"
<div class="col_two_third"><!-- col_two_third Start here -->
		<h1>WELCOME TO Free Education</h1>
		<p>Free Registration
		You can learn so many subjects here like...
		Bootstrap,html,php,css etc.
		You can ask questions here, as well as you can answer the questions asked by any other user
		You can also write blog to express your thoughts and views
		You can ask for help for project in any subject 
		You can also ask questions in Hindi</p>
	</div><!-- col_two_third over here -->
Step-3
add code for col_two_third class in style.css
or copy and paste the following code in it
/* . is use to declare "class"*/
.col_two_third {
	width: 62%;
	float: left;
	padding: 0;
	clear:both;
}
Step-4
Where the division<div class="col_two_third"> is over, after it add new division in index.html
with class name "col_one_third_last"
now add some element in this division
like heading and paragraph or copy and paste the following code in it
<div class="col_one_third_last"><!-- col_one_third_last Start here -->
		<h3>Hypertext Markup Language</h3>
		<p>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web.</p>
	</div><!-- col_one_third_last over here -->
Step-5
Last thing
add code for col_one_third_last class in style.css
or copy and paste the following code in it
.col_one_third_last {
	width: 33%;
	color:#666666;
	float: right;
	padding: 0;
}

Finally your files look like this

style.css
/*# is use to declare "id"*/
#myheader{position: relative;
height:300px;
width:900px;
background-repeat: no-repeat;
background-image: url('../image/1.jpg');/* "../" declares Up one level of folder, "image" declares image folder and "1.jpg" is name of our image file*/
}

/*this is for Header heading*/
#myheader h1{
color:#ffffff;
padding-bottom:25px;
position: absolute;
bottom: 0;
right: 20px;	
}
/*this is for Header Subheading*/
#myheader h3{
color:#ffffff;
position: absolute;
bottom: 0;
right: 20px;	
}

#wrapper {
position: relative;
width: 900px;
margin: 10px auto 0 auto;
}

/* . is use to declare "class"*/
.col_two_third {
	width: 62%;
	float: left;
	padding: 0;
	clear:both;
}

.col_one_third_last {
	width: 33%;
	color:#666666;
	float: right;
	padding: 0;
}

index.html
<!DOCTYPE html>
<html>
<head>
	<title>my first web</title>
	<link href="css/style.css" rel="stylesheet" type="text/css"/>
	<!-- "css" declares css folder and "style.css" is name of our css file -->
<head>
<body>
<div id="wrapper"><!-- Division Start here -->
	
	<div id="myheader">
		<h1>this is my Header heading</h1>
		<h3>this is my Header Subheading</h3>
	</div>
	
	<div class="col_two_third"><!-- col_two_third Start here -->
		<h1>WELCOME TO Free Education</h1>
		<p>Free Registration You can learn so many subjects here like... Bootstrap,html,php,css etc. You can ask questions here, as well as you can answer the questions asked by any other user You can also write blog to express your thoughts and views You can ask for help for project in any subject You can also ask questions in Hindi
		</p>
	</div><!-- col_two_third over here -->
	
	<div class="col_one_third_last"><!-- col_one_third_last Start here -->
		<h3>Hypertext Markup Language</h3>
		<p>Hypertext Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS) and JavaScript it forms a triad of cornerstone technologies for the World Wide Web.
		</p>
	</div><!-- col_one_third_last over here -->

</div><!-- Division over here -->
</body>
</html>

We done it

Now open index.html file in browser
But the goal is far away