CSS Quick Reference

A Quick Primer on CSS

Every element on a web page has visual and layout properties such as size, position, spacing, and color. CSS controls these properties. To apply styles, CSS targets elements using identifiers, most commonly classes and IDs. 

At its core, CSS lets you express intent in a simple way: apply specific visual rules to elements that match a given selector. In practice, this means saying something like, “Style every element with this class,” or “Style this one specific element with this ID.”

The example below demonstrates how to change the background color of an element using the class .edit-element, and how to modify the text color of an element using the ID #anotherElement.

.edit-element {
    background-color: #193DAF;
}

#anotherElement {
    color: #ffffff;
}

CSS is a universe unto itself, and no single article can capture everything it can do. For anyone who wants to go deeper, two of the most reliable places to learn are the official documentation on the Mozilla Developer Network and the CSS reference on W3Schools. Together they offer clear explanations, practical examples, and a solid map of what the language can do and how it behaves in the real world.

For additional iDonate specific examples, refer to the articles on Common Custom CSS Queries and Applying CSS to Goal Meters.

How to Determine Element Class or ID

The first step in writing a CSS rule is identifying the element you want to modify and understanding how it is labeled in HTML. While this can be challenging at first, modern browser developer tools provide a clear and reliable way to inspect page elements.

1. Begin by navigating to your browser’s Developer Tools > Elements (Inspector in Firefox) Tab. 
   1. Mac: Cmd+Option+I or Tools > Browser Tools > Web Developer Tools
   2. Windows/Linux: Ctrl+Shift+I or F12
   3. Any: Right click element > Inspect
2. Select the element inspector tool, which allows you to hover over items on the page and see how they are represented in the underlying HTML. When you click the desired element, the Developer Tools panel will focus on that element and display its associated attributes, including IDs and classes.
3. Copy the appropriate ID or class and use it as a selector in your CSS. After adding your style rules and applying the update, the changes will be reflected immediately on the page, allowing you to verify and refine your work efficiently.

Giving Form CSS Quick Reference

The table below illustrates the CSS queries that target the high-level elements of the Giving Form.

It is also worth noting that these are high-level class names and ID's, so to fully customize Giving Form elements, it will often be required that you find more specific classes and ID's.