CSS snippets let you apply custom styles to your Joomla site without editing template files directly. They are ideal for any visual customisation that doesn't require loading an external file — things like tweaking fonts and colours, adjusting spacing, hiding or showing specific elements, fixing layout issues introduced by a template or third-party extension, or adding responsive design adjustments for mobile devices.
To learn how to add custom CSS in Joomla, follow the steps below:
- Log in to your Joomla administrator
- Go to Components → Tassos Code Snippets
- Click New
- Enter a descriptive Title (e.g. "Custom Button Styles")
- Select CSS as the Code Type.
- Choose one of the following insertion locations
- Write or paste your CSS into the editor. Do not include
<style> tags — write pure CSS only. Your CSS is automatically wrapped in a <style> tag and injected at the chosen location.
- Open the Conditional Logic tab to restrict which pages or users the snippet runs on. Leave it empty to run it site-wide. Learn more in Using Snippet Logic.
- Set Status to Published and click Save & Close.
- Check specificity: Your CSS might be overridden by template styles — use browser DevTools to inspect the element and increase selector specificity or use
!important as a last resort
- Verify snippet is published: Check status is set to Published
- Clear cache: Clear both Joomla cache and browser cache
- Check location: Ensure snippet is in Header location
- Validate your CSS syntax
- Check for missing semicolons or curly braces
- Test on different browsers and devices
- Use browser DevTools to debug
- Ensure viewport meta tag is present:
<meta name="viewport" content="width=device-width, initial-scale=1">
- Test media query breakpoints
- Check for conflicting template styles
Rated: 