# CSS Customization (Predefined File vs. Custom CSS)

- **Options:**  
    Users can choose between: 
    - **Predefined CSS File:** A ready-made file containing all custom styles.
    - **Custom CSS Field:** An integrated code editor for directly entering CSS code.
- **Step-by-Step Process:**
    1. **Identify the Required Selector or Variable:**
        - Open the application in your browser.
        - Right-click the target element and select “Inspect Element” (or “View Code”) to open DevTools.
        - Locate the relevant CSS selector or variable.
    2. **Test Changes in DevTools:**
        - Modify the CSS in DevTools to preview changes in real time.
    3. **Apply the Changes:**
        - For permanent updates, either upload the modified CSS file or paste the new code into the Custom CSS field.
    4. **Verify the Result:**
        - Save the changes and refresh the page to ensure the new styles are applied correctly.

Below is an illustrated example of the CSS Customization Step-by-Step Process:

1. **Objective:**  
    In this example, we will change the color of the table header.
    
    [![image.png](https://docs.finmars.com/uploads/images/gallery/2025-03/scaled-1680-/Epdimage.png)](https://docs.finmars.com/uploads/images/gallery/2025-03/Epdimage.png)
2. **Locate the Element:**  
    Find the target element in the element tree.  
    *(Right-click on the target element and select "Inspect Element" (or "View Code") to open DevTools.)*
    
    [![image.png](https://docs.finmars.com/uploads/images/gallery/2025-03/scaled-1680-/B6eimage.png)](https://docs.finmars.com/uploads/images/gallery/2025-03/B6eimage.png)
3. **Identify the Style and Selector:**  
    Look for the style that applies the current color to the element, and note the corresponding selector.  
    Test different colors directly in DevTools until you select the desired one.
    
    [![image.png](https://docs.finmars.com/uploads/images/gallery/2025-03/scaled-1680-/0L2image.png)](https://docs.finmars.com/uploads/images/gallery/2025-03/0L2image.png)
4. **Apply the Changes:**  
    Once the color is finalized, copy the selector and the new style into your CSS file or the Custom CSS field.
    
    [![image.png](https://docs.finmars.com/uploads/images/gallery/2025-03/scaled-1680-/Fpoimage.png)](https://docs.finmars.com/uploads/images/gallery/2025-03/Fpoimage.png)
5. **Enhance Specificity if Needed:**  
    In some cases, to ensure your style takes precedence, add the `!important` declaration to the property.