HWG Resources FAQs CSS Frequently Asked Questions

CSS Frequently Asked Questions

http://www.hwg.org/resources/faqs/1cssFAQ.html

Table of Contents

[General Questions] [Specific Questions] [CSS Support] [More Information]

  1. Why won't my styled documents validate against HTML 3.2?
  2. Which browsers support CSS?
  3. Aren't optional closing tags optional any more?
  4. What is the difference between ID and CLASS?
  5. How to make text-links without underline?
  6. How can I specify two different sets of link colors?
  7. How do I place text over an image?
  8. To what is the percentage value in font-size relative?
  9. How can I place two paragraphs next to each other?
  10. How can I place multiple blocks next to each other?
  11. When is auto different from 0 in margin properties?
  12. How do I center block-elements with CSS1?
  13. How do I move the list bullet to the left/right?
  14. If a list item has display: none, does it still increase the counter?
  15. How do I create a short, left-aligned rule for the <HR>?
  16. Do URL's have quotes or not?
  17. What are partial URLs relative to?
  18. What is wrong with font-family: "Verdana, Arial, Helvetica"?
  19. Why can @import be at the top only?
  20. If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well?
  21. If background and color should always be set together, why do they exist as separate properties?
  22. Must I quote property values?
  23. How do I quote font names in quoted values of the style attribute?
  24. How do I have a background image that isn't tiled?
  25. How do I write my style sheet so that it gracefully cascades with user's personal sheet ?
  26. What does \ABCD (and \ABCDE) mean?
  27. What is Document Style Semantics and Specification Language (DSSSL)?
  28. What is Extensible Stylesheet Language (XSL)?
  29. Tips

More information

  1. Information and Resources from the W3C
  2. Other resources
  3. Tutorials
  4. Editing tools
  5. Validation of Style Sheets

