CSS Defaults

CSS defaults, html page layout, lorem ipsum.

Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris quis ligula at sem porta imperdiet. Morbi accumsan, quam vel porta imperdiet, sem odio ultricies diam, vel consectetur nibh tortor sit amet tellus. Ut sodales velit a nulla pretium vulputate. In a purus sed velit interdum molestie. Phasellus quis mauris a turpis venenatis convallis sed in neque. Duis eu nulla tellus, id euismod neque. Sed a felis libero, elementum venenatis elit.

Curabitur nulla diam, mollis non malesuada id, gravida nec nibh. Nulla eu mi sed neque pulvinar rutrum eu at eros. Suspendisse tempus luctus dolor vitae facilisis. Nam id fringilla diam. Phasellus posuere suscipit sapien vitae varius. Donec vulputate orci eget sem ultrices id viverra velit posuere. Aliquam tristique, est non consequat iaculis, velit mi ultricies lorem, eget condimentum neque mauris quis nulla. In augue justo, blandit ut feugiat in, pretium posuere velit.

Ut vitae tempus turpis.

Maecenas eleifend, nisi vitae fringilla sagittis, tellus nisl viverra odio, bibendum consectetur enim lorem id leo. Aenean turpis metus, ultricies eu scelerisque rutrum, interdum ut tortor. Ut facilisis lacinia placerat. Ut non turpis turpis. Suspendisse potenti. Sed rhoncus, risus id adipiscing luctus, mauris orci rutrum ante, sed placerat augue turpis eu urna. Duis pellentesque neque nec turpis semper ultricies. Duis ut ipsum neque, a tincidunt metus. Proin viverra nisi mauris, sed aliquam mi. Morbi congue magna urna, non tincidunt lacus. Sed sed turpis sed metus sodales eleifend sit amet vitae lectus. Integer auctor tincidunt purus, ut vehicula tortor sollicitudin et. Aliquam erat volutpat. Cras mollis tellus nec mauris dictum porta

Unordered list

Sed at orci sapien, in fringilla elit.
Aenean tempus dui semper lacus gravida a vehicula nisi lacinia.

Ordered list and an unordered list nested.

In nec velit quis lacus tristique ornare.
Pellentesque quis libero vel nulla tempor ultrices.
- Ut ac ante sit amet eros viverra dapibus.
- Integer vitae magna a tellus imperdiet scelerisque id vitae nisi.
- Integer auctor nisl eget orci tempus posuere. Nullam sed arcu neque. Proin velit dolor, lobortis ut lacinia in, laoreet sit amet est. Etiam fringilla massa nec magna auctor sit amet ultricies nisi rhoncus. Suspendisse nibh diam, auctor vel gravida vitae, molestie ut nulla. Nunc dapibus, turpis in vehicula vestibulum, quam dolor varius dolor, at convallis arcu justo in felis. Fusce leo enim, porttitor ut tempor id, blandit sit amet ante.
- Ut vel diam pulvinar leo euismod blandit sed laoreet magna.
- Fusce eu nibh elit, ac pellentesque massa.
Suspendisse pretium nisl a libero hendrerit tincidunt at id nunc.
Quisque in tortor at erat eleifend egestas et vel sapien.
Phasellus interdum lobortis dui, id rhoncus mi sagittis eu.
Aenean posuere odio a ligula elementum non ornare est pulvinar.

Definition list

Aenean eu urna lacus: Nec scelerisque lectus; Praesent quis risus; Diam cursus posuere

Table

Fermentum	Ultricies est tempus
Cras ut purus felis	Scelerisque	Condimentum leo
Quisque fermentum	Porta dolor	Tempus mattis

About this template

An universal remedy that treats all diseases is nonsense. What about those CSS frameworks?

Different browsers have got differnt defaults. To get pages look alike across various browsers, we first reset some CSS defaults and then set our own defaults.

Margin vs padding

