Joomla CSS for beginners

I got this email a while ago, which underscores my point:

Kris, the type of things I struggle with now in Joomla are design issues. I have clients who love a template -- in fact they choose the template -- BUT they want the background to change, they want more tabs in a horizontal menu than it will hold, or they want a user area where there is none.  "Oh, just move that over to the left and insert our address, add a blue bar between this place and that.

I know just enough CSS and PHP to be dangerous.  It would be helpful if I could just understand all the steps to creating a new user area, and that includes where to put the CSS and PHP code.

In this post I will write about how I work with CSS in Joomla.
In a later post, I will explore how to add module positions to a template.

What is CSS?

Before we start, you need to know what CSS is. I strongly believe that the most important skills for a Joomla user to have is HTML and CSS. And friendliness, of course ;)

If you know HTML and CSS, you have a huge advantage when trying to customize your website. Most extensions are fine the way they look when you install them. However, if you want the look of your website to be consistent, you often need to do some CSS tweaking. So if you don't know any CSS, you'd better start learning now. This post is not about learning you the specific techniques of CSS. Rather it is written to give you an overview on Joomla CSS.

This is what Wikipedia has to say about Cascading Style Sheets:

Cascading Style Sheets (CSS) is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can be applied to any kind of XML document, including SVG and XUL.

CSS is designed primarily to enable the separation of document content (written in HTML or a similar markup language) from document presentation, including elements such as the layout, colors, and fonts.

The bold part of this excerpt from Wikipedia is the most important thing to know about CSS, in my opinion: Separation of content (HTML) and visual presentation (CSS). By using CSS, we can use one, centrally located file with all the styles. Keeping the styling separate from our Joomla articles. That way, site-wide style changes are easy to do. Just imagine if you did article specific styling in each and every article on your site. It would be a nightmare to do style changes - in the case of a redesign or template change.

Joomla CSS and templates

I'm always amused when I read a tweet saying something like: 'Joomla doesn't support IE!'. Or: 'Joomla is not search engine optimized'. Of course it is! But the template might not be. It all comes down to how the template HTML is built and how the CSS (Cascading Style Sheet) codes are implemented.

Most of the time, the template CSS files are found in the /templates/TEMPLATENAME/css/ folder.

Some templates use only one CSS file (called template.css, mostly), others have several. For optimal page performance, you should keep the number of CSS files to a minimum. This reduces the number of server requests necessary to show the page. You may sometimes see that the template uses a main CSS file which imports all of the other files by the following syntax (example):

@import url('reset.css');
@import url('joomla.css');
@import url('typography.css');
@import url('modules.css');
@import url('custom.css');

CSS Best Practices

Let's say you have installed a template from YooTheme. You could go bananas and change all of the CSS files wildly. Probably won't be a terrible thing to do either, as you can download the original files again if you screw something up.

However, there is a better way. When you want to override CSS in a template, use a separate stylesheet. YooTheme has actually implemented this structure in their templates already. They have included a blank CSS file called custom.css which is loaded after all other CSS files. This is where I keep all of my style changes.

If I want to upgrade my template, I can just copy this custom.css file, upgrade my template to the latest version and upload the custom.css file again. All set!

Don't repeat styles if you don't need to

When styling elements with CSS it's important to be specific. And to keep your stylesheet lean. What I mean is you don't need to repeat styling just because you want to restyle an element. Let's say, for instance, that you have the following style for the H1 tag in your main CSS file (template.css or similar):

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:uppercase;
}

The normal styling for H tags are bold. Maybe you want to add the styling to make the header tag use the normal and not the bold style of the font. And, at the same time you don't want to have uppercase letters in the H1. Of course, you could do it like this, adding the following code to your custom.css:

h1 {
font-size:24px;
color:#d7d7d7;
margin-bottom:1em;
text-transform:none;
font-weight:normal;
} 

This works, but it's not good code. You repeat all of the styling even though you just want to alter one style and add another. This is a better way:

h1 {
text-transform:none;
font-weight:normal;
} 

In this case, you only add the styles that are different from the original. The other styles are left untouched.

Use Firebug to Test Your CSS

One of the tools I use to test my CSS is called Firebug. It's an add-on to Chrome which gives you a lot of information about the CSS and HTML structure of a web page. When you have Firebug installed, you can right-click on an element and choose 'Inspect element'. The Firebug window will open at the bottom of the screen. Now, you can see the HTML structure (left) and the CSS (right).

Now the fun begins! You can start experimenting with the CSS directly in Firebug. Want to change the margin of an element? The background color? Remove the border? Every tweak you would like is available to play with, and the result is instantly shown in the browser. Of course, if you refresh the page the changes are lost. When you're happy with your changes, copy the CSS into your custom CSS file and upload to your server.

You can also use the Inspector or Firebug Lite in Google Chrome or Safari.

Take a look at my previous post about 8 Free Firefox extensions every Joomla user should have.

Take some time to learn CSS

I believe every Joomla user / web site developer should learn some CSS and know HTML by heart. It makes it so much easier to modify your templates and to achieve what you (and your client?) wants.

It's not like learning PHP. I hardly know more than a handful things about PHP. HTML and CSS, however, are like second nature to me. That's because I've invested time into learning and practicing the use of these skills. This is especially true for CSS.

Easy to get started with CSS and Joomla

The easiest way of starting to learn CSS is to look at your existing template.css. Look at the structure of it and try changing some of the styles. Do a backup of the file first.

You could try and change the header tags first. Want the H2 tag to be smaller? You got it :) And now it's a site-wide change, valid for all instances of the H2 tag. Other tags to change are the a (link) tag, the p (for instance adjusting the line spacing) and the UL and LI tags (bullet list).

Recommended reading for learning CSS

To learn CSS, I always recommend the books by CSS guru Eric Meyer. He has some great insights and a huge knowledge about CSS. He describes the use of CSS in an understandable way, and gives a lot of practical examples in his books. The first CSS book I read was Eric Meyer on CSS, and it taught me a lot. For instance, he goes through the whole process of turning a table-based layout into a CSS layout. Explaining every step along the way. Even though it is many years old, it still teaches the basics of CSS in a clear and understandable manner. His newest book, Smashing CSS: Professional Techniques for Modern Layout goes further, exploring HTML5 and CSS3.

You can also find a whole bunch of good books on CSS programming over at Amazon.com.

Another great resource is A List Apart. This is a site about web development and has a lot of CSS techniques. "A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices." Really great! 

Do you have any other recommended resources for learning CSS? Share them in the comments!