Manual de HTML: Estilos CSS

Qué son los estilos CSS

La tecnología CSS ("Cascading Style Sheet" o Hoja de Estilos en Cascada) permite aplicar formatos a los elementos HTML de una página web sin utilizar los atributos de formato del HTML. La introducción de los estilos CSS supuso un cambio radical en la concepción de las páginas web, ya que permitió separar el contenido de la presentación:

  • el HTML se encargará del contenido. Crearemos la estructura de la página sin aplicar ningún atributo de formato y de esta manera ya tendremos una página web estructurada y con contenido.
  • de la presentación se encargará el CSS. Esto nos permitirá definir el formato de todos los elementos de la página y así será mucho más sencillo modificar el diseño de la web, ya que no es necesario tocar el HTML.

Los estilos CSS se llaman así, "en cascada", porque:

  1. los estilos se heredan. Si establecemos un estilo genérico los elementos específicos tendrán asignada esa misma propiedad, salvo que posean un estilo propio que redefina la propiedad.
  2. prevalecen los estilos más específicos y cercanos al elemento sobre los formatos genéricos.
  3. prevalece la última definición: si se define una propiedad varias veces la última definición prevalece sobre las anteriores.

Sintaxis CSS

La sintaxis básica CSS es la siguiente:

selector {
    propiedad_1: valor_1;
    propiedad_2: valor_2;
}

Por ejemplo, aquí definimos un estilo para los párrafos p.

p {
    font-size: 12px;
    font-family: verdana;
    color:red;
}

Los "selectores" indican a qué elementos se aplican las propiedades, y pueden ser:

  • genéricos

    Ejemplos de estilos CSS con selectores genéricos:

    /* selector universal, afecta a todos los elementos */
    * { font-family: sans-serif }
     
    /* estilo para los h1 */
    h1 { font-family: sans-serif }
     
    /* estilo para los h1, h2 y h3 */
    h1, h2, h3 { font-family: sans-serif }
     
    /* estilo para los em que esten dentro de un h1 */
    h1 em { font-family: sans-serif }
     
    /* estilo para los li que sean hijos directos de un ol */
    ol > li { font-family: sans-serif }
     
    /* estilo para los h2 que van justo despues de un h1 y con el mismo padre */
    h1 + h2 { font-family: sans-serif }
  • atributos

    Ejemplos de estilos CSS con selectores basados en atributos:

    /* estilo para los h1 que tienen definido el atributo title */
    h1[title] { font-family: sans-serif }
     
    /* estilo para los h1 con title=Cleveland */
    h1[title="Cleveland"] { font-family: sans-serif }
     
    /* estilo para los h1 con title=Cleveland y lang=en */
    h1[title="Cleveland"][lang="en"] { font-family: sans-serif }
     
    /* estilo para los elementos con lang=fr */
    *[lang=fr] { font-family: sans-serif }
  • clase

    Una clase es un conjunto de propiedades agrupadas a las que se les da un nombre representativo. Cuando queramos asignar a un elemento las propiedades de esa clase solamente tenemos que establecer que el elemento pertenece a esa clase, cosa que haremos con el atributo class:

    <p class="comment">Este texto es de la clase "comment"</p>

    Ejemplos de estilos CSS para clases:

    /* estilo para todos los elementos cuyo atributo class=comment */
    .comment { font-family: sans-serif }
     
    /* estilo para los h1 cuyo atributo class=comment */
    h1.comment { font-family: sans-serif }
  • identificador

    Para asignar un identificador a un elemento usaremos el atributo id. A partir de ese momento podremos referirnos a él mediante su nombre identificador, por ejemplo para definir estilos o para usarlo en JavaScript, por lo que debe ser un nombre único.

    <h1 id="chapter1">El identificador de este elemento es "chapter1"</h1>

    Ejemplos de estilos CSS para identificadores:

    /* estilo para los elementos cuyo atributo id=chapter1 */
    #chapter1 { font-family: sans-serif }
     
    /* estilo para los h1 cuyo atributo id=chapter1 */
    h1#chapter1 { font-family: sans-serif }
  • pseudo-clases de los enlaces

    Ejemplos de estilos CSS para los diferentes estados de un enlace (debe respetarse este orden para que funcionen adecuadamente):

    a:link    { color: red }    /* enlace sin visitar */
    a:visited { color: blue }   /* enlace visitado */
    a:hover   { color: yellow } /* enlace sobrepasado */
    a:active  { color: lime }   /* enlace activo */
  • pseudo-elementos

    Ejemplos de estilos CSS con pseudo-elementos:

    /* el elemento tiene el foco */
    a:focus { background: yellow }
     
    /* cualquier p que sea el primer hijo de un div */
    div > p:first-child { text-indent: 0 }
     
    /* la primera linea de un p */
    p:first-line { text-transform: uppercase }
     
    /* la primera letra de un p */
    p:first-letter { font-size: 3em; font-weight: normal }
     
    /* inserta contenido antes del contenido del elemento */
    p.note:before { content: "Note: " }
     
    /* insert contenido despues del contenido del elemento */
    body:after {content: "The End"; display: block; }

Recursos

Cómo aplicar estilos CSS

