Custom CSS: The Basics

What is CSS?

In their simplest form, webpages are made up of HTML elements. CSS, an acronym for Cascading Stylesheets, is the language that determine how these HTML elements are displayed. CSS is used to determine things like fonts, background colors, text size and style, borders, and more.

To use an analogy, if your house was a webpage, HTML would be the structure and CSS would be the decoration. Like using paint to change the color of a wall, you can use CSS to change the color of links, hide elements, and a whole lot more!

How can I customize the CSS on a WordPress site?

Every WordPress theme includes a stylesheet file. This file includes the CSS styles that give that theme its look. There are a few ways that you can add Custom CSS to your site to modify that look:

1. You can use a plugin like Jetpack and its Custom CSS feature to add your custom CSS.
2. If you’re comfortable working with a little code, you can create a child theme to add CSS and custom functions. (https://codex.wordpress.org/Child_Themes)
3. If you created your own theme, you can modify the style.css file directly. However, if you did not create the theme you’re using should never edit the theme directly. Otherwise, your changes will be overwritten any time there is a theme update.

CSS Basics.

Like any other language, there are specific rules to follow when writing CSS in order to be understood. No matter which method you choose to customize the CSS on your site, you’ll need to familiarize yourself with the syntax of CSS.

• Selector: The element that we’re targeting. It can be an HTML tag, an ID, a class, or a combination of these.
• Declaration block: One or more declarations, each separated by a semi-colon.
• Declarations: Each declaration includes a property and a value separated by a colon.
• Property: The attribute that we’re changing.
• Value: The value we want to apply to the property.

If you haven’t worked with CSS before, that may sound a little overwhelming. Let’s take a look at an example to see if we can clarify what each piece is.

h1 { color: #000000; }

• h1 is the selector. Thus, this will target all <h1> tags in your site.
• color: #000000; is the declaration block.
• color is the property.
• #000000 is the value, which in this case is the hex code for the color black.

After breaking it down, we can see that this example will change the color of all h1 elements to black.

How can Jetpack help?

As mentioned above, Jetpack includes a feature called Custom CSS. This feature allows you to add new CSS rules to your site right from your Dashboard. You don’t need to go through the hassle of creating a child theme or worrying about editing your theme directly. This custom CSS can be added to your site in addition to your theme’s existing CSS rules, or it can completely replace your theme’s existing stylesheet.

You can get started by following these steps:

1. Activate Custom CSS under Jetpack > Settings in your Dashboard.
2. Navigate to Appearance > Edit CSS.
3. Add your custom CSS rules to the large editor.
4. Use the “Publish” meta box on the right hand side to preview and save your changes.

You can read more about each of the Editing Options in our Custom CSS support document.

Can I use a CSS preprocessor?

Over the last several years CSS preprocessors have become very popular. CSS preprocessors allow advanced users to take a more programmatic approach to CSS. They allow you to use variables, mixing, nesting, and a lot of other techniques to more efficiently write your CSS styles.

Jetpack allows you to use Sass or LESS if you’d like. You can do so by following these steps:

1. Navigate to Appearance > Edit CSS.
2. On the right hand side, find the “Preprocessor” option under Publish and click the “Edit” link.
3. Select your preprocessor of choice (Sass or LESS) and save your changes.
4. Begin writing Sass or LESS in the main CSS editing area.

Where can I learn more about CSS?

This is a high level overview of CSS and how to use Jetpack’s Custom CSS feature. It takes time to learn and get comfortable with CSS. Luckily, there are countless resources available, whether you are just learning the basics or trying to write more efficient CSS with a preprocessor.

• A CSS Adventure is a great resource to learn more about the basics of CSS.
• An Intro to CSS: Finding CSS Selectors helps you apply what you’ve learned about CSS to real examples.
• The WordPress.org Themes and Templates forum is a great community where you can get help with questions about using CSS in WordPress and help with customizing your theme.

Is there a specific topic or feature of Jetpack that you’d like us to cover more in-depth in a future post? Let us know in the comments!

Ryan C.