Stylish Cascading Style Sheets FAQ

This FAQ attempts to address the most frequently asked CSS questions. Last Updated: (11/10/98).

- FAQs

  1. What are Cascading Style Sheets?
  2. Which browsers support CSS and where can I get them?
  3. Where can I learn CSS?
  4. How do I suggest that a link is not underlined?
  5. How do I suggest that some links are not underlined while others are underlined?
  6. How do I suggest the font color/size/face in the entire document when using tables?
  7. How do I style my entire site with one (1) style sheet?
  8. How do I suggest that my link text will change when I move my mouse pointer over it?
  9. How do I suggest that there is no top or left margin around my page?
  10. How do I suggest that my background image is fixed?

- FAQ Answers

  1. What are Cascading Style Sheets?

    CSS is a part of HTML 4.0 and gives authors the ability to suggest how their documents are styled. It offers a superior solution to the buggy font tag, other proprietary tags and attributes, and adds many other ways to style a document.

    By separating layout from content, CSS makes it easier to create and maintain websites. One style sheet can even be used to style an entire site. By updating that one file you instantly update your site.

  2. Which browsers support CSS and where can I get them?

    Both Netscape and Microsoft have browsers on the market that support CSS to some degree. Opera is currently beta testing a CSS compliant browser. The specific versions to look for are as follows.

  3. Where can I learn CSS?

    The World Wide Web Consortium maintains specifications that define Cascading Style Sheets level One (1) and Two (2). While they are factually correct and implicitly detailed, they are not for beginners. The W3C recommendations will suit intermediate to advanced web authors but not necessarily those who have just started in the field of web design. For those, there are many other CSS tutorials and resources to get you up and running creating your own style sheets for your webpages.

  4. How do I suggest that a link is not underlined?

    When deciding to do such you must first examine the impact it could have on how users navigate your site. The blue, underlined link was originally used so that users would know what textual content would lead them to a new document or location within a document. By taking away the underline you are removing one of the defining attributes of a link. That in itself is not necessarily enough to confuse your web patrons, but combine that with a change in link color and your users could be left at a loss. Because you can do something doesn't mean you would or should want to.

    With the above in mind, here is how to suggest there will be no underline in a link.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <style type="text/css">
    <!-- globally:
    A { text-decoration: none }
    -->
    <!-- with specific link types:
    A:link { text-decoration: none }
    A:visited { text-decoration: none }
    A:active { text-decoration: none }
    -->
    </style>
    </head>
    <body>
    ...
    
  5. How do I suggest that some links are not underlined while others are underlined?

    One of the abilities of CSS is to assign style to certain elements using the class="name" attribute. What you will do is place the attribute within the link elements you wish to make not underlined and create the counterpart CSS that will define that there should be no underline.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <style type="text/css">
    <!--
    .nounder { text-decoration: none }
    -->
    </style>
    </head>
    <body>
    <a class=nounder href="page.html">Non Underlined Link Text</a>
    <a href="page.html">Underlined Link Text</a>
    ...
    
  6. How do I suggest the font color/size/face in the entire document when using tables?

    The <table> tag is a block-level element and as such you can not style the data within it by simply applying a style to the <body> tag. You must apply it to the table in addition to the body tag. While you could use the class="" attribute, this would be tedious to implement and hard to change.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <style type="text/css">
    <!--
    BODY { color: red }
    TD { color: red }
    -->
    </style>
    </head>
    <body>
    <table>
    ...
    
  7. How do I style my entire site with one (1) style sheet?

    The beauty of CSS is it's ability to make it far easier to maintain styles within a site. Using the <link> element to call on one centrally located file is all it takes to implement this handy approach. Your file must, however, have the extension of .css.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <link rel="stylesheet" href="mystyle.css" type="text/css">
    </head>
    <body>
    ...
    
  8. How do I suggest that my link text will change when I move my mouse pointer over it?

    The same way that you can suggest the link style with the pseudo-class :link, the link hover style can be suggested with the pseudo-class :hover. You could change the link color, face, size, or anything else you wished. While it is a valid part of the CSS recommendation, this only works in Microsoft Internet Explorer version 4.0 and higher.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <style type="text/css">
    <!--
    A:hover { color: green }
    -->
    </style>
    </head>
    <body>
    ...
    
  9. How do I suggest that there is no top or left margin around my page?

    While proprietary HTML attributes have been suggested to remove the margin around a page, there is no valid way of doing it without using CSS.

    Due to varying support of CSS by different browsers, in order to attempt to obtain this effect you must use multiple CSS elements. It is not fool proof and could break with the simple act of reloading the page. Unfortunately, this is a problem the browsers have with support of far too many parts of CSS.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <style type="text/css">
    <!--
    .nospacing {
    position: absolute;
    top: 0px;
    left: 0px;
    visibility: visible;
    z-index: 1;
    margin-top: 0px;
    margin-left: 0px;
    margin-right: 0px;
    }
    -->
    </style>
    </head>
    <body class=nospacing><div class=nospacing>
    <p><img src="image.gif" width=100 height=100 alt="[image]">
    <p>Some text
    </div></body>
    
  10. How do I suggest that my background image is fixed?

    Many web authors are mislead to believe that a background can be "fixed" with an HTML attribute. Such is not the case. While Explorer does support a proprietary attribute of the body tag that will "fix" the background in it's browser, in the interest of an interoperable, unified, and standard web, this solution should not be used. Instead, the effect of "fixing" a background should be achieved with the use of valid W3C CSS elements.

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>css test</title>
    <style type="text/css">
    <!--
    body {
    background-image: url("http://www.domain.com/image.gif");
    background-attachment: fixed;
    background-repeat: repeat;
    }
    -->
    </style>
    </head>
    <body>
    etc.
    
  • Credits:

    Thanks to Sue Sims for feedback and clarifications.