Force.com IDE Developer Guide

Get Started with the Force.com IDE
Develop with the Force.com IDE
Force.com Project Basics
Apex Code in the Force.com IDE
Lightning Components in the Force.com IDE
What is the Lightning Component Framework?
Notable Lightning Components Features in the Force.com IDE
Set Up the Force.com IDE with Lightning Components Support
Explore Lightning Components in the Force.com IDE
Enable My Domain in Your Development Org
Create an Apex Controller Class in the Force.com IDE
Create a Lightning Component Bundle in the Force.com IDE
Add an Event Handler in the Force.com IDE
Create a Lightning Application in the Force.com IDE
Customize Your Style Sheet in the Force.com IDE
Wrap Up Your Exploration of Lightning Components in the Force.com IDE
Server Synchronization
Test Code with the Force.com IDE
Deploy Code with the Force.com IDE
Get Started with the Apex Debugger
Force.com IDE Release Notes
Useful References
PDF

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.
  1. Make sure that the active file in the source panel is one of your MyContactList files (not a MyContactListApp file).
  2. Click the CSS tab at the bottom of the source panel.
  3. Replace the generated CSS with this CSS.
  4. To save your updated CSS, press Ctrl+S or (Cmd+S on macOS).
  5. 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.