Now let's get on with some styles ...
- Code: Select all
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-US">
<head>
<title>Some title</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" media="screen" href="styles.css">
</head>
<body>
<div id="branding">
<h1>Seo Genius</h1>
</div>
<div id="content">
<h2> This website provides a guide to the basics of SEO.</h2>
<p>SEO means Search engine optimasation, basically SEO is used to rank you page higher on search engines, such as 'Google' and 'Yahoo'.
Some websites use a SEO company, and some people do the SEO themselves, which ever you chooses, it is important to get it right.</p>
<p>If there are any words that you do not understand, just click on the '<a href="dictionary.php">dictionary</a>' link, for a full list of the 'seo words'. </p>
<p>Everyone would love to be No.1 in their category, but what if you could be No.1 in every category in the search engine results. If someone searched for hotels, boats, phones, whatever: you want your website 'decorators.com' to be the first item on every list. And what if you could be the first 100 positions for lots of searches, you would really be bringing the business in then.</p>
<p>Back when search engines used only the 'meta-keywords' to index the page(s) 'spammers' discovered that someone could type in computers, windows, kylie and many more top keywords in their websites meta-keywords, and when people searched for these they would find them selfs on the spammers websites, which had no revelance what so ever to what the person had searched for. </p>
<p>Unfortunately it DOES NOT work like this.</p>
<h3><a href="What-is-seo.php">WHAT IS SEO ?</a></h3>
<p> USEO means Search Engine Optimisation.</p>
<p>We optimise our websites, or websites we are building, to get good rankings on search engines. Obviously everyone want the top spot on 'Google' and 'Yahoo' to get the most traffic into your site, but you need to do your optimising righ to be able to try and achieve this. We optimise our websites in various ways, there are some <a href="critical-componants.php">critical componants</a> of SEO that will be a major player in your SEO. Your search engine ranking depend on quite a few things, theses are all explained in the links. </p>
</div>
</body>
</html>
First things first, I started dropping the universal selector ( * ) lately because I noticed that was reseting the margin only to put them back really so ... for this instance I will not use it just to show you.
Let's remove the margins and padding for body
- Code: Select all
html, body {
margin: 0;
padding: 0;
}
I always keep those separate that way, if I want to reset list I can just add them there.
Now ... if you want do remove the white-space at the bottom that's caused because of screen resolution, just apply the blue background to the body. We'll add the fonts there and the color of the text
- Code: Select all
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, sans-serif;
background-color: #09f;
color: #fff;
}
Now, let's deal with the header
- Code: Select all
<style type="text/css">
html, body {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, sans-serif;
background-color: #09f;
color: #fff;
}
#branding {
background-color: #c3c;
margin: 0;
padding: 40px 0 0 0;
text-align: right;
}
Now ... if you save this and view it, you'll notice the blue background peeking above the header, that's because the <h1> element we use has a margin-top default value and it's pushing the header down. So ... let's remove that
- Code: Select all
html, body {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, sans-serif;
background-color: #09f;
color: #fff;
}
#branding {
background-color: #c3c;
margin: 0;
padding: 40px 0 0 0;
text-align: right;
}
#branding h1 {
margin-top: 0;
}
Now ... on to the content {
- Code: Select all
html, body {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, sans-serif;
background-color: #09f;
color: #fff;
}
#branding {
background-color: #c3c;
margin: 0;
padding: 40px 0 0 0;
text-align: right;
}
#branding h1 {
margin-top: 0;
}
#content {
padding: 10px 40px;
}
The padding 10px 40px; is what will give you your space on the sides
And instead of having in there, just set the margins to your <p> elemen
- Code: Select all
html, body {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, sans-serif;
background-color: #09f;
color: #fff;
}
#branding {
background-color: #c3c;
margin: 0;
padding: 40px 0 0 0;
text-align: right;
}
#branding h1 {
margin-top: 0;
}
#content {
padding: 10px 40px;
}
p {
margin-bottom: 10px;
}
Hope that helped.