Para aplicar estilos CSS a un elemento HTML disponemos de varias opciones:

  • con el atributo style

    El atributo style permite definir en línea propiedades de estilo.

    Ejemplo: párrafo con tamaño 11px y tipo de letra Verdana.

    <p style="font-size: 11px; font-family: verdana;">hola</p>
  • con la etiqueta <style>

    <style></style>

    Esta etiqueta, que generalmente va en la cabecera, permite definir estilos CSS. Los estilos se incluirán dentro de un comentario HTML (<!– –>) para evitar problemas de visualización en navegadores antiguos que no soportan CSS.

    Atributos:

    • type: define el lenguaje tilizado, text/css para CSS.
    • media: establece el estilo en función del medio de salida. Los valores más comunes son:
      • all: para todas los medios de salida. Valor por defecto.
      • screen: para presentación del documento web en pantalla.
      • print: para presentación del documento en impresora.

    Ejemplo:

    <html>
      <head>
        <style type="text/css">
          <!--
          h1 { color: red }
          p { color:blue }
          -->
        </style>
      </head>
      <body>
        <h1>Titulo</h1>
        <p>Texto.</p>
      </body>
    </html>
  • con la etiqueta <link />

    Un archivo de estilos es un documento de texto con extensión .css que contiene definiciones de estilos CSS. Si llevamos los estilos CSS a un archivo externo tendremos en un único archivo el formato de todas las páginas de nuestro sitio web, lo cual es una gran ventaja a la hora de hacer cambios en la presentación. Para usar en nuestra página los estilos en él definidos debemos vincularlo a la misma, lo que se consigue con la etiqueta <link /> en el head:

    <link rel="stylesheet" type="text/css" href="estilos.css">

    Ejemplo de archivo de estilos externo estilos.css:

    .celda {
        fon-size: 10px;
        font-family: helvetica;
    }
     
    #comment {
        margin-left: 20pt;
        color: red;
    }
  • con la instrucción @import

    La instrucción @import permite importar un archivo de estilos externo. Esta instrucción se puede incluir dentro de la etiqueta <style> o dentro de otro archivo de estilos y debe preceder a cualquier definición de estilos.

    Ejemplo de cómo importar un archivo de estilos externo:

    <html>
      <head>
        <style type="text/css">
          <!--
          @import url("http://www.domain.com/otroestilo.css");
          h1 { color: red }
          p { color:blue }
          -->
        </style>
      </head>
      <body>
        <h1>Titulo</h1>
        <p>Texto.</p>
      </body>
    </html>

Recursos

Reset CSS: eliminar las reglas CSS por defecto de los navegadores

En los navegadores web, cada elemento HTML tiene unos atributos de estilo CSS predeterminados por defecto.

El consorcio W3C publicó una recomendación según la cual los diferentes agentes de usuario debían adoptar un valor por defecto para cada propiedad CSS, pero algunos navegadores hicieron caso omiso a estas indicaciones, por lo que en ocasiones estos atributos causan problemas a la hora de crear un sitio cross-browser (que se visualize correctamente en todos los navegadores).

Por ese motivo, los diseñadores web se han visto obligados a recurrir al uso de unas hojas de estilo en cascada (CSS, Cascading Style Sheet) denominadas Reset CSS, cuyo propósito es establecer definiciones para aquellas propiedades de estilo problemáticas, intentando así minimizar las diferencias visuales que se producen al mostrar una misma página web en diferentes navegadores, cuyos valores por defecto no siempre siguen la recomendación del W3C.

Las hojas Reset CSS sirven para resetear los estilos empleados en una página web, anulando los valores por defecto del navegador, obligando así al diseñador a declarar expresamente todas las propiedades de estilo en cada uno de los lugares donde sea necesario, sin dejar ese aspecto a decisión del navegador, unificando de esta manera la visualización de la página entre navegadores y minimizando por tanto, las diferencias visuales entre ellos.

Reseteo CSS genérico

La mayoría de diseñadores web suelen declarar un reseteo CSS genérico al comienzo de sus hojas de estilo utilizando el selector universal de CSS representado por un asterisco (*), de tal manera que todos los elementos contenidos en el HTML carecerán de márgenes, relleno y bordes:

* {
  padding: 0;
  margin: 0;
  border: 0;
}

Algunos Reset CSS famosos

Veamos algunos Reset CSS famosos:

Artículos en la categoría "Manual de HTML"

  1. Manual de HTML: Cómo tener una web
  2. Manual de HTML: Cabecera
  3. Manual de HTML: Estilos CSS
  4. Manual de HTML: Cajas (div)
  5. Manual de HTML: Texto
  6. Manual de HTML: Glosarios y Listas
  7. Manual de HTML: Enlaces
  8. Manual de HTML: Tablas
  9. Manual de HTML: Imágenes
  10. Manual de HTML: Frames (marcos)
  11. Manual de HTML: Colores HTML
  12. Manual de HTML: Colores seguros para la web
  13. Manual de HTML: Formularios
  14. Manual de HTML: Fuentes
  15. Manual de HTML: Objetos
  16. Manual de HTML: Eventos y scripts
  17. Manual de HTML: Caracteres especiales
  18. Manual de HTML: Unidades
  19. Manual de HTML: URL encoding
  20. Manual de HTML: Responsive Web Design (diseño web adaptativo)
  21. Manual de HTML: Geolocalización HTML5 en aplicaciones web