Joomla 5 is the latest version of the popular content management system, and it comes with a beautiful default template called Cassiopeia. One of the great things about Joomla is that you can easily customize your website's appearance by adding custom CSS code. In this article, we'll explain where to place custom CSS in the Joomla 5 template Cassiopeia.

Understanding Joomla Template Structure

Before we dive into where to place custom CSS in the Cassiopeia template, let's take a quick look at the structure of a Joomla template. A template consists of several files and folders, including:

- `index.php`: The main file that loads the template
- `templateDetails.xml`: Contains information about the template, such as its name and version
- `css/`: Folder that contains the template's CSS files
- `images/`: Folder that contains the template's images
- `js/`: Folder that contains the template's JavaScript files

When you install a new Joomla template, it comes with default CSS styles that determine how your website looks. However, you can override these styles by adding your own custom CSS code.

Placing Custom CSS in Cassiopeia

Now that you understand the basic structure of a Joomla template, let's take a look at where to place custom CSS in the Cassiopeia template.

The best practice for adding custom CSS to a Joomla template is to create a new file called `custom.css` and place it in the `css/` folder of your template. This ensures that your custom styles are separate from the default styles, making it easier to manage and update your website in the future.

Here are the steps to add custom CSS to the Cassiopeia template:

1. Log in to your Joomla administrator panel.
2. Go to Extensions > Templates.
3. Click on the Cassiopeia template.
4. Click on the "Advanced" tab.
5. Scroll down to the "Custom CSS File(s)" field and enter `css/custom.css`.
6. Click on the "Save" button.

That's it! You can now add your custom CSS code to the `custom.css` file in the `css/` folder of your Cassiopeia template. Any styles you add to this file will override the default styles in the template's CSS files.


Customizing your Joomla website's appearance with custom CSS is a great way to make it stand out from the crowd. By following the steps outlined in this article, you can easily add custom CSS to the Cassiopeia template in Joomla 5. Remember to always use best practices when modifying your website's code, and make sure to back up your files before making any changes.