Creating Custom CSS To Override Default CSS

[tomlom]

Hey everyone!

First time here, and was hoping that someone would be able to help with an issue I’ve been dealing with. I’ve had specific details not to modify the original CSS, and instead told to create a new CSS that contains specific overrides for the original CSS. How would I go about doing that efficiently?

Any help would be appreciated. Thanks!

[Beverleyh]

1. Use the same selectors, but make sure the override CSS comes later on in the cascade, either in the same stylesheet, separate stylesheet, or internally added in the document head.

2. Use selectors with a higher specificity – load order won’t matter so much.

3. Small CSS could go inline in the HTML elements – not ideal, but would almost certainly take presidence, unless…

4. important! is in use in the stylesheet. This could also be something that you use yourself (e.g. to override CSS that is calculated/inserted on the fly via JavaScript), but it isn’t recommended unless absolutely necessary (as may be that case with JS).

For further CSS-related information, research more about “CSS selectors and specificity” via Google. Also try/learn to use use the developer toolbar to identify selectors and stylesheets in use on your website – F12 in most browsers.

For advice on how to go about adding CSS overrides in your particular CMS (WordPress/Drupal/Joomla!), again, hit up Google.

For any further help, please ask a more specific question using actual examples of your own code. In CodePen is the preferred way.

Good luck with your project.

[Author]

Posts