Posts Tagged ‘ css step by step ’

Getting Started with CSS pt2

Coding the Header

<!-- This is a HTML comment-->
Untitled Document
<div id="container"><!-- Main Box -->
<div id="headr"><!--Header Box, for logos -->
<h1>My Site Name</h1>
<!-- Our Website Name --></div>
<!-- End of Header Box--></div>

If your following along with your own copy, we just laid the groundwork for the site. We told the browser where the CSS file is and started the ground work for the top of our site.

What does “div” do?

The div tag, is simply a hook for the browser to look in the css file. In our example above, it sees

the browser will run to our css file and look for #header, and then do as we instruct it.

CSS Header

/*This is a css comment */
#container {width:1024px;}
#header { padding-bottom:10px; border:2px solid #000;}
h1 {font-size:20px; color:#C00; text-align:center;}

Creative Commons License photo credit: sonicwalker
This is telling the browser, make a box that is 1024px wide. This number is based on screen dimensions. I added some padding, this makes makes space between the header and the other items on the page. Without it, the pages will touch each other. In terms of search engine optimization, and best coding practices, H1 means top importance on a page. I adjusted the size, by default H1 is very large. I added some color and aligned it.

From here its just a few more boxes (divs) and CSS to control them. The navigation introduces some new things.

Category: CSS | 1 Comment »