CSS FAQs

Q. How do I make colored scrollbars?

A. Colored scrollbars (IE 5.5+ PC & AOL 6 only) can be achieved by redefining the body tag using CSS. Here is some sample code:

<style type="text/css">
<!--
BODY {
  SCROLLBAR-FACE-COLOR: #0033CC;
  SCROLLBAR-HIGHLIGHT-COLOR: #0033CC;
  SCROLLBAR-SHADOW-COLOR: #666666;
  SCROLLBAR-3DLIGHT-COLOR: #CCCCFF;
  SCROLLBAR-ARROW-COLOR: #6699FF;
  SCROLLBAR-TRACK-COLOR: #000000;
  SCROLLBAR-DARKSHADOW-COLOR: #990000;
}
-->
</style>

Custom Scrollbar Tutorials
URL: http://www.dhtmlshock.com/other/ColoredScrollbars/default.asp
URL: http://wsabstract.com/howto/scrollbarcolor.shtml
URL: http://builder.cnet.com/webbuilding/0-7690-8-4807353-1.html?tag=st.bl.7690.d

You can get the Custom Scrollbar Extension at the Macromedia Dreamweaver Exchange.

::back to top::

Q. How can I make a background that does not repeat?

A. This is done with a CSS declaration of background-repeat: no-repeat.

<style type="text/css">
 <!--
body{
	background-image : url(http://www.yoursitename/images/backgroundimage.gif);
	background-repeat : no-repeat;
}
-->
</style>

::back to top::

Q. How do I make different colors for links on the same page?

A. You will need to set up individual pseudo classes for each link state for each different style that you want. It may sound complicated, but it is really easy once you go through the tutorials listed below. Here is some sample CSS code with CSS comment tags shown in this color:

<style type="text/css">
<!--
/*This is the default link style for any links that you do not apply a class to.*/

a:link { color: #003399}
a:visited { color: #993399}
a:hover { color: #009999}
a:active { color: #993333}

/*Apply this class to the text you'd like a different link color. Text that 
 is not a link will appear in this style.*/

.navbar { color: #333333}

/*These are the 	link style definitions.*/

a.navbar:link { color: #6600CC}
a.navbar:visited { color: #666666}
a.navbar:hover { color: #0066CC}
a.navbar:active { color: #CC6633}

-->
</style>

How to create multiple link styles

-CSS Link Styles Tutorial
by Patty J. Ayers
URL: http://www.thepattysite.com/dreamweaver/linkstyles.html

-The PVII Link Styles Series
by Project VII
URL: http://www.projectseven.com/tutorials/

::back to top::

Q. How do I make a text rollover?

A. This is done using the CSS hover pseudo-class selector. You must list your link styles in the order shown below, Link, Visited, Hover, Active. Place this code (with your color choices) above the closing </head> tag in your HTML document.

<style type="text/css">
<!--

a:link { color: #003399}
a:visited { color: #993399}
a:hover { color: #009999}
a:active { color: #993333}

-->
</style>

Note: The CSS pseudo-classes a:hover and a:active are not supported in Netscape versions 4.xx and below. Internet Explorer and Netscape 6 do support these pseudo-classes.

Please see the CSS Tutorials Page for additional information.

::back to top::

Q. How do I remove the underlines from links?

A. This is done with a CSS declaration of text-decoration: none. Place this code (with your color choices) above the closing </head> tag in your HTML document. This code demonstrates the removal of the underline on hover. Remember, hover is I.E. only.

<style type="text/css">
<!--

a:link { color: #6600CC}
a:visited { color: #666666}
a:hover { color: #0066CC; text-decoration: none}
a:active { color: #CC6633}

-->
</style>

Please see the CSS Tutorials Page for additional information.

::back to top::

Q. My CSS works well except for some styles that Netscape 4 has trouble with. Can I hide these styles from Netscape but still use them for other browsers? Or: What is the @import Trick? Or: How can I link one stylesheet for Netscape and another for Internet Explorer and Netscape 6?

A. First you link an external stylesheet (as you usually do) for all of your styles that agree with Netscape 4.xx. Then you use the @import trick to link all of your Internet Explorer and Netscape 6 CSS. Netscape 4.xx ignores the @import. By placing your IE/NS 6 CSS @import *after* your linked CSS, it is considered more important and will override (or combine with) the styles in your linked CSS.

<link rel="stylesheet"
  href="http://www.dwfaq.com/color_schemes/dwfaq/master.css" 
  type="text/css">
<style type="text/css">
<!--

@import "http://www.dwfaq.com/color_schemes/dwfaq/ieonly.css"; 
-->
</style>

::back to top::

Q. How can I make a fixed background that does not scroll?

A. This is done with a CSS declaration of background-attachment: fixed.

body{
	background-image : url(http://www.yoursitename/images/backgroundimage.gif);
	background-attachment : fixed;
}

Note: Attached backgrounds are not supported in Netscape versions 4.xx and below. The image will be thrown in the upper left hand corner of the browser window. To circumvent this issue use this declaration only in a second stylesheet @import.

::back to top::

More CSS FAQs

WebReview.com's CSS FAQ
by Eric A. Meyer
URL: http://www.webreview.com/style/css-faq.shtml

HTML Writer's Guild
- General FAQ's
http://www.hwg.org/resources/faqs/cssFAQ.html
- Specific FAQ's
http://www.hwg.org/resources/faqs/1cssFAQ.html

::back to top::

CSS Tutorials

Please see the CSS Tutorials Page.

CSS Resources

Please see the CSS Resources Page.