As you first dive into customizing a theme, you’ll find that CSS is most likely where you’ll be starting. It’s one of the easier languages to understand in web development and makes for a logical starting point in editing a website that’s already been created — like when using a pre-built WordPress theme, for example!
What is CSS and what can I customize with it?
CSS is used to visually style your website. You’ll use CSS to do things like modify colors, add padding and margin to elements, change font size and styling, and even hide elements in certain cases.
Where do my CSS customizations go?
NOT Recommended: Never edit any files of the parent theme and never add your custom CSS to files already in the parent theme.
NOT Recommended: In most of our themes, you’ll find a “Custom CSS” option you can utilize through your WordPress admin at Appearance > Theme Options > Styles > Custom CSS. If you’re using the “Developer” theme base of Denali or Jump Start, you won’t have this option. But that option really is only meant for those pasting a snippet here or there. It can get cluttered and messy really fast.
Recommended: If you’re going to be making CSS customizations and you want to do all this right, I strongly suggest installing a child theme and putting all of your CSS customizations in its style.css.
The WordPress Codex says I need to “enqueue” my child theme style.css; how do I do this?
Stop, you actually don’t need to do this! When using a Theme Blvd theme, it’s already setup automatically to not only include your child theme’s style.css, but include it after all styles of the theme. This ensures that, if written correctly, any custom CSS you put there can potentially override just about any CSS of the theme.
What theme file do I find that CSS I want to change?
Often I get asked by customers where, or in what file, to find some bit of CSS of the theme. But if you’re asking this question, you’re probably not taking the right approach to making your CSS customizations. You never want to be digging through theme CSS files, as this is probably the least efficient way to make edits.
So then what do you do? The secret is to become a pro at using your web browser’s developer tools. With a few clicks on the front-end of your website, you can use these tools to determine what CSS rule is styling something on the webpage so you know how to override it from your child theme’s style.css.
Is proper formatting and organization actually important?
Many CSS beginners will end up with a style.css filled with random CSS snippets they’ve pasted from different sources, with no regard to formatting and organization. It may seem unimportant at the beginning of your customization journey, but as your stylesheet grows, you’ll regret it.
For example, if a single opening or closing bracket is out of place, it could potentially kill all CSS that comes after that point or, even just a seemingly random large block of your CSS. And if your stylesheet is a giant mess, it’s going to be likely this happens at some point and it’ll be hard to diagnose.
So as you start to learn, do a little reading on CSS formatting and organization and make sure you come up with a consistent system that works for you, in your stylesheet.
Where can I edit the mobile styles of my theme?
Believe it or not, any overriding CSS you write is already going to be effecting mobile styles. The trick is understanding how @media queries work so that you can target specific viewport ranges with any CSS customizations you make.