How to Build a Website from Scratch Lesson – 2


Web Page with a Separate Header Added

All right, if you were following along in Lesson 1 you should have a website that looks something like this.  In this lesson we will be breaking, adjusting, and playing with our CSS file until we get the hang of it.  Trial and error is really the best way to learn CSS and looking at the page we have right now, it needs a lot of work and a lot more style.  Lets start by looking at our CSS file from Lesson 1.

/*  This is what a css comment looks like  /
/
use these areas to make notes about the functionality of your css file /
/
css will be explained in more detail as we go, but for now we'll stick
to the basics /
/
the css below is going to control our page layout and positioning we will use a comment to
declare this as a "basic page structure" area /
/
BASIC CSS RULES /
/
For now all your styles will be stored in one style sheet
/* Don't make any inline styles in your page.
/* keeping an organized style sheet is the key to making any changes in the future. /
/
-----------------------------Basic Page Structure------------------------------/
body { /
body is a basic css selector /
background-color:black; /
this is a css declaration it must be inside of braces as shown {}/
}
/
This is the area we are going to use for our site container */

site_container { /* this is and ID selector it is only allowed to be used once per page */

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
min-height:600px;        /* this sets the minimum height of the white rectangle  */
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}


This is the code from lesson one.  We are going to add to and edit this file until we have something a little nicer looking.  Lets start with the more common question.  How the heck do I center my website in the browser?  This is a lot easier than it seems.  In our CSS file we have added a site-container which is the white area of your page.  If you’ll notice, this white area is stuck on the left side of the page.  The easiest way to fix this involves 2 things.

First, we need to define a width for our container, in this case it is already done.  The width has been set to 960 pixels.  Without doing this, our next step won’t work.  The next step is to define our containers left and right margins as automatic.  By doing this we are telling our browser to divide the remaining screen width (width -960) evenly between the left and right sides.  Add the following code below width:960px; in your css file.

   margin-left:auto;
margin-right:auto;

Just to clarify, your CSS file should now look like this…
/*  This is what a css comment looks like  /
/
use these areas to make notes about the functionality of your css file /
/
css will be explained in more detail as we go, but for now we'll stick
to the basics /
/
the css below is going to control our page layout and positioning we will use a comment to
declare this as a "basic page structure" area /
/
BASIC CSS RULES /
/
For now all your styles will be stored in one style sheet
/* Don't make any inline styles in your page.
/* keeping an organized style sheet is the key to making any changes in the future. /
/
-----------------------------Basic Page Structure------------------------------/
body { /
body is a basic css selector /
background-color:black; /
this is a css declaration it must be inside of braces as shown {}/
}
/
This is the area we are going to use for our site container */

site_container { /* this is and ID selector it is only allowed to be used once per page */

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
min-height:600px;        /* this sets the minimum height of the white rectangle  */
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}


Okay, so now save your page and open it in a browser. That change, though small, has greatly changed how our page interacts with the browser window. When you refresh the page it should look like this.

Centered Website Container

Centered CSS Container

Take a second and play with the browser window to see how the container interacts with window size. Now lets make some more changes so we don’t have to look at this ugly page anymore.  The first thing I would like to do is set the basic font family for the page.  The font family is going to instruct the browser which fonts you would like to have on your page.  It can be complex or very simple, but for now we are going to stick with simple.  To set a default font family for all of your pages we are going to modify the body selector in our style sheet.  Add the following code below the background-color of the body in your style sheet.

  font-family:Verdana, Geneva, Tahoma, sans-serif;

Save the file and refresh your page. The new page should look a little different. Notice that the fonts have changed and the “out of the box” default look to the page is starting to disappear. Easy enough right?  Lets do something a little harder.  Any good website is divided into parts.  Lets add a header to the site so that our title and description can be separated from our content.  There are a million reasons to do this, but for now we’ll just do it for style.

To do this we are going to have to change our html file as well as our style sheet.  First lets add a new id to our html file.  For simplicity sake, replace your default.html file with the following code.

