How do you add custom styles to your widgets? Suppose you have a widget in your right sidebar. Suppose you wanted to give one of your widgets more visual importance by giving it white text against a grey background. wpbeginner.com has an article on that topic. There is a plugin you can use called Widget CSS Classes.

How To

You could do this manually by finding the class name of the widget by inspecting the element in Google Chrome or Firefox. Each widget in your sidebar has a numbered widget class. Like widget-1, widget-2, widget-3, etc. Now go to your theme’s stylesheet and add your custom style rules.

.widget-2 { 
   background-color: #858585;
   color:#FFF;
}
.widget-2 .widget-title { 
   font-weight:bold;
}

In a realated note, how do you reduce the amount of space between widgets in your sidebar? WordPress.org has a post on this one. Some CSS is needed. Reduce the number of rem shown below in your own code. The code below has been tested and it works.

.widget-area .widget h3 {
    margin-bottom: 0px;
}