Reset and default font styles
Starting point of your template Joomla CSS document
The reset- and default font styles take care of resetting web bowsers to the same default styles for every browser, like fonts, margins, padding and borders. Later on you can overwrite these default styles. In this way you can style your website more consistantly. In the blank CSS file these default styles are present at the starting point of this document. If you style correctly you often don't have to define seperate styles for browsers as with the the old Internet Explorers 6 and 7.
The CSS style code of the reset and default font styles are as follows.
@charset "utf-8";
/* CSS Document */
/* ================================
RESET styles
============================= */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,
legend,input,button,textarea,p,blockquote,th,td {
margin:0;
padding:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
fieldset,img {
border:0;
}
address,caption,cite,code,dfn,em,th,var,optgroup {
font-style:inherit;
font-weight:inherit;
}
strong {
font-style:inherit;
font-weight:bold;
}
em {
font-style:inherit;
font-style:italic;
}
del,ins {
text-decoration:none;
}
caption,th {
text-align:left;
}
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:normal;
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
font-variant:normal;
}
sup {
vertical-align:baseline;
}
sub {
vertical-align:baseline;
}
legend {
color:#000;
}
input,button,textarea,select,optgroup,option {
font-family:inherit;
font-size:inherit;
font-style:inherit;
font-weight:inherit;
}
/* ===============================
Default font styles
=========================== */
body {
font-size:13px;
line-height: 17px;
font-family: Arial, Helvetica, sans-serif;
color: #000;
}
select,input,button,textarea,button{
font-ize:99%;
font-family: Arial, Helvetica, sans-serif;
}
table{
font-size:inherit;
}
pre,code,kbd,samp,tt{
font-family: monospace, "Courier New", Courier;
line-height:100%;
}
Note
The reset- and default font styles are developed by Yahoo Developer Network and have been fully tested. For more information about these styles you can go to: http://developer.yahoo.com/yui/reset for reset styles and http://developer.yahoo.com/yui/fonts for default font styles.
RSSWhat I'm missing, is specific binding of this information with the Joomla environment.
For example, is the above reset code already provided by Joomla (where)? do we have to code it and inject somewhere?
It would be useful if for every piece of code you present, if you'll mention its origin location in Joomla/template.
Thank you!Quote
There is no binding with the Joomla enviroment. Joomla is a webapplication like any other. It has only to do with styling your website. Reset styles could be used in any website. Joomla used to have some reset styles from version Joomla 1.5.15. They were in templates/system/css/template.css. But in Joomla 1.6 and Joomla 1.7 there are no reset styles present. Reset styles are not requered for running Joomla or any other website. It just makes it easier to style your website cross browser more consistantly.
The second part of your comment is not answered easily. It depends on the template you are using. Many templates override the html output of Joomla, so the Joomla styles from this website, which refer to the default Joomla output, are not usefull, simply because the classes and id's don't exist anymore.
When you are building your own template and don't use any overrides, then all the styles from this website you can use. Quote