How to Edit Template CSS in Joomla 3.x

The CSS is an acronym for Cascading Style Sheets. It represents the way in which the HTML content will appear. The motive behind creating the css is to treat the document data and its presentation separately, such that, the flexibility and the accessibility increases.

Creating a separate css file, would help in sharing the similar formatting in various html pages, that may result in the reduced complexity and the redundancy.

There are basically three types of css :

• Inline: The inline style can be used for the individual css which will not be used repeatedly in your webpage as it is applied to the specific tag, explicitly.
• Internal: This style sheet can be implemented to design a whole webpage by including it in the header file.
• External: This style sheet is basically a file with an extension “.css” which is linked to the html pages and a single change in that file would reflect the same change in all the pages or in the website associated with it. This style sheet results in the reduced time, less complexity and the less occupied space.

Sometimes you need to edit the css embedded in your template to change the appearance of your website. This tutorial will guide you how to edit template css in Joomla 3.x by following the simple steps as explained below.

Steps to Edit Template CSS in Joomla 3.x

Step 1: Once you are logged in as an Administrator, On the dashboard, click on “Extensions” option and then select “Template Manager” from the drop down list.

Step 2: Click on the “Template” that you want to edit, under the “Template section” as shown in the figure.

Keep in mind, not to click on the template name under the style section, if you do so, then you”ll not be able to edit the template files instead, you will be only able to edit the style, such as heading, layout settings, etc.

Step 3: Now go to the css folder, once you click on that, many css files will be displayed, select the one you want to modify.

Step 4: I have clicked on “print.css”, you will find the code associated with the file , at the right side of it. Here you can see that,“text align” is set to “center” as highlighted in the figure shown below.

You can change the text alignment, margin, background and other attributes according to their availability in your template.

Step 5: As, I described above, you can change any of the attributes, I have changed the text alignment to “justify” from “center” as shown below.

Once you are done with the changes, click on “Save &  Close” button.

Step 6: Once the changes have been made,  you”ll see the message “File successfully saved”.