How to Customize Joomla CSS?
CSS
- CSS stands for Cascading Style Sheets
- CSS describes how HTML elements are to be displayed on screen, paper, or in other media
- CSS saves a lot of work. It can control the layout of multiple Web pages all at once
- External Style Sheets are stored in CSS files
CSS in Joomla Template
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');
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).
Best Joomla Hosting Recommendation
ASPHostPortal.com provides our customers with Plesk Panel, one of the most popular and stable control panels for Windows hosting, as free. You could also see the latest .NET framework, a crazy amount of functionality as well as Large disk space, bandwidth, MSSQL databases and more. All those give people the convenience to build up a powerful site in Windows server. We offers Joomla hosting starts from $5/month only. We also guarantees 30 days money back and guarantee 99.9% uptime. If you need a reliable affordable Joomla Hosting, we should be your best choice.