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:
- 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.
- prevalecen los estilos más específicos y cercanos al elemento sobre los formatos genéricos.
- 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
- Selectores CSS: CSS Selectors
- Insertar contenido y contadores con CSS: Generated content and numbering
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>
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
- Etiquetas HTML 4.01: Tags ordered alphabetically
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:
- Reset CSS de Yahoo! UI Library (developer.yahoo.com)
Descargar fichero CSS: yahoo-reset.css - Reset CSS del diseñador web Eric Meyer (meyerweb.com)
Descargar fichero CSS: eric-meyer-reset.css - Reset CSS del framework CSS Blueprint (blueprintcss.org)
Descargar fichero CSS: blueprint-reset.css