Saturday, December 18, 2010
What is CSS?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 how CSS is used in Joomla.
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 Firefox 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.
Take a look at my previous post about top 10 Free joomla 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).
