HTML and CSS techniques and tools

Last updated March 27, 2012. Created by spade on November 10, 2005.
Edited by awais.6jan, shamio, Tor Arne Thune, Haarek. Log in to edit this page.

For all the effort you put into building your site, the most important thing to your users is how your site looks. Managing the inconsistencies in your theme for each browser, for each module, and for user selectable themes can be very challenging.

First you should familiarize yourself with basic Cascading Style Sheets (CSS) concepts. Review CSS Discuss or HTML dog for CSS resources. A good overview of the power of CSS can be seen at the CSS Zen Garden.

Validate! Always. Validate XHTML 1.0 Strict.

Browsers interpret CSS differently and this is what causes inconsistencies in page display across browsers. Validation of your markup is essential in having a page display in standards-compliant browsers and allows others to help you. Only after you have validated your XHTML and CSS code, and ensured it looks good in standards-compliant browsers, should you begin adding fixes for non-compliant browsers. Too often one hears designers complain, "Butbutbut, if I make my code validate, then it looks more awful than it did before I validated it. I don’t want to start all over again." What that means is the good-looking layout was due to a bug! Debugging on top of bugs only leads to more problems down the road.

And really, a validating, clean layout will work 90 % of the time. It will have easy fixes 9 % of the time and will require hard measures only 1 % of the time. Really!

Please ensure that you've validated both the CSS and HTML for your website using W3C tools. It would be great to review your theme with both the WAVE and FAE accessibility evaluators too. There are also some other good validation tools.

Your page should not look the same everywhere

Another very important thing to consider is where your pages will be displayed. My mobile phone is not able to show your fancy 6 column fixed width javascript-based layout. And it should not be able to. Safari and Konqueror decided to not allow certain styles in forms, for security and desktop consistency reasons. Large screens will resize your font and that might break your fixed width layout. People using older screens will have larger font sizes set. People with bad internet connections often disable images, or even CSS.

So keep in mind that your style is nothing more than an advice for browsers to display it in certain ways. It is by no means a law.

Tools for managing inconsistencies in your theme

1. We recommend you start with a standards-compliant browser for your themes such as Firefox. Firefox allows you to highlight portions of your web page, right click and view selected source to understand what your theme's CSS classes are. Understanding how CSS classes for your theme are applied to the underlying XHTML is the key to understanding your theme.
2. Use standard CSS naming conventions. We recommend adopting these naming conventions for your CSS classes.
3. Select a valid DOCTYPE type for your theme and include a DocType Declaration (DTD).
4. To help in analyzing your HTML and CSS we recommend you install the Firebug plugin for Firefox. It is an invaluable tool that allows you to look at your CSS and HTML and change it in real time to evaluate the effects of your changes. Another very useful Firefox plugin is the Web Developer toolbar. This has tons of handy utilities.
5. Before you start modifying your CSS to fix your bugs it is important to ensure you are styling valid HTML or XHTML. There is a web validator built into the Firefox Web Developer toolbar. Opera has built in validation; just press Ctrl+Alt+V.
6. If you find a problem with invalid XHTML in a module, file an issue with the module and include screenshots that show the effects of the issue in your theme.
7. To see how your site will look to search engines you can use Lynx viewer.
8. The Firefox Total Validator add-on provides validation and screenshots showing how your page looks in various browsers (including Lynx). Total Validator validates your HTML against the schema for HTML and highlights some errors the other validators miss.
9. Positioning problems in your site with Internet Explorer can be resolved using these references: Position Is Everything Internet Explorer Primer.
10. A library of examples of XHTML and CSS problems can be found at Quirks mode.

Cross browser compatibility (Chrome, Firefox, Internet Explorer, Opera, Safari)

There are a number of tools available to help look at your theme in multiple browsers.

1. Browser Shots is a free service, but it can take a while to get your screenshots.
2. BrowserCam is a paid service with a 24 hour trial.
3. Total Validator is a free Firefox add-on that validates and returns a screenshot of how your page looks in other browsers. There is a limit of about 20 screenshots per day.

On Windows you can use Internet Explorer and download Chrome, Firefox, Opera, and Safari. On Linux you can use Konqueror, a KHTML-based browser (which Safari also uses on MacOS), Chrome, Firefox, and Opera; Internet Explorer can be run under Wine. On Mac OSX you can use Safari and download Chrome, Firefox, and Opera.

Color and graphic issues

1. If you are selecting colors for your color palette, you can use Color schemes.
2. If your theme is causing "favicon not found" errors in your logs you can create a favicon with these two tools: favicon from pics and favicon generator.
3. To check for how color blindness affects users of your site see Vischeck.
4. Always optimize your images, so that they load faster on your pages, by using a service such as Yahoo! Smush It or Google Page Speed, or programs such as ImageOptim, PNGOUT, OptiPNG, or Pngcrush.

Selecting a base theme

If you are looking for a theme to start with, then Zen or Foundation are good base themes. There is also BlueMarine, but it uses tables for layout, which is not a W3C recommendation.

Selecting a menu style

Suckerfish is a reliable flexible drop down, drop out, style menu system. Drupal uses jQuery. Superfish is Suckerfish implemented in jQuery. Pixture Reloaded is based on Zen + Superfish menus and a good starting point for Suckerfish style menus.

The Nice Menus module also creates Suckerfish-style menus and can be easily dropped into an existing theme with little work.

Module-specific CSS

Some Drupal modules come with a default CSS file. You should use a tool like the Firefox Web Developer toolbar to see if a module's CSS is styling your elements and causing problems. When you install a new module you can also look in the module's folder to see if it is including a CSS file.

Debugging problems in your theme

If you are having trouble getting your theme to look right, then start with a simple base theme or select a theme that is known to work and as close to your end goal as possible. Learning the CSS classes in your theme is critical to understanding where your CSS changes will be applied. Try to find other themers by talking in IRC, providing documentation, and tutorials of what you have done. Make your existing theme available so that others can review and provide feedback. Make friends with PHP programmers who can help you understand what the underlying PHP theme template engine is doing. Consider an exchange of skills to get support.

This page was initially written by Kieran Lal, and Trae McCombs from CivicSpace Labs with Theodore Serbinski. If you would like to contribute or help make Drupal theming easier, join the themes mailing list, or contact Kieran.