<!DOCTYPE html><!--declares a document type for the browser to read-->
<!-- this is how you make a comment in html the browser ignores everything inside of these-->
<!--
this is
how you make
a multiline
comment
-->
<html><!--tells the browser that ths is where the html starts-->
<head><!--this is where the head starts. The head area is used to declare external scripts
and communicate other information about the pag to the browser.-->
<!--the area below is used for giving browsers an search engines information to find your site-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="my first site, tutorial, learning the web"/>
<meta name="author" content="BrianWK (your name goes here)" />
<!--this is the title you see in various places including search
engines and a the top of your browser-->
<title>My First Web Page</title>
<!--Below we are going to attach the style.css that we created so that we can apply some style-->
<link href="style/main_lesson_2.css" rel="stylesheet" type="text/css">
</head><!--this tells the browser the head has ended. This is not a page header-->
<body><!--This is where the page begins, the area that your visitor sees-->
<div id="headerarea">
<h1>Hello World!</h1><!--this is a heading tag-->
<h3>This is your very first webpage</h3>
</div>
<div id="site_container">
<p>This is an example of a paragraph. I like to use excerpts from Moby Dick when I mock up pages. </p>
<p>Call me Ishmael. Some years ago -- never mind how long precisely -- having
little or no money in my purse, and nothing particular to interest me on shore,
I thought I would sail about a little and see the watery part of the world. It
is a way I have of driving off the spleen, and regulating the circulation.
Whenever I find myself growing grim about the mouth; whenever it is a damp,
drizzly November in my soul; whenever I find myself involuntarily pausing before
coffin warehouses, and bringing up the rear of every funeral I meet; and
especially whenever my hypos get such an upper hand of me, that it requires a
strong moral principle to prevent me from deliberately stepping into the street,
and methodically knocking people's hats off -- then, I account it high time to
get to sea as soon as I can. This is my substitute for pistol and ball. With a
philosophical flourish Cato throws himself upon his sword; I quietly take to the
ship. There is nothing surprising in this. If they but knew it, almost all men
in their degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.</p>
</div>
</body><!--This Tag ends the body, and effectively the visible part of the page.-->
</html><!--tells the browser that ths is where the html ends the "/" is a clsoing tag-->

Note that we have removed the first H1 tag and H3  tag have been removed from the site container and placed inside a div with the id header area.  This effectively separates the “headerarea” from the “site_container” allowing you to style them separately.   Now lets add a new CSS selector for the “headerarea”.  In your CSS file add the following below the “body” selector.
#headerarea{
border:thin white solid; /* here we give our site container a border that is thin, white, and solid /
width:960px; /
this sets the width of the white rectangle /
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-color:#ffffff;/
this sets the background color of the rectangle to white*/
}

If you save both files and refresh your browser you should see this.

Web Page with a Separate Header Added

Separated Header Area

Well now it’s starting to look like a website.  We have two containers, our “headerarea” and our “main_container”, now let’s add a footer.

The first thing we need to do is add the footer_container to our default.html file.  Insert the following code directly above your closing body tag.

  <div id="footer_container">
<p>This is where our footer will go!</p>
</div>

Next we will add the corresponding CSS.  In our main.css file lets add the following code.  For the sake of organization, insert it after the #site_container’s closing bracket.
#footer_container{
border:thin white solid; /* here we give our site container a border that is thin, white, and solid /
width:960px; /
this sets the width of the white rectangle /
margin-left:auto;
margin-right:auto;
margin-top:15px;
margin-bottom:30px;
background-color:#ffffff;/
this sets the background color of the rectangle to white*/
}

This is the css statement that will control our footer area. So before you start messing with these file lets compare results. If you did this correctly your default.html file should look like this.  Until next time play around with these files and see what you can make happen.  Mostly just tweak the main.css file, change the values, colors, units, etc.  If you don’t break it you’ll never know how it works!  Just in case you do break something, the complete Lesson 2 files are included below.  Thanks for reading.

main.css

/*  This is what a css comment looks like  /
/
use these areas to make notes about the functionality of your css file /
/
css will be explained in more detail as we go, but for now we'll stick
to the basics /
/
the css below is going to control our page layout and positioning we will use a comment to
declare this as a "basic page structure" area /
/
BASIC CSS RULES /
/
For now all your styles will be stored in one style sheet
/* Don't make any inline styles in your page.
/* keeping an organized style sheet is the key to making any changes in the future. /
/
-----------------------------Basic Page Structure------------------------------/
body { /
body is a basic css selector /
background-color:black; /
this is a css declaration it must be inside of braces as shown {}*/
font-family:Verdana, Geneva, Tahoma, sans-serif;
}

headerarea{

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
margin-bottom:15px;
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}
/* This is the area we are going to use for our site container */

site_container { /* this is and ID selector it is only allowed to be used once per page */

border:thin white solid; /* here we give our site container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
min-height:600px;        /* this sets the minimum height of the white rectangle  */
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}

footer_container{

border:thin white solid; /* here we give our footer container a border that is thin, white, and solid */
width:960px;             /* this sets the width of the white rectangle  */
margin-left:auto;
margin-right:auto;
margin-top:15px;
margin-bottom:30px;
background-color:#ffffff;/* this sets the background color of the rectangle to white*/

}


default.html
<!DOCTYPE html><!--declares a document type for the browser to read-->
<!-- this is how you make a comment in html the browser ignores everything inside of these-->
<!--
this is
how you make
a multiline
comment
-->
<html><!--tells the browser that ths is where the html starts-->
<head><!--this is where the head starts. The head area is used to declare external scripts
and communicate other information about the pag to the browser.-->
<!--the area below is used for giving browsers an search engines information to find your site-->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="keywords" content="my first site, tutorial, learning the web"/>
<meta name="author" content="BrianWK (your name goes here)" />
<!--this is the title you see in various places including search
engines and a the top of your browser-->
<title>My First Web Page</title>
<!--Below we are going to attach the style.css that we created so that we can apply some style-->
<link href="style/main.css" rel="stylesheet" type="text/css">
</head><!--this tells the browser the head has ended. This is not a page header-->
<body><!--This is where the page begins, the area that your visitor sees-->
<div id="headerarea">
<h1>Hello World!</h1><!--this is a heading tag-->
<h3>This is your very first webpage</h3>
</div>
<div id="site_container">
<p>This is an example of a paragraph. I like to use excerpts from Moby Dick when I mock up pages. </p>
<p>Call me Ishmael. Some years ago -- never mind how long precisely -- having
little or no money in my purse, and nothing particular to interest me on shore,
I thought I would sail about a little and see the watery part of the world. It
is a way I have of driving off the spleen, and regulating the circulation.
Whenever I find myself growing grim about the mouth; whenever it is a damp,
drizzly November in my soul; whenever I find myself involuntarily pausing before
coffin warehouses, and bringing up the rear of every funeral I meet; and
especially whenever my hypos get such an upper hand of me, that it requires a
strong moral principle to prevent me from deliberately stepping into the street,
and methodically knocking people's hats off -- then, I account it high time to
get to sea as soon as I can. This is my substitute for pistol and ball. With a
philosophical flourish Cato throws himself upon his sword; I quietly take to the
ship. There is nothing surprising in this. If they but knew it, almost all men
in their degree, some time or other, cherish very nearly the same feelings
towards the ocean with me.</p>
</div>
<div id="footer_container">
<p>This is where our footer will go!</p>
</div>
</body><!--This Tag ends the body, and effectively the visible part of the page.-->
</html><!--tells the browser that ths is where the html ends the "/" is a closing tag-->

 


Join the discussion

Email addresses will not be published.
Comments will not be displayed until approved by an admin

4 Comments

  1. Comment by Reda


    hey beautiful blog site and web theme. I hope I’m not niyoanng you I just wanted to inquire precisely what wordpress plugin you utilize to show the most recent comments on your blog? I really want to do something along the same lines for my free iphone 4 website but I cant acquire the plugin or widget for it. Thank you for your time :)

    • Comment by BrianWK


      The recent comments are being displayed by the Default WordPress “recent comments” widget. The theme is CP-Minimal, but I have made a lot of changes. I hope this helps.

      • Comment by Dave Everitt


        A heads up: that’s a scam message – if you search for “hey beautiful blog site and web theme” you’ll find almost identical comments posted under a variety of names…

        • Comment by BrianWK


          Thanks, I figure as much but one got by me somehow. 101 of 100 comments I get are spam :)