Getting Started with CSS and WordPress

A great place to get started with web coding is CSS. CSS tells the web browser how to display the information on the page, for example the color, size, or font to use. WordPress makes it particularly easy to add your own CSS to your website.

WordPress Customizer

When you are logged into your website, most likely you’ll see a Customize button in the upper-left hand corner of your screen (in the admin bar).

After clicking the button, the Customizer will open on the left-hand side of the page.

Note: These options will vary depending on what theme you’re using but you should see Additional CSS (highlighted here in red) as one of the options.

After clicking Additional CSS you get a white box where you can enter custom CSS.

For example, here I’ve entered

body {
    background-color: black;
    color: white;
}

which gives me a black background with white text (a quick dark-mode version of the website). Currently, these are just preview values. If you want to have the changes applied to the live website, click the Publish button at the top of the screen.

Sal Ferrarello (@salcode)

Sal is a PHP developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a senior backend engineer.