Cascading Style Sheets

From Joomla! Documentation

Jump to: navigation, search

A basic CSS

body {
	background-color		: #fff;
	color				: #000;
	font-family			: Arial, Helvetica, Sans-Serif;
	font-size			: 12px;
	text-align			: center;
	margin				: 0;
	padding			: 0;
}
 
h1, h2, h3, h4 {
	font-weight			: normal;
	line-height			: 1.2em;
	color				: #000;
	margin				: 0 0 1em;
}
 
h1 {
	font-size			: 28px;
}
h2 {
	font-size			: 24px;
}
h3 {
	font-size			: 20px;
}
h4 {
	font-size			: 16px;
}
 
p {
	margin				: 0 0 1em;
	line-height			: 1.35em;
}
 
div#container {
	width				: 960px;
	margin				: 0 auto;
	text-align			: left;
}
 
div#header {
	width				: 960px;
	height				: 100px !important;
	height				: 101px;
	border-bottom			: 1px solid #000;
	position			: relative;
}
 
div#logo {
	width				: 407px;
	height				: 69px;
	position			: absolute;
	left				: 6px;
	top				: 23px;
}
 
div#nav {
	width				: 960px;
	height				: 30px !important;
	height				: 31px;
	border-bottom			: 1px solid #000;
	margin-bottom			: 30px;
}
 
div#nav ul {
	width				: 960px;
	height				: 30px;
	margin				: 0;
	padding			: 0;
}
 
div#nav ul li {
	float				: left;
	height				: 30px;
	list-style-type		: none;
	margin				: 0;
	padding			: 0;
}
 
div#nav a {
	display			: block;
	float				: left;
	height				: 30px;
	line-height			: 30px;
	padding			: 0 10px;
	color				: #000;
	background-color		: #fff;
	text-decoration		: none;
}
 
div#nav a:hover {
	background-color		: #000;
	color				: #fff;
}
 
div#maincontent {
	width				: 690px !important;
	width				: 711px;
	float				: right;
	padding-left			: 20px;
	border-left			: 1px solid #000;
	margin-left			: 20px;
	margin-bottom			: 30px;
}
 
div#banner {
	width				: 648px !important;
	width				: 690px;
	border				: 1px solid #000;
	padding			: 20px;
	margin-bottom			: 20px;
}
 
div#mainbody {
	width				: 690px;
	padding-bottom			: 30px;
	border-bottom			: 1px solid #000;
	margin-bottom			: 20px;
}
 
 
div#sidebar {
	width				: 229px;
	float				: left;
	margin-bottom			: 30px;
}
 
div.moduletable {
	margin-bottom			: 20px;
}
 
div.moduletable-background {
	background-color		: #000;
	color				: #fff;
	padding			: 20px;
	margin-bottom			: 20px;
}
 
div.moduletable-background h3 {
	font-size			: 16px;
	color				: #fff;
}
 
div#footer {
	width				: 960px;
	clear				: both;
	padding-top			: 10px;
	border-top			: 1px solid #000;
	text-align			: center;
}
 
div#footer a {
	color				: #000;
}
 
div#footer a:hover {
	text-decoration		: none;
}
Personal tools