Dónde estoy: Home > Descubre > Manual de HTML: Estilos CSS
Imprimir

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

Deja un comentario