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.

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