Now that you know more about CSS, it’s time to experiment. On WordPress.com, you can add custom CSS by going to Customize → Custom Design → CSS. Self-hosted sites include a custom CSS editor as of version 4.7, at Customize → Additional CSS.
Self-hosted Customizer’s CSS panel
How do you find which elements in your theme to target so that you can write your custom styles? For that, you’ll need your browser inspector
, which let you see the HTML and CSS of any web page. Every modern browser has a web inspector — they’re all similar, so feel free to use the one you’re most comfortable with.
Browser inspectors are like opening the hood of a car and examining the machinery inside. You can fiddle with the HTML and CSS of a web page and see your changes in real time. The changes you make in your browser inspector don’t affect the website. They’re visible to you only, and when you reload the page, your changes disappear.
Web inspector in action
We’ll be moving on to live examples in a bit so you can see in real time how to make CSS Edits using the web inspector. In a nutshell, here is the process:
- Right-click the element whose style you wish to change. In the menu that pops up, select “Inspect Element”.
- Examine the CSS of that element, and make your changes in the web inspector. You’ll get a realtime preview.
- When you have it to your liking, copy the updated CSS changes into the CSS Panel (Self-hosted WordPress: Customize → Additional CSS / WordPress.com: Customize → Custom Design → CSS).
- Save your changes in the CSS panel and reload your site to see the changes.
Now we will have some examples that walk through some common things people change with CSS.
CSS works a little like genetics. We may inherit the genes for both brown and green eyes, but which color will our eyes be? Likewise, more than one CSS rule can apply to a single HTML element. How does the browser decide which rule to use?
The browser uses what’s called the cascade to choose which rule to display on screen, based on a number of criteria:
- Class selectors override HTML tag selectors.
- ID selectors override both class and HTML tag selectors.
- HTML elements can be nested like china dolls. The more nested an HTML element is, the more specific it is.
- Rules applied to the innermost nested HTML elements override those applied to the outer HTML elements.
- Order matters. Rules that appear later in the CSS document override those that appear earlier.
You’ll see some examples of these in action by diving deeper…
Ready to wade further into the CSS waters? Check out these handy resources to get going.
Dipping In Your Toes
Learning how to target your site’s CSS will help you make certain design and layout changes. This three-part series from The Daily Post will help you customize your site with CSS. The techniques are applicable whether you’re hosted on WordPress.com using Custom Design – or on your self-hosted site, using the built-in Additional CSS panel in the Customizer as of WordPress 4.7, the Custom CSS module in Jetpack, or a child theme.
The WordPress.com support pages include some helpful CSS references:
This guide to using browser inspectors from The Women’s Coding Collective has some good practical examples.
Use a color-selection tool like Flat UI Color Picker to get colour codes to use in your CSS.
HTML is the peanut butter to CSS’s jelly – they’re meant to go together. These tutorials will help you get a handle on HTML basics.
Explore a range of CSS tutorials, from text-based to video lessons.
Get familiar with media queries so you can target elements on particular screen sizes.
Need a Helping Hand?
- If you’re a WordPress.com user and are stuck on a tricky CSS challenge volunteers and staff are ready to help in the CSS Customization forums
- If you need help with a self-hosted site, the WordPress.org forums are the place to be. Each free theme in the directory also has its own forum where you can ask questions specific to the theme.