Estilos CSS genéricos

A la hora de definir los estilos para una página Web puede ocurrir que no se vea de igual manera en todos los navegadores utilizados, puesto que cada uno tiene por defecto aplicados unos estilos predeterminados que afectan a elementos concretos. Esto implica que según el navegador utilizado los estilos se muestren de distinta manera aplicados sobre los elementos y no siempre se muestre la página Web como a nosotros nos gustaría.

Un ejemplo de código CSS utilizado para ello puede ser el siguiente:

 body, fieldset, input, textarea, p, blockquote, th, td,
div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form {
    padding: 0;
    margin: 0;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
fieldset, img {
    border: 0;
}
code, dfn, em, strong, th, var, address, caption, cite {
    font-weight: normal;
    font-style: normal;
}
ol, ul {
    list-style: none;
}
caption, th {
    text-align: left;
}
h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    font-size: 100%;
}
q:before, q:after {
    content:'';
}
abbr, acronym {
    border: 0;
}

Además, en vez de utilizar una hoja de estilo en la que se defina una gran cantidad de elementos con unos valores por defecto asignados, también se pueden definir estilos genéricos universales, mediante el selector universal. Las declaraciones sobre este selector se aplicarán sobre todos los elementos que se encuentren definidos dentro de la página Web, como por ejemplo los utilizados en el siguiente código:

Por último, no solo podemos definir los valores por defecto para cada uno de los elementos de la página Web. También podemos definir clases genéricas, de manera que desde una única declaración se puedan aplicar estilos sobre cualquier elemento que cumpla una serie de condiciones, como por ejemplo que esté situado en una posición concreta, la alineación de su contenido, etc. A continuación, podemos ver un ejemplo:

 .alineadoizquierda {
    text-align: left;
}
.alineadocentrado {
    text-align: center;
}
.alineadoderecha {
    text-align: right;
}
.floatizquierda {
    float: left;
}
.floatderecha {
    float: right;
}

Crear estilos genéricos

Esta píldora formativa está extraída del Curso online de CSS Completo y adaptable (UF1303).