How to reset CSS for only a DIV or any other html element -Simple solution!

Published

The aim of a CSS reset is to prevent inconsistency of elements that is nested to other elements,by reseting the height,width,margin,etc styles to the default ones.
there are many ways to reset style of an elemet to the specific one.
one solution is to add a !important after the style attribute. like h1{font-size:25px!important;}
and another is to overwrite each element style to the default one.
and another is to use an css reset stylesheet to reset.
Finest solution is to use a css reset tool. Below is Aslamise Css reset script. You may have to tweak a little if you find anything that doesnt suits your needs.
.aslamise-css-reset html{color:#000;background:#FFF;}.aslamise-css-reset body,.aslamise-css-reset div,.aslamise-css-reset dl,.aslamise-css-reset dt,.aslamise-css-reset dd,.aslamise-css-reset ul,.aslamise-css-reset ol,.aslamise-css-reset li,.aslamise-css-reset h1,.aslamise-css-reset h2,.aslamise-css-reset h3,.aslamise-css-reset h4,.aslamise-css-reset h5,.aslamise-css-reset h6,.aslamise-css-reset pre,.aslamise-css-reset code,.aslamise-css-reset form,.aslamise-css-reset fieldset,.aslamise-css-reset legend,.aslamise-css-reset input,.aslamise-css-reset textarea,.aslamise-css-reset p,.aslamise-css-reset blockquote,.aslamise-css-reset th,.aslamise-css-reset td{margin:0;padding:0}.aslamise-css-reset table{border-collapse:collapse;border-spacing:0}.aslamise-css-reset fieldset,.aslamise-css-reset img{border:0}.aslamise-css-reset address,.aslamise-css-reset caption,.aslamise-css-reset cite,.aslamise-css-reset code,.aslamise-css-reset dfn,.aslamise-css-reset em,.aslamise-css-reset strong,.aslamise-css-reset th,.aslamise-css-reset var{font-style:normal;font-weight:normal}.aslamise-css-reset ol,.aslamise-css-reset ul{list-style:none}.aslamise-css-reset li{list-style:none}.aslamise-css-reset caption,.aslamise-css-reset th{text-align:left}.aslamise-css-reset h1,.aslamise-css-reset h2,.aslamise-css-reset h3,.aslamise-css-reset h4,.aslamise-css-reset h5,.aslamise-css-reset h6{font-size:100%;font-weight:normal}.aslamise-css-reset q:before,.aslamise-css-reset q:after{content:''}.aslamise-css-reset abbr,.aslamise-css-reset acronym{border:0;font-variant:normal}.aslamise-css-reset sup{vertical-align:text-top}.aslamise-css-reset sub{vertical-align:text-bottom}.aslamise-css-reset input,.aslamise-css-reset textarea,.aslamise-css-reset select{font-family:inherit;font-size:inherit;font-weight:inherit}.aslamise-css-reset input,.aslamise-css-reset textarea,.aslamise-css-reset select{*font-size:100%}.aslamise-css-reset legend{color:#000}.aslamise-css-reset *{background:none;color:black;} Lets take a look at it.
  • This is a ul li block where no class assigned

  • This is a ul li block where aslamise-css-reset assigned


So , lets see how to use this css reset in your page. Copy and paste above css reset code in your stylesheet at the bottom of stylesheet. Then add class "aslamise-css-reset" to the element where you want to reset your css. Example: <ul class='aslamise-css-reset'><li>This is a ul li block where aslamise-css-reset assigned</li></ul> If you want to see another example, see previous post's "demo", where aslamise-css-reset class enabled!.

Comments

Post a Comment