Margin collapsing is a good idea in principle. Unfortunately browsers collapse margins differently and HR tag behaves funny. However, with well chosen margins and line-heights IE6 and any latest Firefox will display the content exactly the same. Another way is to switch partly over to paddings. Paddings behave stabile across browsers. Both ways have their pros and contras.

Rhythm

Vertical spacing on page follows a rhythm, it's like writing on a lined paper. The line height can be 1.2em or 1.3em, here 1.5em is used.

Rhythm. H1 does not need to attend in the rhythm as it's reserved to carry the name of site (SEO) and is often designed as a logo and is different thing from the content and usually separated from the content with nav bar and stuff. H2 is page title and also stays quite apart from the content. The real rhythm players are the mebers of content below H2.

To check out the flow, body background is used - body{background:url(underline.gif);}.

Sources

Lorem ipsum generator: http://www.lipsum.com/

Document terminology: http://docutils.sourceforge.net/docs/ref/doctree.html#section et al.

Calculating the vertical distances, line height

A browser considers a "normal" line height to be usually 1.2 times of the font size. Or 1.3 times.

A character has to have at least some 3px space below it, if less, the link's underline is cut off.

Formula: some-line-height = some-margin-top = some-margin-bottom = 1.5 / some-font-size. Formula is in em units. Asymmetrical top and bottom margins have to retain same total height.

If any borders used, we have to calculate respective margins and line heights that are less by the thickness of the border. If the basic (body) font-size is 14px, then 1px equals 1 / 14 = 0.071em, and say, table border-top will equal: 1.5em - ( 1 / 14px ) = 1.429em.

Line heights. 12px x 1.5em = 18px. 13px x 1.5em = 19.5px, so actual line height will wary on different browsers. 14px x 1.5em = 21px. 15px x 1.5em = 22.5px. 16px x 1.5em = 24px. The even font sizes - 12, 14 and 16 will display exactly the same in every browser.

If a font size exceeds 1.5em, the line height must be 1em or more. Because of the cross browser issues. Sample, font-size is 4.786em, closest exceeding line height that is 1.5 multiple, is 6; 6 / 4.786 = 1.254em

Line width

This line is 74 characters wide that is being considered easy for reading.

The rule-of-thumb is that the line width shouldn't exceed 70 characters (including spaces and punctuation), and if the text is left-aligned, a suitable line height for optimal readability on the web could be 1.5. Of course, this is quite dependent on the font face we use.

What fonts to use - cross platform fonts.

Sample: line width 500px, Georgia, font-size:15px, line-height:1.5em.

HTML units

EM vs PX. PX vs EM. WAI recommends em units. Text resizing is more easily solved with em units. However, browsers have got their built in resizers too... Pixel sizes are simpler to handle. What's fixed is fixed. Sometimes you have got to adjust character placement by half-pixels, sometimes it really doesn't matter how the text flows. Compare browser default, em, and pixel based flows under different browsers - font sizes compared. HTML units em, px and % all are got their own specific role in an mark up.

Mark up of a HTML template

<!DOCTYPE	html PUBLIC	"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<title>Template</title>
<meta http-equiv="description" name="description" content="" />
<meta http-equiv="keywords" name="keywords" content="" />
<link href="../../common/style-all.css" rel="stylesheet" type="text/css" />
<link href="../../common/style-print.css" media="print" rel="stylesheet" type="text/css" />
<script type="text/javascript">
//<![CDATA[
	function(){};
//]]>
</script>
</head>
<body>
	<div class="page">
		<div class="header">
			<h1>site title</h1>
		</div>
		<div class="topNav">
			main navigation bar
		</div>
		<div class="pageMain">
			<div class="aside">
				side menu, ads, function boxes...
			</div>
			<div class="main">
				<h2>page title</h2>
				<p>content</p>
			</div>
		</div>
		<div class="footer">
			footer
		</div>
	</div>
</body>

CSS template with paddings

