Initializing help system before first use

# Custom CSS Styling

The styling that VDL applies to the elements shown in the Insight app are controlled by settings in an embedded stylesheet, which can be overridden.
You can provide custom CSS styling as a file called application.css within a css subfolder in your app's client_resources directory.
The file is implicitly included in each of your app's views.
If you were to add the following `vdl-section` CSS to the current state of this guide's example app:

    /* CSS file */
    .result-section {
        margin-top: 15px;
        height: 200px;}
    .action-button + .action-button {
        margin-left: 5px;
    }
    vdl-section {
        outline: 1px solid #ccc;
    }
    vdl-section span {
        font-size: 30px;
    }

The effects on the rendered Portfolio Optimization view would be as follows:
Figure : 1. Example CSS After Rendering

Note the outline on the `<vdl-section>` element and the resized font on the `<span>` elements.

When providing custom CSS, you should be aware of some practical considerations:

- Styles should be applied directly to VDL tags and their attached classes. Do not tie CSS rules to elements you identify in the generated HTML.
- To preserve the correct container layout, use `outline` rather than `border`, as `outline` does not increase the size of containers.
- While you can add spacing above and below `vdl-section` elements, `vdl-row` elements and `vdl-column` elements, remember that adding horizontal spacing will break the Bootstrap layout. Doing this might work in some situations where there is only one item per`vdl-row` horizontally, but it should generally be avoided.
- The `Autotable` element is wrapped with a container that has the class `.table-wrapper`.
- Paragraph (`<p>`) elements have a `margin-bottom` of 20px by default.

Note: Elements such as `vdl-row`, `vdl-column` and `autotable` are described in later sections.
Parent Topic Working with Page Layouts and Styling

© 2001-2026 Fair Isaac Corporation. All rights reserved. This documentation is the property of Fair Isaac Corporation (“FICO”). Receipt or possession of this documentation does not convey rights to disclose, reproduce, make derivative works, use, or allow others to use it except solely for internal evaluation purposes to determine whether to purchase a license to the software described in this documentation, or as otherwise set forth in a written software license agreement between you and FICO (or a FICO affiliate). Use of this documentation and the software described in it must conform strictly to the foregoing permitted uses, and no other use is permitted.