New to WordPress? New to CSS? It’s a lot to soak up, but CSS should be the least of your concerns. The good news is that USP Pro and SES Pro ship with numerous predefined form styles, but more than likely you’ll want to make a few tweaks to really fine-tune the forms and make them fit with your site’s unique design. This post walks through a couple of examples using USP Pro to show the basics of CSS styling.

Basics of CSS

To change the way something looks on the page, you can add some CSS to your theme’s stylesheet, or to the plugin’s stylesheet (under the CSS/JS tab). For example, to change the appearance of form labels, we target the <label> tag with the following CSS (again, using USP Pro as an example):

.usp-label { color: red; }

That will change the label text color to red. Note: if this is for SES Pro, use .ses-input label instead of .usp-label. Each plugin has it’s own set of selectors, here is a CSS reference for SES Pro.

To change other properties, such as padding, font-weight, and background-color, we could apply the following code:

.usp-label { 
	color: red; 
	padding: 20px;
	font-weight: bold;
	background-color: #000;
}

To really “see” how this works, try adding these styles to your theme or via the plugin. Refreshing your web page, you should see that the form labels display red, bold text on a black background, with some padding around the text.

If that makes sense, you’re ready to start customizing with CSS. You can find other tags such as <input> and <form> by inspecting or viewing the source code of your web page. This can be done with any browser.

Then once you know the tag(s) that you want to style, it’s a matter of using a good CSS reference to determine which property will do the job. It takes a few tries to really “get it”, but once you do, you’ve acquired an invaluable skill to have on the Web.

Troubleshooting

If the CSS doesn’t seem to be working, try the following:

  • Verify that the stylesheet is included on the page (view source code)
  • Verify that you are targeting the correct tag (inspect source code)

If both of these look good, then it could be that your theme’s default styles are overriding the new styles. This is common and just a part of how CSS works. With “cascading” specificity. So if your theme defines a style such as:

.page form label { color: green; }

..it will override the .usp-label selector used in our previous example. Notice the selector used here, .page form label. That is more specific than what we use in our previous example, .usp-label. So the label text would be green instead of red. No worries, though. We can override the theme’s styles by prefixing the USP selector like so:

.page form label.usp-label { color: red; }

This is more specific than the theme’s selector, so our new style will be applied to the label. Even better than trying to figure which selectors the theme is using, we can use #usp-pro, which is wrapped around every USP Form. So we can do this to get the job done:

#usp-pro .usp-label { color: red; }

..or, for SES Pro:

#ses-pro .ses-input label { color: red; }

That should be enough to override just about anything most themes are doing, but if not, and the new styles still aren’t applied, we can strengthen the selector as follows:

#usp-pro.usp-pro .usp-label { color: red; }

..or for SES Pro:

#ses-pro.ses-pro .ses-input label { color: red; }

Notice how we are chaining the ID and class of the form’s outer tag by writing #usp-pro.usp-pro. That’s very powerful and should easily get you there. Even so, some themes may be using some extreme selectors (for whatever reason). So feel free to add additional selectors until the custom styles are applied.

Summary

Applying some CSS may be needed to fine-tune forms to match your theme design. To do so, examine the source code of your web page to determine the proper selector. Then check with a CSS guide (there are many available online) to get the correct property name(s) to use. After adding the CSS to your stylesheet (via theme or plugin settings), refresh the page to see the changes. If the new styles aren’t applied, follow the steps outlined above. Remember to check your design in multiple browsers and devices to make sure that things are looking as intended. Wash, rinse, repeat.

Hopefully this quick guide has been useful for you. Again, in most cases, the predefined USP/SES styles should be sufficient, but generally it’s necessary to do a bit of customization with CSS. It’s a great skill to have if you’re working online.