/*DEFAULT STYLE*/
*{
	margin:0;
	padding:0;
}
body{
	color:#444;
	font:14px/1.5em 'arial unicode ms',arial,sans-serif;/*font sizes on the page are set here*/
	min-height:1200px;
	height:auto !important;
	height:1200px;
	padding-left:1%;
	padding-right:1%;
}
img{
	border:none;
}
a:link,
a:visited{
	color:#00f;
	outline:none;/*FireFox tabindex gets disabled as well*/
	text-decoration:none;
}
a:hover,
a:active{
	color:#f00;
	outline:none;/*FireFox tabindex gets disabled as well*/
	text-decoration:underline;
}
h1{/*site, domain name, logo*/
	font:normal 3em/1em georgia,serif;
	padding-bottom:0.5em;
	padding-top:0.5em;
}
h2{/*page title*/
	font:normal 2em/0.75em georgia,serif;
	padding-bottom:0.75em;
}
h3{/*sections of content*/
	font:normal 1.5em/1em arial,sans-serif;
	padding-bottom:1em;
	padding-top:1em;
}
h4{/*sub sections of content*/
	font:normal 1.2em/1.25em arial,sans-serif;
	padding-bottom:1.25em;
}
h5{
	font-size:1em;
	line-height:1.5em;
	padding-bottom:1.5em;
}
h6{
	font-size:1em;
	line-height:1.5em;
}
p{
	font-size:1em;
	line-height:1.5em;
	padding-bottom:1.5em;
}
li{
	font-size:1em;
	line-height:1.5em;
}
ol{
	padding-bottom:1.5em;
	padding-left:2.5em;
	*padding-left:3em;
}
ul{
	padding-bottom:1.5em;
	padding-left:2.5em;
}
dl{
	padding-bottom:1.5em;
}
dt{
	font-size:1em;
	line-height:1.5em;
}
dd{
	font-size:1em;
	line-height:1.5em;
	padding-left:2.5em;
}
table{
	border-collapse:collapse;
	margin-bottom:1.417em;
}
th,td{
	border:1px solid #999;
	line-height:1.429em;/* less by table border-top: 1.5em - ( 1 / 14px ) = 1.429em; 12px > 1.417em */
	padding-left:7px;/*em units here would mad up IE6 and IE7*/
	padding-right:7px;/*em units here would mad up IE6 and IE7*/
}
hr{
	background:#aaa;
	border:none 0;
	color:#aaa;
	display:block;
	height:0.071em;/*font-size:12px > height:0.125em; font-size:14px > height:0.071em;*/
	margin-bottom:1.429em;/*font-size:12px > margin:bottom:17px; font-size:14px > margin:bottom:1.429em; margin:bottom = 1.5em - 0.071em*/
	*margin-bottom:13px;/*font-size:12px > margin:bottom:10px; font-size:14px > margin:bottom:13px;*/
	*margin-top:-7px;/*constant*/
}
/*end DEFAULT STYLE*/

/*MAIN PARTS OF THE PAGE*/
.page{/*screen-wide page*/
	overflow:hidden;
	padding-bottom:3em;
	width:100%;
}
.page{/*fix-width page centered*/
	margin:0 auto;
	overflow:hidden;
	padding-bottom:3em;
	width:965px;/*fits nicely in 1024 screen*/
}
.header{
	float:left;
	width:100%;
}
.topNav{
	float:left;
	width:100%;
}
.pageMain{
	float:left;
	width:100%;
}
.aside{
	float:right;
	margin-top:4.43em;
	width:160px;
}
.main{
	margin-right:180px;
	width:auto;
}
.division{/*any floated div*/
	float:left;
	width:100%;
}
.section{/*any layouted section*/
	float:left;
	padding-bottom:1.5em;
	width:100%;
}
.footer{
	float:left;
	width:100%;
}
/*end MAIN PARTS OF THT PAGE*/

Some CSS ideas for printing media

body{
	background:none;
	padding:0;
}
.main a:link:after,
.main a:visited:after{
	content:" (" attr(href) ")";
}
a{
	border:none 0;
	color:#000;
	text-decoration:none;
}
.noPrint{
	display:none;
}

Page structure and class names

2009, 2010.

Web Development - XHTML CSS JavaScript jQuery.

www.tuljo.com