Add Custom CSS to an element

Adding custom CSS to an element gives web creators almost unlimited flexibility in designing their web pages. 

Add custom CSS

To add custom CSS to an element:

1. Click the Style tab.
   
2. Open the Custom CSS field.
   
3. The CSS editor opens.
   
4. Add the CSS code.
   

CSS code is added to the selected class, so you can have separate CSS code for different classes and states. In the example below, we’ll use custom CSS to change the default text color and the hover text color. 

1. Add a Heading widget to the canvas.
   
2. Click the Style tab.
3. Open the Custom CSS field.
4. In the CSS editor enter the following:
   color:red;
   The heading text turns red.
   
5. In the Classes text box click the ellipses and select hover.
   
6. Open the Custom CSS field.
7. In the CSS editor enter the following:
   color:blue
   Now the text is red, but when you hover over it, it turns blue.
   
   Since Custom CSS applies to device sizes as well as states, you can change the text color according to device size.
8. Click the Local class.
   
9. Click the mobile icon.
   
10. Open the Custom CSS field.
11. In the CSS editor enter the following:
    color:green
    The heading text turns green for mobile devices.