Quote:
Originally posted by Quain
OK, I need some CSS help and i didn't know where else to go. I am currently making a website using Macromedias Dreamweaver for my team and want to do the colored scroll bad (like the ones on here that are orange.)
|
Hi Dave,
I've played around with CSS just a little. Nothing fancy, but here is what I have. My CSS file (GWRBoard.css) contains the following:
PHP Code:
body {
background-image: url(/GWRBoard/space.jpg);
background-color: #000033;
font-family:Verdana, Arial;
color: #FFFF33;
font-size:small;
}
input { font-family: "Courier New", Courier, mono; font-size: 10pt}
A:link {
color: #33CC33;
}
A:visited {
color: #99CC99;
}
A:hover {
color: #FF0033;
}
Then in the <head> section of each page I have a line that says:
PHP Code:
<LINK type="text/css" rel="stylesheet" href="GWRBoard.css">
If you take a look at the source for one of CD's pages, you will see that they inline the CSS code inside the <head> block on each page:
PHP Code:
<style type="text/css">
BODY {
scrollbar-face-color: #FF8800;
scrollbar-shadow-color: #FF6600;
scrollbar-highlight-color: #FF8800;
scrollbar-3dlight-color: #FF8800;
scrollbar-darkshadow-color: #000000;
scrollbar-track-color: #dddddd;
scrollbar-arrow-color: #000000; }
SELECT {
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
FONT-SIZE: 11px;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
TEXTAREA, .bginput {
FONT-SIZE: 12px;
FONT-FAMILY: Verdana,Arial,Helvetica,sans-serif;
COLOR: #000000;
BACKGROUND-COLOR: #CFCFCF
}
#all A:link, #all A:visited, #all A:active {
COLOR: #0000AA;
}
#all A:hover {
COLOR: #FF8800;
}
#sitelink A:hover {
COLOR: #FFFFFF;
}
#sitelink A:link {
COLOR: #000000;
}
#cat A:link, #cat A:visited, #cat A:active {
COLOR: #FF8800;
TEXT-DECORATION: none;
}
#cat A:hover {
COLOR: #FF8800;
TEXT-DECORATION: underline;
}
#ltlink A:link, #ltlink A:visited, #ltlink A:active {
COLOR: #0000AA;
TEXT-DECORATION: none;
}
#ltlink A:hover {
COLOR: #FF8800;
TEXT-DECORATION: underline;
}
.thtcolor {
COLOR: #000000;
}
#cdm {
FONT-WEIGHT: bold;
FONT-SIZE: 10px;
COLOR: #445669;
FONT-FAMILY: arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
#cdm A.forummenu:link {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #000000;
FONT-FAMILY: arial, helvetica, sans-serif;
TEXT-DECORATION: underline;
}
#cdm A.forummenu:visited {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #000000;
FONT-FAMILY: arial, helvetica, sans-serif;
TEXT-DECORATION: underline;
}
#cdm A.forummenu:hover {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #FFFFFF;
FONT-FAMILY: arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
#cdm A.forummenu:active {
FONT-WEIGHT: bold;
FONT-SIZE: 11px;
COLOR: #FFFFFF;
FONT-FAMILY: arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
#hann {
FONT-WEIGHT: bold;
FONT-SIZE: 18px;
COLOR: #000000;
FONT-FAMILY: arial, helvetica, sans-serif;
TEXT-DECORATION: none
}
.nf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt }
.sf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10px }
.lf { font-family: verdana, arial, helvetica, sans-serif; font-size: 10pt; font-weight:bold }
</style>
You can do it either way, but I prefer the linked style sheet so if I decide to change my style, I only have to change it in one place.
Does that answer your question?