Tutorial:Cascading Style Sheets
From Joomla! Documentation
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;
}
