Styling your Webpage
Now let’s add some style to your content. We will give your div an id of main and we will make your header blue, your background a yellow, and your paragraph maroon. You will want to style your body to set the margins and padding to 0 in your website, choose the placement of your text, and assign fonts to your website. To align your website in the center of the page in both firefox and IE you will want to give your content div a margin of ‘0 auto’.
The body style will also be where you give your webpage its main background. You may have more then one background to accomplish different things. I used four background images in this website. Your code should look like this:
<head>
<title> title of your website </title>
<style type=”text/css”>
body {
margin: 0;
padding: 0;
background-color: #999900;
text-align: center;
font-family: arial, helvetica, sans-serif;
}
#main {
margin: 0 auto;
padding: 0;
text-align: center;
}
#main h1 {
color: Blue;
}
#main p {
color: Maroon;
}
</style>
</head>
<body>
<div id=”main”>
<h1>Cool Website</h1>
<p> This is my first website </p>
</div>
</body>
</html>
Be sure to save this as an .htm or .html document and then open it in your web browser. Click here to see an example of what your page should look like (The back button will not be in your webpage, it is to make it easier for you to navigate back to the tutorial page).
Leave a Reply