title: CSS reset that applies only to #widget
body: <p>Let's say I have widget that uses complicated CSS, and must be embedded in multiple websites that all have their CSSes.</p>
  
  <p>If I prefix all widget's CSS rules with "#widget", they won't apply to anything on the outside, so one problem fixed. Unfortunately CSS rules of the site can still mess the widget.</p>
  
  <p>If I reset all CSS inside #widget with proper reset rules, then hopefully they will override all outside rules, right? (because my rules use #id and outside rules don't know any ids inside my widget, they cannot override them, right? !important notwithstanding)</p>
  
  <p>What's the best way to reset all CSS to known state? Most CSS resets start from browser defaults, they don't reset arbitrary CSSes. Is there any CSS reset that works no matter what?</p>