How to customize widget, how to give color each widget different way

Questions: How to give color each widget differently, How to change font of particular widget,

Here i am going to show you how to customize each widget different way. This is very easy method you can do it in no time. When you add a new widget, every widget you have added has their unique id. Let look at below

<b:widget id='BlogList1' locked='false' title='My Blog List' type='BlogList'/>

In this widget id  'BlogList1' by using this you can customize any widget how?
lets suppose you want to apply following CSS for this widget


#BlogList1 {
padding-left:15px;
font:10px Arial;
border-bottom:2px ;
}

Note here the name of ID of widget should be same as name of CSS as shown above. Now go 'Design' then select "Edit Html" now press Ctrl+F and search for </head>. Just above </head> past this CSS code and save your template. Now you can change this CSS file accordingly. If you have any issue please comment.