Constructing with CSS-P

Constructing your webpage with CSS-P

  1. Go to your Photoshop design. Select one rectangular area on the design. This will be a div. Measure (in pixels) how far that div is from the top of the page. Measure how far from the left side of the page. Measure how wide the area is.
  2. In the head of the HTML page, between the <style tag and the </style> tag, add a new entry: div.xxxx (xxxx stands for name of the div; give it an easy name to identify)
  3. Following div.xxxx enter the following information:
    div.xxxx { position:absolute; top:xxpx; left:xxpx; width:xxpx }
    (In place of “xx” fill in the numbers you measured in step one.)

4. Additional instructions you may want to include for div.xxxx:
margin: ; padding: ; background-color: ; z-index:

5. In the body of the HTML page (between <body> tag and </body> tag, place <div class=”xxxx”> leave space and then </div>

6. In between the open div tag <div class=”xxxx”> and close div tag </div>, place the contents that go into this div. For instance:
<div class=”mainpic”>
<img src=”p400a.jpg” width=”400” height=”280”>
</div>
or
<div class=”article”>
<h1>Headline of Article</h1>
<p>This is the content of the article. There are a number of paragraphs that follow here.</p>
<p>And this is a second paragraph. Each paragraph begins with an open paragraph tag and ends with a close paragraph tag.
</div>