*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:
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 section of each page I have a line that says:
<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 block on each page:
<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?