HTML Project

Chapter: 3

Let's make it Enjoyable

adding stylesheet and Image
Create two new folders in your project folder.
and rename them "image" and "css".

Create new CSS file

Step-1
Open Notepad++
Click on "file" menu and hit "new" or hit ctrl+N on keyboard

Step-2
Click on "file" menu and hit "Save As" or hit ctrl+Alt+S on keyboard

Step-3
Select "css" folder.
Give file name: "Style.cc"
set Save as type: "All types(*.*)"
this will be our StyleSheet

now put any jpeg/jpg image in our image folder

Now insert an image in the image folder which you like or you have.
for better result image should be 3:1 ratio
(for example width = 900px and height = 300px)
this will be our head image
Step-4
Add some html code in index.html file
or copy and paste the following code in it just after "<body>" body tag
and save index.html file
<div id="myheader">
	<h1>this is my Header heading</h1>
	<h3>this is my Header Subheading</h3>
</div>

Write some code in style.css file

Step-5
Write some code in style.css file
or copy and paste the following code in it
and save style.css file
Note: We Suggest for write it yourself not for copy paste
/*# is use to declare "id"*/
#myheader{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*/
}
Step-6
Note: Most Important thing.
without calling style.css file in our index.html it will not work

how to call css file in html page?
Write code in index.html file
just after the "<head>" tag
here is the code
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!-- "css" declares css folder and "style.css" is name of our css file -->
Step-7
Now it's time to see the result
go to project folder and open index.html file in your browser
(for example right click on it and open with firefox)
its looks like this
Oops.. Something Wrong!

Step-8
Go to index.html and add add a division in body tag.
and set id wrapper for it
just below the <body>
<div id="wrapper">
and over it just above the </body>

	<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>
	
		<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><!-- Division over here -->
	</body>
Step-9
Go to style.css and add height 300px in #myheader{}
#myheader{
height:300px;}
after this add code for wrapper id
/*code for Wrapper id*/
#wrapper {
	position: relative;
	width: 900px;
	margin: 10px auto 0 auto;
}

We done it

Now it's looks like enjoyable
But the goal is far away