Customize Your Style Sheet in the Force.com IDE

A Lightning component can specify its own cascading style sheet (CSS). The .css file is included when you create a component bundle in the Force.com IDE.

Force.com IDE is in a maintenance-only state. We still provide support for the product through our official channels, but updates prior to October 12, 2019 will be only for critical security issues that arise. On October 12, 2019, we will no longer provide support or updates of any kind for Force.com IDE. On that date, we will also begin archiving documentation and removing download links for the product. We recommend that you start migrating to Salesforce Extensions for Visual Studio Code or one of the great tools made by our partners. For more information, see The Future of Salesforce IDEs on the Salesforce Developers Blog.

Warning

The contact list we created was okay, but it could use more pizazz. Let’s spice it up a bit.

Make sure that the active file in the source panel is one of your MyContactList files (not a MyContactListApp file).
Click the CSS tab at the bottom of the source panel.

Replace the generated CSS with this CSS.

1.THIS {
2background:url("https://bit.ly/1Dy6Eji") no-repeat center center;
3min-height:100%;
4background-size:cover;
5color: darkblue;
6font: Arial;
7margin: 0;
8padding-top:10px;
9padding-bottom:10px;
10}
11.THIS ul {
12list-style-type: none;
13width: 90%;
14padding: 5px;
15position: relative;
16margin: 0 auto;
17}
18.THIS h3 {
19font: bold 20px/1.5 Arial;
20}
21.THIS .minli {
22padding: 10px;
23margin-bottom: 10px;
24overflow: auto;
25background: rgba(255,255,255,.4);
26border-radius: 3px;
27width:95%;
28}
29.THIS li:hover {
30cursor: pointer;
31}

To save your updated CSS, press Ctrl+S or (Cmd+S on macOS).
Refresh the browser page that’s displaying the preview of your application. If you’ve closed that page, you can find it again at https://yourDomain.lightning.force.com/c/MyContactListApp.app.

Isn’t that better? Now that is what we call pizazz.

Force.com IDE Developer Guide

Customize Your Style Sheet in the Force.com IDE