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: <!-- m --><a class="postlink" href="http://www.wildernesscrossing.com/terryredlin/terryredlin.html">http://www.wildernesscrossing.com/terry ... edlin.html</a><!-- m -->
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>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>Brilliant! I love you!hehe... happy to help.
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.Dreamweaver MX 2004 has quite good CSS support.
I have read lots, but its a bit overwhelming. The page I am working on is here: <!-- m --><a class="postlink" href="http://www.wildernesscrossing.com/terryredlin/terryredlin.html">http://www.wildernesscrossing.com/terry ... edlin.html</a><!-- m -->
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>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>Brilliant! I love you!hehe... happy to help.
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.Dreamweaver MX 2004 has quite good CSS support.