How to Put CSS Code in a WordPress Widget

1. Log in to the WordPress dashboard from the 'wp-admin' directory of your website. Navigate to 'Appearance' and click the 'Widgets' link to load the 'Widgets' screen. You'll see your sidebars and a list of widgets on this page.
2. Click the name of a sidebar to expand it and display its widgets. Expand the widget's options by clicking on its down-pointing arrow.

3. Add HTML tags containing inline CSS code in an options field of the widget. Not all options fields can take HTML or CSS cod. To test this, input some HTML and click 'Save' to see if the HTML stays or gets deleted. You can always add HTML and CSS to the 'Text' widget that comes with every installation of WordPress. Click the blue 'Save' button in the widget's option box to save your changes.
4. Navigate to 'Appearance' and click the 'Editor' link if you couldn''t add CSS code directly in to the widget through its option fields. Locate the 'functions.php' file and click its link. Locate the 'register_sidebar' code and make the line containing 'before_widget' look like this:'before_widget' => '
',Change the 'after_widget' so that it closes the '
' tag you opened:'after_widget' => '
',
5. Load your blog in another tab or window of your Web browser. Right-click the browser screen and select to view the source code. Find the '
' tags surrounding the widget you want to change and take note of its ID attribute. The code will look similar to this:

6. Go back to the WordPress dashboard and navigate to the 'Edit Themes' screen again. Locate the 'style.css' file at the bottom of the screen and click its link. Add your CSS for the widget at the end of the file like this:#archives-3 {property: value;}Replace 'property: value;' with a CSS property-value pair such as 'color: red;'. Update the file when you finish editing.