Using CSS in Drupal Design

For a Drupal Designer, when using the Drupal CMS to design websites, it is sometimes easy to fall into the mindset of looking for a module to do everything for you. After all, Drupal and other content management systems including Wordpress and Joomla are built upon an extensible framework that allows you to add functionality using modules (for Drupal), plugins (for Wordpress) or extensions (for Joomla). Many of these modules add programming functionality, but there are others that provide theming solutions, adding to the design and layout of your website. However, you can create advanced website designs using the existing Cascading Style Sheets ("CSS") launguage, and avoid the bloat and resource drain that too many modules can have on your server. Once you become accustomed to a handful of CSS properties, you'll find that making changes to your Drupal website will become easier.

Mixing it Up

You can use CSS2 alongside CSS3 for advanced functionality as long as you choose the CSS3 properties that are compatible across most browsers. Although most web designers are concerned that they produce valid HTML, using a mix of CSS2 and CSS3 will not validate within W3C's "CSS Validator" tool, but valid HTML will pass of course. This is not to say that there is anything wrong with mixing the two, its just that the validation tool can only validate one or the other CSS document type. We feel that as long as the HTML is valid, the extra benefit of adding some CSS3 Properties into a CSS2 Style-sheet is worth it.

CSS Style-sheets in Drupal

Your Drupal theme comes with a CSS Style-sheet called "style.css", and it is here that you can amend the settings for your theme and alter the properties, layout, background images, and colours etc. It is advisable sometimes to add additional style-sheets to your theme in order to keep things manageable.

You can do this by amending the "theme.info" file that you'll find under your themes directory. So, for example if we download the Marinelli theme for Drupal7, you'll find a "marinelli.info" text file in the folder. There is section in this file that looks like this:

stylesheets[all][] = css/common.css
stylesheets[all][] = css/links.css
stylesheets[all][] = css/typography.css
stylesheets[all][] = css/forms.css
stylesheets[all][] = css/drupal.css
....

Lets say that you want to add a new style-sheet called "mystyles.css". You enter the following line into the "marinelli.info" file as follows:

stylesheets[all][] = css/mystyles.css
....
stylesheets[all][] = css/common.css
stylesheets[all][] = css/links.css
stylesheets[all][] = css/typography.css
stylesheets[all][] = css/forms.css
stylesheets[all][] = css/drupal.css
....

Then simply add your new style-sheet to the "/themes/marinilli/css" folder. Simply upload the files to your server, clear out the cache, if any, and your new CSS style-sheet will take effect.

Hooking into Drupal Template Files

Once you become familiar with adding some CSS coding, you can begin to add new styles to your theme. If you are using template files such as "page-front.tpl.php", which is a template used to override the front page, you can begin to add CSS ID and Class selectors to the HTML attributes you'll find there, such as <div>, <span>, <p>, <ul> etc..

Hooking into CSS using Existing Drupal Modules

Certain modules come with the functionality to insert a CSS Class into the piece of content to which that module relates. For example, the Views Module includes such an option. This can be seen here:

Other modules such as Panels include the ability to add CSS classes too, as seen here;

With Panels you can choose to add an ID or a class, thereby increasing granularity of control over your CSS styles.

Other Options

If you are not using PHP template files such as the one mentioned above, there are a lot of modules that work with CSS in order to help you hook into the HTML attributes of your theme. Modules such as CSS and Unset CSS are worth trying out. and there are quite a few other CSS modules available to download from Drupal.org.

Get Styling

Once you have settled on your preferred way to hook into or bypass the core CSS style-sheets that come with Drupal, you'll see the wide range of styling and layout options that CSS affords the designer. Alongside overriding already existing CSS, creating you own style-sheets for particular customised content can be a great way to keep everything compartmentalised so that it may easily be removed later, should you want to. This will help you to avoid having to pick through existing style-sheets using something like Firebug in order to undo the changes that you made.

Getting to grips with CSS in Drupal gives you a great deal more control over your website than you would otherwise have.

Related Information

If you are thinking about using CSS3 properties, our Blog article on using Internet Explorer compatible CSS3 in Drupal Design provides a review and explanation of CSS3PIE, a third party solution to the issue of IE incompatibility.

Feel free to post your question, feedback and comments below