Specific Questions

  1. Why won't my styled documents validate against HTML 3.2?

    HTML 3.2 does not support the element SPAN nor the attributes: STYLE, CLASS, ID as well as the element's LINK attributes; TYPE and TITLE therefore usage of them will be flagged as errors.

    Presently there is no perfect solution to the problem. The available options are:

    1. Documents can be validated against "HTML 3.2 + CSS1"-DTD, which was written by W3C solely for the purpose of allowing style in HTML 3.2 documents to validate. However, this DTD does not support the attribute TYPE which is essential in specifying the style language used. To validate against HTML 3.2 + CSS1 use the following Doctype Declaration:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML Experimental 970421//EN">

    2. Validate against HTML 4.0. This DTD supports all "CSS elements and attributes", however, this HTML level is still in experimental version. To validate against HTML 4.0 use the following Doctype Declaration:

      <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">

    Table of Contents

  2. Which browsers support CSS?

    It depends on your definition of "support." If you are interested in those browsers which makes some attempt at supporting CSS, no matter how partial or bug-ridden, then the list is:

    • Internet Explorer 3.0 and above
    • Navigator 4.0 and above
    • Opera 3.6 and above
    • Konqueror
    • Arena
    • Emacs-w3
    • Amaya
    • Lexicon
    • XPublish by Media Design in·Progress

    If instead you're interested in those browsers which are known to do a credible job of bug-free and mostly completel support for CSS1, then the list narrows somewhat dramatically:

    • Internet Explorer 5.0 for Macintosh and above
    • Internet Exporer 5.5 for Windows and above
    • Netscape Navigator 6.0 and above
    • Opera 4.0 and above

    While none of these browser can be claimed to have a perfect implementation of CSS1, they are all quite good and can be relied upon to operate in a consistent fashion for most of CSS1. NOTE: At the present time (April 2001) none of the above browsers implement the CSS2 specification consistently nor fully.

    Table of Contents

  3. Aren't optional closing tags optional any more?

    Optional closing tags like </P> are and have always been optional. However, some popular browsers, like IE all versions, have problems rendering elements correctly when these tags are omitted. If, for example, the P element is not closed the properties declared to it will involuntarily be "inherited" by the element or elements that follow it. If one such property is 'margin-left' you may end up with a document containing one (or none) word per line.

    Although optional closing tags are optional it is nevertheless a good idea to use them.

    Table of Contents

  4. What is the difference between ID and CLASS?

    ID identifies and sets style to one and only one occurrence of an element while class can be attached to any number of elements. By singling out one occurrence of an element the unique value can be declared to said element.

    CSS
    #eva1 {background: red; color: white}
    .eva2 {background: red; color: white}

    HTML - ID
    <P ID=eva1>Paragraph 1 - ONLY THIS occurrence of the element P (or single occurrence of some other element) can be identified as eva1</P>
    <P ID=eva1>Paragraph 2 - This occurrence of the element P CANNOT be identified as eva1</P>

    HTML - CLASS
    <P class=eva2>Paragraph 1 - This occurrence of the element P can be classified as eva2</P>
    <P class=eva2>Paragraph 2 - And so can this, as well as occurrences of any other element, </P>

    Table of Contents

  5. How to make text-links without underline?
    a:link, a:visited {text-decoration: none}
    

    or

    <a style="text-decoration: none" HREF="...">
    

    ...will show the links without underlining. However, suppressing the underlining of links isn't a very smart idea as most people are used to having them underlined. Also, such links are not spotted unless someone coincidentally runs a mouse over them. If, for whatever reason, links without underline are required background and foreground colors can be instead declared to them so that they can be distinguished from other text, e.g.;

    a:link, a:visited {text-decoration: none; background: red; color: blue}
    

    or

    <a style="text-decoration: none; background: red; color: blue" HREF="...">
    

    Both background and foreground colors should be specified as the property that is not specified can be overridden by user's own settings.

    Table of Contents

  6. How can I specify two different sets of link colors?

    By classifying each set of links and then attaching desired color to each set.

    CSS:
    <style type="text/css">
    <!--
    A.set1:link {color: some_color; background: some_background_color}
    A.set1:visited {color: some_color; background: some_background_color}
    A.set1:active {color: some_color; background: some_background_color}

    A.set2:link {color: some_color; background: some_background_color}
    A.set2:visited {color: some_color; background: some_background_color}
    A.set2:active {color: some_color; background: some_background_color}
    -->
    </style>

    You can name set1 and set2 any way you like as long as the names are made up of letters a-z, A-Z, digits 0-9, period, hyphen, escaped characters, Unicode characters 161-255, as well as any Unicode character as a numeric code.

    Note: to avoid conflict with user's settings a background property (background color) should also be specified together with the color property (foreground color).

    HTML:
    <A class=set1 .....> will show colors as specified in class "set1"
    <A class=set2 .....> will show colors as specified in class "set2"

    Table of Contents

  7. How do I place text over an image?

    To place text or image over an image you use the position property. The below exemple is supported by IE 4.0. All you have to do is adapt the units to your need.

    <div style="position: relative; width: 200px; height: 100px">
    <div style="position: absolute; top: 0; left: 0; width: 200px">
    <image>
    </div>
    <div style="position: absolute; top: 20%; left: 20%; width: 200px">
    Text that nicely wraps
    </div>
    </div>
    

    Table of Contents

  8. What is the percentage value in 'font-size' relative to?

    It is relative to the parent element's font-size. For example, if the style sheet says:

    H1 {font-size: 20pt;}
    SUP {font-size: 80%;}
    

    ...then a <SUP> inside an <H1> will have a font-size of 80% times 20pt, or 16pt.

    Table of Contents

  9. How do I place two paragraphs next to each other?

    There are several ways to accomplish this effect, although each has its own benefits and drawbacks. We start with the simplest method of positioning two paragraphs next to each other.

    <DIV style="float: left; width: 50%">Paragraph 1</DIV>
    <DIV style="float: left; width: 50%">Paragraph 2</DIV>
    

    Trickier is this example, which relies on positioning but does not suffer the vertical-overlap problems which plague many other positioning solutions. The problem is that it relies on an incorrect positioning implementation, and will break down dramatically in conformant browsers.

    <P>
    <SPAN STYLE="position: relative; left: 50%; width: 50%">
    <SPAN STYLE="position: absolute; left: -100%; width: 100%">
    Paragraph 1</SPAN>
    Paragraph 2</SPAN>
    </P>
    

    If floating is not sufficient to your purposes, or you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

    Table of Contents

  10. How can I place multiple blocks next to each other?

    In theory, the following will produce 4 "columns":

    <DIV style="float: left; width: 25%;">Block 1</DIV>
    <DIV style="float: left; width: 25%;">Block 2</DIV>
    <DIV style="float: left; width: 25%;">Block 3</DIV>
    <DIV style="float: left; width: 25%;">Block 4</DIV>
    

    Each "column" will occupy 25% of the screen. This relies on a correct implementation of float, which cannot be said of many legacy browsers. If you cannot accept display variances in older browsers, then it may be best to fall back to table-based solutions.

    Table of Contents

  11. When is auto different from 0 in margin properties?

    In vertical margins, auto is always equal to 0. In horizontal margins, auto is only equal to 0 if the width property is also auto. Here are three examples, assume that there is a <P> that is a child of <BODY>:

    Example 1: auto value on the width.

    BODY {width: 30em;}
    P {width: auto; margin-left: auto; margin-right: auto;}
    

    Since the width property is auto, the auto values of the two margins will be ignored. The result is a P that is 30em wide, with no margins.

    Example 2: two auto margins

    BODY {width: 30em;}
    P {width: 20em; margin-left: auto; margin-right: auto;}
    

    The P will be 20em wide and the remaining 10em will be divided between the two margins. Paragraphs will be indented 5em at both sides.

    Example 3: one auto margin

    BODY {width: 30em;}
    P {width: 20em; margin-left: 2em; margin-right: auto;}
    

    In this case, paragraphs are 20em wide and are idented 2em on the left side. Since the total width available is 30em, that means the right margin will be 8em.

    Note that the default value of width is auto, so setting one or both margins to auto is only useful if you set the width to something other than auto at the same time.

    Table of Contents

  12. How do I center block-elements with CSS1?

    There are two ways of centering block level elements:

    1. By setting the properties margin-left and margin-right to auto and width to some explicit value:

    BODY {width: 30em; background: cyan;}
    P {width: 22em; margin-left: auto; margin-right: auto}
    

    In this case, the left and right margins will each be four ems wide, since they equally split up the eight ems left over from (30em - 22em). Note that it was not necessary to set an explicit width for the BODY element; it was done here to keep the math clean.

    Another example:

    TABLE {margin-left: auto; margin-right: auto; width: 400px;}
    

    In most legacy browsers, a table's width is by default determined by its content. In CSS-conformant browsers, the complete width of any element (including tables) defaults to the full width of its parent element's content area. As browser becaome more conformant, authors will need to be aware of the potential impact on their designs.

    2. By making the block an inline element and then use text-align property

    <DIV STYLE="text-align: center">
    <TABLE STYLE="display: inline">
     ...
    </TABLE>
    </DIV>
    

    This technique depends on the incorrect implementation of text-align behavior in older browsers. It will likely cease to work in future CSS-conformant browsers, and eventually it will probably not be a viable solution.

    Table of Contents

  13. How do I move the list bullet to the left/right?

    CSS1 has no properties for setting margins or padding around the bullet of a list itemand in most cases the position of the bullet is browser-dependent. This is especially true since most browsers disagreed on whether a bullet is found within the margin or padding of a list item.

    In CSS2, properties were introduced to provide greater control over the placement of bullets (which CSS2 calls a "marker") but these were not widely supported by mid-2001 browsers. Here is an example of changing a marker's placement:

    li:before {display: marker; marker-offset: 22px; content: url(triangle.jpg);}
    

    In this example, a graphic of a triangle is inserted before the content of the li element, set to be a marker (through display: marker;), and given an offset of 22 pixels. Depending on the margin size of the list item, there may not be room for the marker to appear next to the list item's content.

    Table of Contents

  14. If a list item has display: none, does it still increase the counter?

    In such a case, the counter is not incremented. This is distinct from a case where a list item is set to visibility: hidden, in which case the counter will still be incremented.

    Table of Contents

  15. How do I create a short, left-aligned rule for the <HR> element in HTML?

    There are several ways. Which one to use depends on your taste. In all cases, the trick is to position the element with the width, margin-left and margin-right properties. Here is a solution that uses the border property to put a line above the HR element.

    HR {margin: 0.5em 60% 0.5em 0;
        border-top: solid;}
    

    The margin property puts half an em of space above and below the rule and makes the right margin 60% (of the parent's width). The line is therefore 40% of the parent's width long.

    Here is another solution, that creates a black rectangle by using the background and height properties.

    HR {margin: 0.5em 60% 0.5em 0;
        height: 0.04em;
        background: black;}
    

    The black rectangle is 0.04em high and has a width of 40% of the parent's width.

    Table of Contents

  16. Do URL's have quotes or not?

    Double or single quotes in URLs are optional. The tree following examples are equally valid:

    BODY {background: url(pics/wave.png) blue}
    BODY {background: url("pics/wave.png") blue}
    BODY {background: url('pics/wave.png') blue}
    

    Table of Contents

  17. To what are partial URLs relative?

    Partial URLs are relative to the source of the style sheet. The style sheet source can either be linked or embedded. To which source partial URLs are relative to depends on their occurrence.

    If a partial URL occurs in a linked style sheet then it is relative to the linked style sheet. The URL of the linked style sheet is the URL of the directory where the sheet is kept.

    If a partial URL occurs in an embedded style sheet then it is relative to the embedded style sheet. The URL of the embedded style sheet is the URL of the HTML document in which the sheet is embedded.

    Note that Navigator 4.x treats partial URLs as being relative to the HTML document, regardless of the place where the partial URL occurs. This is a serious bug which forces most authors to use absolute URLs in their CSS.

    Table of Contents

  18. What is wrong with font-family: "Verdana, Arial, Helvetica"?

    The quotes. This is actually a list with a single item containing the well-known 'Verdana, Arial, Helvetica' font family. It is probably intended to be a list of three items.

    Unlike in most other CSS1 properties, values for the font-family are separated by a comma to indicate that they are alternatives. Font names containing whitespace should be quoted. If quoting is omitted, any whitespace characters before and after the font name are ignored and any sequence of whitespace characters inside the font name is converted to a single space.

    So to ask for two fonts foo and bar the syntax is:

    font-family: foo, bar
    

    To ask for the two fonts Revival 555 and Iodine you can do this:

    font-family: "Revival 555", Iodine
    

    You could also do this:

    font-family: Revival 555, Iodine
    

    which is equivalent. Notice that this is not three fonts; you can tell because after the "l" you didn't hit a comma, (more list items to come) a semicolon (end of that property, another property coming up) or a curly brace (end of that rule). This is also equivalent:

    font-family: Revival      555, Iodine
                        ^^^^^^
    whole bunch of spaces converts to one space
    

    But this next one is asking for a different font with two spaces in the name (and whoever named it was stupid)

    font-family: "Revival  555", Iodine
                         ^^two spaces, which are not converted
    

    In general it is more tolerant of user typing to leave out the quotes. Sometimes you need them, for example there is a real font sold by Fontworks and designed in 1995 by Stephan Müller called Friday, Saturday, Sunday. Yes, two commas in the actual font name. CSS1 can handle this:

    font-family: "Friday, Saturday, Sunday", cursive
    

    Because it can handle this, the example in the title is syntactically correct. But what the author or tool wrote was almost certainly not what the document author intended.

    Table of Contents

  19. Why can @import be at the top only?

    A style sheet that is imported into another one has a lower ranking in the cascading order: the importing style sheet overrides the imported one. Programmers may recognize this as the same model as in Java, Modula, Object-Pascal, Oberon and other modular programming languages.

    However, there is a competing model, well-known to C programmers, where the imported material is not lower in rank, but is expanded in-place and becomes an integral part of the importing document.

    By allowing @import only at the top of the style sheet, people that think in terms of the second model (although in principle incorrect) will still get the expected results: as long as the @import is before any other overriding rules, the two models are equivalent.

    Btw. In all the modular languages import statements are only allowed at the top. In C, the #include can be put elsewhere, but in practice everybody always puts it at the top. So there may not be that much need to allow @import elsewhere in the style sheet either.

    Table of Contents

  20. If one were to set Text and Link colors using a style sheet, should one also define the background colors for these elements as well?

    It is generally true that you should give background or background-color a value, but not necessarily a color value. E.g., if the document has a background image, you would "highlight" all links if you give them a background color.

    body { background-image: url(light-texture.png) #FFF; color: #000 }
    a:link, a:visited, a:active { color: #00F; background-color: transparent; }
    

    By setting the background-image explicitly to transparent, you lower the risk of another rule in the cascade giving links a background that would highlight them.

    Table of Contents

  21. If background and color should always be set together, why do they exist as separate properties?

    There are serveral reasons for this. First, style sheets become more legible -- both for humans and machines. The background property is already the most complex property in CSS1 and combining it with color would make it even more complex. Second, color inherits, but background doesn't and this would be a source of confusion.

    Table of Contents

  22. Must I quote property values?

    Generally no. However, values containing white spaces, e.g. font-family names should be quoted as whitespaces surrounding the font name are ignored and whitespaces inside the font name are converted to a single space, thus font names made up of more than one word (e.g.) 'Times New Roman' are interpreted as three different names: Times, New and Roman.

    Table of Contents

  23. How do I quote font names in quoted values of the style attribute?

    The attribute values can contain both single quotes and double quotes as long as they come in matching pairs. If two pair of quotes are required include single quotes in double ones or vice versa:

    <P STYLE="font-family: 'New Times Roman'; font-size: 90%">
    <P STYLE='font-family: "New Times Roman"; font-size: 90%'>
    

    It's been reported the latter method doesn't work very well in some browsers, therefore the first one should be used.

    Table of Contents

  24. How do I write my style sheet so that it gracefully cascades with user's personal sheet ?

    You can help with this by setting properties in recommended places. Style rules that apply to the whole document should be set in the BODY element -- and only there. In this way, the user can easily modify document-wide style settings.

    Table of Contents

  25. How do I have a background image that isn't tiled?

    (by Darin McGrew)

    Specify the background-repeat property as no-repeat. You can also use the background property as a shortcut for specifying multiple background-* properties at once. Here's an example:

    BODY {background: #fff url(watermark.jpg) no-repeat;}
    

    Table of Contents

  26. What does \ABCD (and \ABCDE) mean?

    CSS allows Unicode characters to be entered by number. For example, if a CLASS value in some Russian document contains Cyrillic letters EL PE (Unicode numbers 041B and 041F) and you want to write a style rule for that class, you can put that letter into the style sheet by writing:

      .\041B\041F {font-style: italic;}
    

    This works on all keyboards, so you don't need a Cyrillic keyboard to write CLASS names in Russian or another language that uses that script.

    The digits and letters after the backslash (\) are a hexadecimal number. Hexadecimal numbers are made from ordinary digits and the letters A to F (or a to f). Unicode numbers consist of four such digits.

    If the number starts with a 0, you may omit it. The above could also be written as:

      .\41B\41F {font-style: italic;}
    

    But be careful if the next letter after the three digits is also a digit or a letter a to f! This is OK: .\41B-\41F, since the dash (-) cannot be mistaken for a hexadecimal digit, but .\41B9\41F is only two letters, not three.

    Four digits is the maximum, however, so if you write:

      .\041B9\041F {font-style: italic;}
    

    That's three letters: two Cyrillic ones with a 9 in between.

    Unicode numbers can be found in the Unicode book: The Unicode Standard version 2.0, Addison Wesley Developers Press, Reading, Massachusets, 1996, ISBN 0-201-48345-9.

    Table of Contents

  27. Document Style Semantics and Specification Language (DSSSL)?

    Document Style Semantics and Specification Language is an international standard, an expression language, a styling language for associating processing (formatting and transformation) with SGML documents, for example XML.

    The specification and draft can be found at http://www.jclark.com/dsssl/

    Table of Contents

  28. What is Extensible Stylesheet Language (XSL)?

    XSL is a proposed styling language for formatting XML (eXtensible Markup Language) documents. The proposal was submitted to the W3C by Microsoft, Inso, and ArborText.

    The proposal can be found at http://www.w3.org/Submission/1997/13/ or http://www.microsoft.com/standards/XML

    Table of Contents

  29. Tips

    Tip
    Netscape seems to have a problem with rendering the last row of justified text correctly, that is not justified last row. The solution to the problem is white space between the text and the closing tag, e.g.:

    <P style="text-align: justify>Text
    </P>
    

    Tip
    The actual width of SIZE and COLS attributes used with INPUT and TEXTAREA elements, respectively, is based on character width. Internet Explorer displays the content of TEXTAREA in monospaced font therefore the width of these two fields differs even when the same value is set to the SIZE and COLS attributes. To get the elements equally long/short the same font must be declared to both of them, e.g.:

    <INPUT NAME="name" TYPE="text" size="40" STYLE="font: normal 10pt Arial">
    <TEXTAREA NAME="name" ROWS=4 COLS=40 STYLE="font: normal 10pt Arial">

    Table of Contents

More Information

  1. Information and Resources from the W3C

    Table of Contents

  2. Other resources

    Table of Contents

  3. Tutorials

    Table of Contents

  4. Editing tools

    Table of Contents

  5. Validation of Style Sheets

    Table of Contents