Cascading Style Sheets are the main component of a website’s design – these files dictate pretty much every aspect of how your website looks and acts on any client browser. They also make it very easy and convenient to change your website’s layout however you see fit.
If you want to customize the look and feel of your website and have some knowledge of CSS, it’s relatively easy to replace your current template’s style sheets with your own in order to make the changes you need. [CSS Preprocessor Guide]
If you want to make small changes to your template, editing the original CSS files (after creating backups, of course!) is the easiest way to go. However, that is not the recommended practice, especially when you need to make major changes, mostly because new themes can be automatically updated and all your changes may be lost.
Creating a new, separate stylesheet can be as simple as creating a single file (e.g. “style.css” “customstyle.css” and placing it in the theme’s directory. Depending on the website’s complexity, you may want to create separate files for different parts of the website – for example, the home page, blog posts archive, photo gallery, forums can all be styled independently.
Since you’re creating the CSS files for an existing template that already has its own style sheets, you will need to view the original CSS files in order to know what selectors to use. Note that many modern themes don’t use the main style.css in the root directory, instead they have the CSS files placed in appropriate folders (e.g. “/library/css” or “/css”) – you can find them by browsing the template’s directory. To make things easier, you can just copy the original CSS code to your custom stylesheet and customize it as necessary.
After you’ve created your custom style sheet, you’ll need to integrate it into your existing theme – usually, this is an easy process that involves editing one or a few lines of code (to include your new CSS file, and remove the old one) in the header of the website. The location of the files and the placement of the code vary depending on what content management system you use.
Integrating your custom CSS into a WordPress theme is quite easy – you’ll need to replace the link to the original stylesheet with your own, or add it alongside. The code is usually located in the functions.php file in the theme’s directory:
You’ll need to replace “/css/style.css” with your own path, for example “/mycustomcss/customarchives.css”.
Or, if you don’t have any duplicate selectors in your custom stylesheet, you can place your stylesheet to load alongside the main CSS files:
The recommended process for any theme customization for WordPress is actually to create a child theme, which would use all the main theme’s files, but also allow you to use your own CSS styles. The process would be exactly the same as above, but you’ll be working with a separate folder (“supertheme-child” for a theme named “supertheme”), as well as new functions.php and style.css files that you’ll need to create based on the original ones.
Integrating a custom style sheet with an existing Drupal theme is even easier than WordPress, which is quite surprising – the only thing you need to do is add your stylesheet to the “.info” file (e.g. “mytheme.info”) in the theme’s root directory.
The code is simple:
You can replace that with your own stylesheet or add it below if you want the theme to use both files (do note that the stylesheets further down the list will override the ones before them, this is the Cascading part of CSS in action):
You can specify a few options in the first bracket (replacing “all”) if you want your stylesheet to only apply in certain conditions. For example, if you want your stylesheet to be active only when the screen/browser width is 500 pixels, you’d use the following code:
The empty square brackets must be present – they show that the stylesheet is appended to an array and are necessary for proper function.
Adding your custom stylesheets to Joomla is just as easy as WordPress and Drupal. What you need to do is add a link to your stylesheet to the header of the template, which can be done in the joomla template’s index.php file.
Add your custom stylesheet in the following manner in the “head” tag (you’ll probably want to add it last, right before the closing “/head” tag if you load it alongside the original CSS files):
As you can see, it’s quite easy to add your own custom CSS files to your existing theme in WordPress, Drupal and Joomla. The procedure is more or less the same for most other major CMS, and if you’re using a static page generator, it’s even easier – just add a link to the CSS file in the header of the website and you’re good to go!
If you don’t see your changes in the browser, you may need to clean the browser cache or re-login to the website if you’re using a server side caching plugin. The hardest part is coding the stylesheets, but once you get the hang of CSS, you’ll be able to customize any part of your website to your liking.