You can style almost any element on your website by adding custom CSS code to the <head></head> part of your website's code – learn how 🍉

CSS (Cascading Style Sheets) is the programming language used for describing how your website elements look and behave: it defines the location, size, color, opacity, font, and other stylistic features of various components within a website.

You can edit the CSS of your website by editing already existing CSS styles. Firstly, inspect the code of your website by opening your website in a new tab, clicking the right mouse button, and selecting Inspect. It will open the web development tools menu.

Make sure you're in the Elements bar and click on the Selector icon – it will allow you to select an element on the page to inspect it. Click on the element that you'd like to edit. In this example, we will change the color of the submit button in a contact form. Let's make it red instead of green.

Once you click on the element, you will see its CSS code under the Styles tab. You can expand and zoom in to that section to see it better.

You can edit the attributes on the spot for testing. For example, the property that's responsible for button color is background-color (click the link to learn about many other properties). It looks something like background-color: some value; in the code.

To make changes to the button color, simply delete the existing color value and insert whatever color you like instead. You can similarly change other properties: the button size, text size, even the cursor animation, and so on.

In order to make this change permanently on your website, you need to:

1. Find the style block that's responsible for a particular element's appearance. In our example, the element is .grid-button--primary[data-v-64f7934c]

2. Find the particular property (color, font, size) and adjust it to your needs; in our example, it's background-color: red;.

3. Write a simple line of <style></style> code that combines everything together (element + the adjustment we want to apply to the element).

<style>.the element {what to change: how to change !important;} </style>

In our example, the code would be:

<style>.grid-button--primary[data-v-64f7934c] {background-color: red !important;} </style>

4. Once you have a code, go to your website's integrations settings and paste the code in the Custom code field. Save it and update your website to push the changes online.

Note: The changes will not be visible in the editor, they will only appear online.

P.S. If you need more advanced design solutions, we highly recommend hiring a web designer or a developer 🛠️

Additional resources

Did this answer your question?