main.css 1

main.css (correct order)

The first time I tried to use Dojo framework in my application. I included CSS files as CSS books recommended (and Dojo documentation), but what I see:

1. My font-family is changed from 'Verdana' to 'Myriad',
2. I used font-size:100% for body, but now I see that font-size is much smaller,
3. My 'Next' link (top-right corner) is hardly visible,
4. All <pre> tags have background, borders and some extra padding,
5. It looks very different than the application that I used before.

What happened?
After a short investigation I've found problems.

My CSS statements from the main.css files are overwritten by statements from the dojo.css file. (see on the bottom of this page)
The <pre> tags are styled by css statements from dojo.css file.
The "Next' link now is 75% of the 12px (from dojo.css file) and has font-size 9px instead of 12px as I expected.

My main.css file:
body{font-family:Verdana;font-size:100%;}
#links{position:absolute;top:10px;right:20px;font-size:75%;}

CSS including:
<link type="text/css" href="css/main.css" rel="stylesheet" />
<style type="text/css">
	@import "/dojo/dojo/resources/dojo.css";
	@import "/dojo/dijit/themes/tundra/tundra.css";
</style>

Tab 1 content

Tab 2 content

@import "/dojo/dojo/resources/dojo.css";

body { /* dojo.css (line 22) */
	font: 12px Myriad,Helvetica,Tahoma,Arial,clean,sans-serif; 
	*font-size: 75%;
}
pre { /* dojo.css (line 74) */
	border-width:1px 0;
	padding:1.5em;
}
pre, code { /* dojo.css (line 67) */
	background-color:#EFEFEF;
	border:1px solid #CCCCCC;
	font-family:Courier,"Courier New";
	font-size:115%;
}

Index