# Can I Add Custom CSS to My Popup?

Yes, you can. It is quite simple to further customize your popups using CSS with Popupsmart. Here is a guide on how to add your own custom CSS to your popup. But first, let’s cover the basics of CSS.

# What is CSS?

Cascading Style Sheets or CSS is a style sheet language you use to selectively style your markup language elements such as HTML. CSS is a fundamental technology of the World Wide Web, along with HTML and JavaScript.

CSS entire structure is known as a ruleset or rule and includes two parts:

• The selector: A way of indicating which part of the popup you would like styled.
• The declaration: The style that will be applied to a selected element. For example, this CSS selects subscribe button in a popup, setting the color to purple: .popupsmart .psButtons { background-color:purple!important }

In this example, we target <.popupsmart .psButtons> elements to apply the style background-color:purple. Since there are times when codes conflict, we add "!important" at the end to make sure the code works.

In this code example (.popupsmart .psButtons), the leading dot indicates that .popupsmart .psButtons is a class.

# How to add Custom CSS to My Popup?

To show you how to add your custom CSS to your popup let's add the CSS code above to its popup:

1 - Create a new campaign, Choose a popup and go to Popupsmart's popup builder's "Customize" step. Next, click on "Edit General Appearance" to design your popup in detail.

2 - Scroll down to "Custom CSS". Now you have to find the class name of the part you want to style. Since each popup has a different class name, you must search for its specific class name for your custom CSS. To find it just right-click the part you want to change and then click on inspect.

3 - For instance, in this code, we wanted to change the color of the “Subscribe” button from red to purple. Right-click on the subscribe button and find the class name and copy it to your clipboard. In this popup the class name was this: <button class="psButtons".

4 - All the class names start with .popupsmart. You can add (psButtons) after that with a dot in the beginning and write down your code on the left side. After adding it, you should immediately see the rule being applied on your button. Sometimes codes conflict so it’s important to add a "!important" tag at the end of your CSS code to make sure it works perfectly.

Make sure your CSS is correctly formatted. Once you complete all the settings, save and publish the popup. Do not forget to turn the status toggle on to make your popup visible on your website.

Do you have additional questions about how to add custom CSS to your popup? Contact Us!