DZone Snippets is a public source code repository. Easily build up your personal collection of code snippets, categorize them with tags / keywords, and share them with the world

Michael has posted 27 posts at DZone. View Full User Profile

Universal CSS

05.30.2007
| 414 views |
  • submit to reddit
        // Universal Default CSS for site design


ul, ol, dl, p, h1, h2, h3, h4, h5, h6
{
	/* pixels are used here, rather than ems, because I want a consistent 
	 * margin on the different headings. if I use ems, 1em for an h1 element 
	 * is much larger than 1em on an h6 element. I don't want this.
	 */
	margin-top: 10px;
	margin-bottom: 10px;
	padding-top: 0;
	padding-bottom: 0;
}
ul ul, ul ol, ol ul, ol ol
{
	/* kill margins on sub-lists
	 */
	margin-top: 0;
	margin-bottom: 0;
}
h1
{
	font-size: 240%;
}
h2
{
	font-size: 180%;
}
h3
{
	font-size: 140%;
}
h4
{
	font-size: 100%;
}
h5
{
	font-size: 70%;
}
h6
{
	font-size: 50%;
}
a, a:link, a:visited, a:active
{
	text-decoration: underline;
}
a:hover
{
	/* because I like the visual feedback a user gets when they
	 * mouse over a link and see the underline of the link
	 * disappear.
	 */
	text-decoration: none;
}
code, pre
{
	/* Make sure we're all using the same monospaced font for CODE
	 * and PRE elements
	 */
	font-family: "Courier New", Courier, monospace;
}
label
{
	/* It's all about the visual feedback. In this case, label 
	 * elements are usually clickable which then set focus on
	 * their target. I want to show that to the user in a manner
	 * they are used to and understand.
	 */
	cursor: pointer;
}
table
{
	/* Some browsers won't carry the font size down into the 
	 * browser like they're suppose to.
	 */
	font-size: 100%;
}
td, th
{
	/* I never like or use the default vertical centering "feature"
	 * provided by tables. 
	 */
	vertical-align: top;
}
body
{
	/* I've seen several comments that setting the base font size to 100.1%
	 * fixes some browser bugs. Which bugs? I don't know. I believe it's
	 * to fix some rounding-error bugs that some browsers (Mozilla) are
	 * prone to. It doesn't hurt anything, so I keep it here.
	 */
	font-size: 100.1%;
}