Editing the CSS on your page gives you the ability to change how your page looks.
Where to find the CSS Override Box
To get to the CSS override box, you'll need to head to the Creative section of your page settings. Scroll down to the bottom of the page, and you'll be able to see this box:
Basic CSS Changes
For all these examples, we'll use the h3 tag as the element identified.
How to edit text font:
h3 {font-style: roboto}
How to change text size:
h3 {font-size: 15px} or .h3 {font-size: large}
How to highlight text:
h3 {background-color: yellow}
How to change text color:
h3 {color: red}
How to change multiple elements at once:
h3 {font-style: roboto; font-size: 15px; background-color: yellow}
How to find your exact CSS element to edit
To find the exact element and its identifier on the page, you can use the Inspect tool in your browser. For example, if we'd like to highlight the "Cover Processing Fees" box, we'd need to find out how it's identified first.
This was done using Google Chrome. For other browsers, they should have a similar process for using the Inspect tool.
Right click and hit Inspect on the drop-down menu.
Mouse over the element you'd like to change.
Now, we see that the identifier is .donor-cover-fees-callout
When we'd like to make the edits, the code should look something like this:
donor-cover-fees-callout { background-color: yellow
}
If you'd like to find out more about how you can edit the CSS or look up some more advanced style edits, go to w3schools.com to learn more.