Another stupid noob question...

[soulflycrx]

Hello. I am still working on the CSS elements of my site. I bet that some of you veterens would of finished what I am doing in 5 minutes. Sofar I have spent 7 hours in total trying to figure things out.

I have read lots, but its a bit overwhelming. The page I am working on is here: http://www.wildernesscrossing.com/terryredlin/terryredlin.html

My problem is this. If you look at the page, you will notice that I have many different styles of text. Menu titles, menu items, section titles, thumbnail titles, thumbnail descriptions, prices, etc.

I used H1 for the top graphic of the page.
I used H2 for the words "Print Gallery - Terry Redlin"
I used H3 for the words "Artist Index"

Now, I figure that I dont need any more headings. So thats fine. Now what do I do to set up the attributes for all the other styles of text?

I set attributs for <p>, but what if I want more? I tried to make <p2> etc. but that did not work.

So what do I do if I want to make more then one style of <P>????

**** NOTE: The source of that web page URL page is not current, its purely for reference. My external CSS looks like this:



<!--
H1 = Top logo (header.gif)
H2 = Maroon text title (ie. Print Gallery - Terry Redlin)
H3 = Menu text title (ie. Artist Index)
P = Grey thumbnail text title
-->

<style type="text/css">

body {
background: #CCCC99;
background-image: url(../images/bg2.gif);
color: #000000;
margin: 0%;
}

a:link {color: #006699;}
a:visited {color: #006699;}
a:hover {color: #006699;}
a:active {color: #006699;}

H1 {
margin-top: 0px;
margin-bottom: 0px;
}

H2 {
font-size: 14pt;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
font-family: Georgia, Times New Roman, Times, serif;
color: #993300
}

H3 {
font-size: 12pt;
font-weight: bold;
font-style: italic;
margin-top: 0px;
margin-bottom: 0px;
font-family: Georgia, Times New Roman, Times, serif;
color: #000000
}

P {
font-size: 12pt;
font-weight: bold;
margin-top: 0px;
margin-bottom: 0px;
font-family: Georgia, Times New Roman, Times, serif;
color: #CCCCCC
}



</style>

[pyro]

You use classes or IDs. Classes if you are going to use them more than once, ID's if they only appear one time.

For instance, you could use this:

<p class="one">This paragraph has the class 'one', and will be red.</p>
<p class="two">This paragraph has the class 'two', and will be blue.</p>
<p id="three">This paragraph has the ID 'three' and will be green.</p>

And this bit of CSS;

<style type="text/css">
p.one { /*make a class named one, that applies to <p> tags. Classes may be used more than once*/
color: #f00; /*shorthand for #ff000;*/
background: transparent;
}
p.two { /*make a class named two, that applies to <p> tags. Classes may be used more than once*/
color: #00f; /*shorthand for #0000ff;*/
background: transparent;
}
p#three{ /*make an ID named three, that applies to <p> tags - remember that ID's can only be used once*/
color: #0f0; /*shorthand for #00ff00;*/
background: transparent;
}
</style>

[soulflycrx]

Brilliant! I love you!

[pyro]

hehe... happy to help. :)

[soulflycrx]

Now if only dreamweaver would show the results of <p class="two"> and <p class="three">. It seems to show <p class="one"> alright. But thats ok because it appears fine when its previewed in IE.:)

[pyro]

Dreamweaver MX 2004 has quite good CSS support. :)