Joomla Tutorials: How to Edit Your CSS and HTML Files on Your Joomla Web Site

Your Joomla web site uses CSS to keep the text, background colors, module header colors, headings, etc the same throughout your site. If you want to change the color of your content headings, your text, or background page color, you would do this from the CSS file. You can also change the colors of your links, the background of your menus, or the name of image files that show up.

The HTML tells your template where to pull modules in, and includes the footer text on your template (depending on your template). If you want to change the footer text on your template, this is the place to do it. Also, some templates have some alternate options in the HTML file such as making your template right justified, centered, or left justified. Some also allow you to change whole color schemes from the HTML file. Generally, this is found in templates you buy and the template will come with instructions on how to switch between the different options in the HTML file. It's usually as easy as typing the name of the color or entering a "1" or "0".The HTMLl file basically tells your Joomla web site template what to pull into view from the files on your server and where to display them.

How to edit your CSS file in your Joomla web site:

1) Log in to www.yoursitename.com/administrator

2) In the row of menus across the top, go to "site"

3) Choose template manager in the drop down menus

4) Choose Site templates in the menu that slides out to the side

5) When the page loads, put a check mark in the box next to your default template.

6) Click "Edit CSS" in the top right hand corner.

7) Make the changes to your CSS file that you wish to

8) Click the disk icon to save.

How to edit your HTML file in your Joomla web site :

1) Log in to www.yoursitename.com/administrator

2) In the row of menus across the top, go to "site"

3) Choose template manager in the drop down menus

4) Choose Site templates in the menu that slides out to the side

5) When the page loads, put a check mark in the box next to your default template.

6) Click "Edit HTML" in the top right hand corner.

7) Make the changes to your html file that you wish to

8) Click the disk icon to save.