El primer componente CSS de YUI es reset.css, una hoja de estilos utilizada para neutralizar los estilos que aplican por defecto los navegadores a todos los elementos HTML.
A continuación se muestra el contenido completo de reset.css:
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
html{color:#000;background:#FFF;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,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,strong,th,var{font-style:normal;font-weight:normal;}
li{list-style: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;}
/* to preserve line-height and selector appearance */
sup {vertical-align:text-top;}
sub {vertical-align:text-bottom;}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;}
/*to enable resizing for IE*/
input,textarea,select{*font-size:100%;}
/*because legend doesn't inherit in IE */
legend{color:#000;}Al contrario que las hojas de estilo de tipo reset de otras librerías y frameworks, el archivo reset.css solamente neutraliza los estilos que aplica por defecto el navegador. El cambio más evidente que provoca el reset.css de YUI es que el texto de todos los elementos se muestra con el mismo aspecto. No importa si se trata de un párrafo <p>, una etiqueta <strong> o un título de sección <h1>, ya que el reset.css anterior hace que todos se vean igual. Por tanto, las páginas a las que sólo se aplica la hoja de estilos reset.css no están preparadas para mostrarlas a los usuarios.
Las hojas de estilo reset.css de otros frameworks neutralizan los estilos por defecto y depués aplican unos estilos adecuados para poder mostrar correctamente las páginas: cada título de sección tiene un tamaño mayor que el siguiente, los elementos <strong> se ven en negrita, los márgenes son adecuados para separar los contenidos de texto, etc.
YUI dispone de otro componente CSS llamado base.css para aplicar unos estilos adecuados a las páginas que han sido neutralizadas mediante reset.css. Por lo tanto, una página a la que se le aplican las hojas de estilos reset.css y base.css ya están listas para mostrarse a los usuarios, a falta de la personalización del aspecto que realice posteriormente el diseñador.
El contenido de la hoja de estilos base.css de YUI se muestra a continuación:
/*
Copyright (c) 2008, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.net/yui/license.txt
version: 2.5.2
*/
/* base.css, part of YUI's CSS Foundation */
h1 {
font-size:138.5%;
}
h2 {
font-size:123.1%;
}
h3 {
font-size:108%;
}
h1,h2,h3 {
margin:1em 0;
}
h1,h2,h3,h4,h5,h6,strong {
font-weight:bold;
}
abbr,acronym {
border-bottom:1px dotted #000;
cursor:help;
}
em {
font-style:italic;
}
blockquote,ul,ol,dl {
margin:1em;
}
ol,ul,dl {
margin-left:2em;
}
ol li {
list-style: decimal outside;
}
ul li {
list-style: disc outside;
}
dl dd {
margin-left:1em;
}
th,td {
border:1px solid #000;
padding:.5em;
}
th {
font-weight:bold;
text-align:center;
}
caption {
margin-bottom:.5em;
text-align:center;
}
p,fieldset,table,pre {
margin-bottom:1em;
}
input[type=text],input[type=password],textarea{width:12.25em;*width:11.9em;}Después de aplicar reset.css todos los contenidos de texto de la página se muestran con un tamaño de letra de 16px. La hoja de estilos base.css hace que los títulos de sección <h1>, <h2> y <h3> se muestren más grandes que el resto de texto y también hace que se muestren en negrita. Otros de los estilos comunes que establece base.css son los marcadores que muestran los elementos de las listas, los bordes de las celdas de tabla y los márgenes verticales y laterales de los elementos.
La mayoría de páginas creadas con los componentes CSS de YUI utilizan reset.css y base.css, por lo que es común que incluyan las siguientes etiquetas <link>:
<link rel="stylesheet" type="text/css" href="css/reset-min.css">
<link rel="stylesheet" type="text/css" href="css/base-min.css">Recuerda que también puedes enlazar estas mismas hojas de estilos directamente desde los servidores de Yahoo!:
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css">
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/base/base-min.css">