Part III: Creating a Site Style Sheet

This project uses the Magazine data source to provide all the content for the magazine. The content is stored in the database, but the formatting is not. Formatting information in the database is limited to simple paragraph delineation using the <P> tag. The style for your magazine site will be generated using a linked style sheet.

The style sheet for the site defines styles for the header and paragraph tags, which are used for different sections of a magazine article. Articles on the site use the following tags:

---

Article Section	Associated HTML Tag
Article Title	<H1>
Article Subtitle	<H4>
Section Title	<H2>
Section Text	<P>

---

Step 1

If you don't already have the Magazine project open in Visual InterDev, open it now.

To add a new file to the site, choose New from the File menu. In the New dialog box, add a new text file, name it MAGAZINE.CSS, and click OK. This is the file for the linked style sheet. Define the styles by adding the following code to MAGAZINE.CSS:

BODY {          margin-left:10px;         font:12pt/14pt "Garamond";         color:black;         text-align:left;         background:transparent;         } P {          margin-left:10px;         font:12pt/14pt "Garamond";         color:black;         text-align:left;         background:transparent;         } H1 {          margin-left:10px;         font:18pt/20pt "Arial Black";         color:black;         text-align:left;         background:transparent;         } H2 {          margin-left:10px;         font:12pt/14pt "Arial Black";         color:black;         text-align:left;         background:gray;         } H3 {          margin-left:10px;         font:12pt/14pt "Garamond";         color:black;         text-align:left;         background:transparent;         } H4 {          margin-left:10px;         font:14pt/16pt "Garamond";         font-style:italic         color:black;         text-align:left;         background:transparent;         } 

Step 2

Save MAGAZINE.CSS, and open DEFAULT.ASP in Visual InterDev. Attach the newly created style sheet to DEFAULT.ASP by adding the following code to the HEAD section of the page:

<LINK REL=STYLESHEET HREF="Magazine.css">