Stinkin Style Sheets...HELP!!!

[jizbot]

all im tryin to do is create a few small things.
i want the title of each of my news posts to be a certain color, font, and size.
i want the subtitle (like date & time of news post) to be another size and font
and i want the text paragraphs to be another size.

i dont want to change the font of the entire site (i like my links and nav bar to be different)
what route would you recommend i use?
external style sheet?
style classes?

im new to it all and getting frustrated =(

[Kevin Yank]

An external Style Sheet would seem to be your best bet.

Create a file called styles.css with the following contents (adjust values to preference):

<BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
.newstitle {
color: #0000FF;
font-family: Verdana, Arial, sans-serif;
font-size: 20px;
}

.newssubtitle {
font-family: Verdana, Arial, sans-serif;
font-size: 10px;
}

.newsbody {
font-size: 14px;
}
[/code]

That's your stylesheet. Link it to your HTML files by adding the following to their headers (between &lt;HEAD&gt; and &lt;/HEAD&gt; ):

<BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
&lt;LINK REL=STYLESHEET HREF="styles.css"&gt;
[/code]

Adjust the HREF attribute as you would any other link if styles.css isn't in the same directory as the HTML file.

Finally, assign the classes defined in your CSS file to the sections of your news posts. For example:

<BLOCKQUOTE><font size="1" face="Verdana, Arial">code/font><HR><pre>
&lt;H2 CLASS="newstitle"&gt;News Title&lt;/H2&gt;
&lt;P CLASS="newssubtitle"&gt;Date and time...&lt;/P&gt;

&lt;P CLASS="newsbody"&gt;The body of your news post here...&lt;/P&gt;
[/code]

That should get you started. Post back if you have any trouble!


------------------
-Kevin Yank.
http://www.SitePoint.com/
Helping Small Business Grow Online!

[aspen]

Here is how you'd handle it with links, just put this in your .css file

A.menu:link {text-decoration: none; color: orange; font-size: 18pt; font-family: Pepita MT;}
A.menu:visited {text-decoration: none; color: orange;font-size: 18pt; font-family: Pepita MT;}
A.menu:active {text-decoration: none; color: orange;font-size: 18pt; font-family: Pepita MT;}
A.menu:hover {text-decoration: none; color: white; font-size: 18pt; font-family: Pepita MT;}

Then your link code would be:

&lt;a class = "menu" href = ".....&gt;

Basically with css you can define almost any tag with a style, and then add classes to that tag. And by linking to it instead of including it in the header (which you could do if you surround it by style tags) you can have all your pages link to it so that if you decide to change 1 thing you dont have to change it on every page (like SSI).

Chris