• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint
Share this Page URL

Chapter 24. Testing and Debugging Web Pages > Checking the Easy Stuff: CSS

Checking the Easy Stuff: CSS

While CSS syntax is pretty straightforward, it has some common pitfalls, especially if you’ve gotten used to writing HTML or XHTML.

To check the easy stuff with CSS

  • Make sure you separate your properties from their values with a colon (:) not an equals sign, like you do in (X)HTML (Figures 24.9 and 24.10).

    Figure 24.9. Bad! It’s hard to break the habit of separating properties and values with the equals sign. But you must, otherwise it’ll incapacitate your CSS.

    p {font-size=24px}

    Figure 24.10. Much better. Always use a colon between the property and the value. Note that it doesn’t matter if you add extra spaces before and after the colon.

    p {font-size: 24px}

  • Be sure to complete each property-value pair with a semicolon (;). Make sure there are no extra semicolons (Figures 24.11 and 24.12).

    Figure 24.11. Bad! You must put one and only one semicolon between each property-value pair. Here there’s one missing and one extra.

    p {font-size:24px font-weight:bold;; font-style:italic}

    Figure 24.12. One way to make sure that each property-value pair is separated by the next with a semicolon is to give each one its own line. It’s easier to see the semicolons when they’re not in a sea of properties, values, and colons. (While a semicolon after the final property-value pair is optional, it’s a good habit to get into.)

    p {
       font-size: 24px;

  • Don’t forget to close your brackets.

  • Don’t quote values—as you do in (X)HTML. The only values that have quotes in CSS are multiword font names (Figures 24.13 and 24.14).

    Figure 24.13. Bad! Get rid of those quotes around italic, CSS doesn’t need them.

    p {font-style:"italic"; font: "Trebuchet MS";}

    Figure 24.14. The only CSS values that are enclosed in quotes are multi-word font names.

    p {font-style:italic; font: "Trebuchet MS";}

  • Make sure you’re using an accepted value. Something like font-style: none isn’t going to work since the “none” value is called normal. You can find a complete list of CSS properties and values in Appendix B, CSS Properties and Values.

  • Don’t forget the closing </style> tag with internal style sheets (see page 151).

  • Make sure you’ve linked the (X)HTML document to the proper CSS file, and that the URL points to the desired file. Remember that URLs are relative to the CSS file, not to the (X)HTML, except for Netscape 4.x (see page 149).

  • Watch the spaces and punctuation between the selectors.

  • Make sure the browser supports what you’re trying to do (see page 402). Support for CSS varies widely.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint