The CSS Panel and Browser Inspectors

Now that you know more about CSS, it’s time to experiment. On, 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

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

Web inspector in action