Sea protagonista de la Web

Virtualnauta > Tutorial HTML > Estilos

Hojas de estilo en cascada - CSS

¿Qué son las hojas de estilos?

Las hojas de estilo en cascada (Cascading Style Sheets, CSS) son un lenguaje usado para definir la presentación de un documento escrito en HTML.

Con la versión HTML 4.0 todos los formatos pueden ser definidos en una hoja de estilos por separado.

¿Cómo se usan las hojas de estilos?

Cuando un navegador lee una hoja de estilos, este formatea el documento de acuerdo a la misma.

Hay 3 formas de insertar una hoja de estilos:

1. Entre líneas

Debemos usar esta forma cuando un único estilo es aplicado a un solo elemento.
Su uso está dado por el atributo style que se encuentra en ciertas etiquetas.

Código

<p style="color:red; margin-left:30px">

Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.

</p>

Resultado

Este párrafo es de color rojo y se encuentra a 30 pixels del margen izquierdo.

2. Hojas de estilo interna

Las hojas de estilo interna deben usarse cuando una página tiene un estilo único.
Las definimos con la etiqueta <style> en la cabecera del documento entre las etiquetas <head> y </head>

<head>
<style type="text/css">
body {background-color:blue}
p {color:white}
</style>
</head>

En este ejemplo se muestra que la etiqueta <style> con su atributo type define una hoja de estilo.

Entre las etiquetas style definimos a la etiqueta <body> con un color de fondo azul y a la etiqueta <p> de color blanco.

3. Hojas de estilo externas

Esta es la forma ideal para cuando una misma hoja de estilos es aplicada a varias páginas.
Con realizar los cambios en un solo archivo, podemos cambiar el aspecto de todo el sitio web.
Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.

Las hojas de estilo deben llevar la terminación (.css).

Si desea aprender más sobre las hojas de estilo, visite nuestro tutorial de CSS.

Etiquetas y atributos de las hojas de estilo.

Etiquetas	Atributos	Valor	Descripción
<style>			Define un estilo.
	type	text/css	Define el tipo de contenido.
	media		El medio para la información del estilo.
		screen	Para pantallas no paginadas de computadora.
		tty	Para medios que utilicen una cuadrícula de caracteres de ancho fijo, como teletipos.
		tv	Para dispositivos tipo televisión .
		projection	Para proyectores.
		handheld	Para dispositivos de mano (pantalla pequeña, monocromos,etc).
		print	Para material paginado, opaco, y para documentos que se ven en una pantalla en modo de presentación preliminar a la impresión.
		braille	Para dispositivos táctiles braille.
		aural	Para sintetizadores de voz.
		all	Apropiado para todos los dispositivos.
<div>			Define una sección o un documento.
	align Desaprobado	left	Como alinear el texto en el elemento div. Use CSS en su lugar.
		right
		center
		justify
<span>			Agrupa los elementos de una línea para aplicarles estilos.
<font> Desaprobado			Define el tipo, color y tamaño del texto. Use CSS en su lugar.
	color	rgb	Define el color del texto. Use CSS en su lugar.
		#xxxxxx
		nombre del color
	face	listado de nombres de letras	Define el nombre de la letra. Use CSS en su lugar.
	size	Un número entre 1 y 7. Si se ha definido basefont debe especificar un número entre -6 y 6.	Define el tamaño de la letra. Use CSS en su lugar.
<basefont> Desaprobado			Define la letra base. Use CSS en su lugar.
	color	rgb	Define el color del texto. Use CSS en su lugar.
		#xxxxxx
		nombre del color
	face	listado de nombres de letras	Define el nombre de la letra. Use CSS en su lugar.
	size	Un número entre 1 y 7.	Define el tamaño de la letra. Use CSS en su lugar.
<center> Desaprobado			Centra un texto horizontalmente. Use CSS en su lugar.

Atributos estándard

id, class, title, style, dir, lang

Si desea una descripción completa, diríjase a: atributos estándard.

Eventos intrínsecos

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

Si desea una descripción completa, diríjase a: eventos intrínsecos.

Búsqueda

Otros tutoriales

CSS
Herramientas Utiles

Google

Diseño Web

Intercambio

Banners
Links

Etiquetas de HTML

Colores

Avanzado

Ejemplos y Examen

Guías de referencia