Todos los navegadores incluyen lo que se conoce como «estilos por defecto». Estos son estilos que dictan la apariencia de los elementos HTML en ausencia de cualquier otra información de estilo. Por ejemplo, en casi todos los navegadores el aspecto predeterminado de los hipervínculos es un color azul brillante con un subrayado. Así es como se ven esos enlaces a menos que usted les diga que se muestren de una manera diferente.

Los estilos predeterminados del navegador pueden ser útiles, pero en muchos casos, los diseñadores web quieren eliminar estos estilos para que puedan empezar de nuevo con estilos de los que están 100% en control. Esto se hace usando lo que se conoce como una «hoja de estilo maestra».

Una hoja de estilo maestra debe ser la primera hoja de estilo a la que llame en todos sus documentos. Se utiliza una hoja de estilo maestra para borrar la configuración predeterminada del navegador que puede causar problemas en el diseño Web de varios navegadores. Una vez que haya eliminado los estilos con una hoja de estilo maestra, su diseño comienza desde el mismo lugar en todos los navegadores – como un lienzo limpio para pintar.

Valores predeterminados globales

Su hoja de estilo maestra debe comenzar por poner a cero los márgenes, rellenos y bordes de la página. Algunos navegadores web predeterminan el cuerpo del documento a 1 ó 2 píxeles sangrados desde los bordes del panel del navegador. Esto asegura que todos muestren lo mismo.

Usted también quiere hacer que la fuente sea consistente. Asegúrese de establecer también el tamaño de fuente en 100 por ciento o 1em, para que su página sea accesible, pero el tamaño sigue siendo consistente. Y asegúrese de incluir la altura de la línea.

Formato de titulares

Las etiquetas de encabezado o encabezado (H1, H2, H3, etc.) suelen estar predeterminadas para texto en negrita con márgenes grandes o rellenos alrededor de ellos. Al eliminar el peso, los márgenes y el relleno, se asegura de que estas etiquetas sigan siendo más grandes (o más pequeñas) que el texto que las rodea sin tener estilos adicionales.

Es posible que desee considerar la posibilidad de establecer tamaños, espacios entre letras y rellenos específicos para las etiquetas de los titulares, pero eso depende realmente del estilo del sitio que está diseñando y debe dejarse fuera de la hoja de estilo principal. Puede agregar más estilos a estos encabezados según sea necesario para su diseño específico.

Formato de texto sin formato

Más allá de los titulares, hay otras etiquetas de texto que debe asegurarse de borrar. Un conjunto que la gente olvida a menudo son las etiquetas de celda de tabla (TH y TD) y las etiquetas de formulario (SELECT, TEXTAREA e INPUT). Si no los ajusta al mismo tamaño que el cuerpo y el texto del párrafo, puede que se sorprenda desagradablemente al ver la forma en que los navegadores los muestran.

También es bueno dar a sus citas (BLOCKQUOTE y Q), acrónimos y abreviaturas un poco más de estilo para que destaquen un poco más:

Enlaces e imágenes

Los enlaces son fáciles de manejar y de cambiar desde el texto subrayado en azul brillante antes mencionado. Preferimos que nuestros enlaces queden siempre subrayados, pero si lo prefieres de otra manera, puedes configurar estas opciones por separado. Tampoco incluimos colores en la hoja de estilo principal, porque eso depende del diseño.

Con las imágenes, es importante desactivar los bordes. Mientras que la mayoría de los navegadores no muestran un borde alrededor de una imagen sin formato, cuando la imagen está enlazada, los navegadores activan el borde.

Tablas

Aunque las tablas ya no se utilizan con fines de diseño, su sitio puede seguir utilizándolas para datos tabulares reales. Este es un buen uso de las tablas HTML. Ya nos hemos asegurado de que el tamaño de texto por defecto es el mismo para las celdas de su tabla, pero hay algunos otros estilos que debería establecer para que sus tablas permanezcan iguales:

Formularios

Al igual que con otros elementos, debe limpiar los márgenes y los acolchados alrededor de los encofrados. Otra cosa que nos gusta hacer es reescribir la etiqueta del formulario como «inline» para que no añada espacio extra donde colocar la etiqueta en el código. Al igual que con otros elementos de texto, definimos la información de la fuente para seleccionar, el área de texto y la entrada de arriba, de modo que sea la misma que el resto de nuestro texto.

También es una buena idea cambiar el cursor de las etiquetas. Esto ayuda a la gente a ver que la etiqueta hará algo al hacer clic en ella.

Clases comunes

Para esta parte de la hoja de estilo maestra, debe definir clases que tengan sentido para usted. Estas son algunas de las clases que usamos más a menudo. Tenga en cuenta que no están configurados para ningún elemento en particular, por lo que puede asignarlos a lo que necesite.

Recuerde que debido a que estas clases están escritas antes que cualquier otro estilo y son sólo clases, son fáciles de anular con propiedades de estilo más específicas que ocurren más tarde en la cascada. Si encuentra que ha establecido una clase común en un elemento y no tiene efecto, debería asegurarse de que no hay ningún otro estilo en una de sus hojas de estilo posteriores que afecte a ese mismo elemento.

Original de Jennifer Krynin. Editado por Jeremy Girard el 10/6/17