Reset CSS Class

Oh, the css world get messy, and I can’t trace it back. I don’t want to mess other css so i just add this class reset.


<div class="reset">.... bla bla bla... content... bla bla bla... </div>

Don’t forget to include the reset_class.css in the head


<link rel="stylesheet" type="text/css" href="reset_class.css" />

Oh, again I forget… it’s the reset_class.css. I modified it from yui reset class. Quite easy to use


.reset h1 {
	/*18px via YUI Fonts CSS foundation*/
	font-size:138.5%;
}
.reset h2 {
	/*16px via YUI Fonts CSS foundation*/
	font-size:123.1%;
}
.reset h3 {
	/*14px via YUI Fonts CSS foundation*/
	font-size:108%;
}
.reset h1,.reset h2,.reset h3 {
	/* top & bottom margin based on font size */
	margin:1em 0;
}
.reset h1,.reset h2,.reset h3,.reset h4,.reset h5,.reset h6,.reset strong {
	/*bringing boldness back to headers and the strong element*/
	font-weight:bold;
}
.reset abbr,.reset acronym {
	/*indicating to users that more info is available */
	border-bottom:1px dotted #000;
	cursor:help;
}
.reset em {
	/*bringing italics back to the em element*/
	font-style:italic;
}
.reset blockquote,.reset ul,.reset ol,.reset dl {
	/*giving blockquotes and lists room to breath*/
	margin:1em;
}
.reset ol,.reset ul,.reset dl {
	/*bringing lists on to the page with breathing room */
	margin-left:2em;
}
.reset ol li {
	/*giving OL's LIs generated numbers*/
	list-style: decimal outside;
}
.reset ul li {
	/*giving UL's LIs generated disc markers*/
	list-style: disc outside;
}
.reset dl dd {
	/*giving UL's LIs generated numbers*/
	margin-left:1em;
}
.reset th,.reset td {
	/*borders and padding to make the table readable*/
	border:1px solid #000;
	padding:.5em;
}
.reset th {
	/*distinguishing table headers from data cells*/
	font-weight:bold;
	text-align:center;
}
.reset caption {
	/*coordinated marking to match cell's padding*/
	margin-bottom:.5em;
	/*centered so it doesn't blend in to other content*/
	text-align:center;
}
.reset p,.reset fieldset,.reset table {
	/*so things don't run into each other*/
	margin-bottom:1em;
}

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s