CSS

¿Cómo se usan los estilos?

Donde debemos utilizar CSS y como funciona en cada lugar.

¿Dónde se ubican los 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

Definimos el estilo directamente dentro del código HTML.

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

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>

Código

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

<body>
<p>
Este texto es de color blanco y el color de fondo de la pagina es #008080.
</p>
</body>

Resultado

Este texto es de color blanco y el color de fondo de la pagina es #008080.

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

Entre las etiquetas style definimos al selector body con un color de fondo azul y al selector 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.
Las hojas de estilo deben llevar la terminación .css.
Así se vería por ejemplo, un archivo CSS externo que llamaremos "fuentes.css":

p
{
font-family:Arial;
font-size:12px;
font-weight:normal;
}

Nota: el código, en los archivos de hojas de estilos externos, comienzan directamente con el selector.

Cada página del sitio debe vincularse con la hoja de estilos usando la etiqueta <link> ubicada en la cabecera del documento.

rel="stylesheet" nos indica que la relación es una hoja de estilo.
type="text/css" nos dice que el tipo es texto y css.
href="fuentes.css" es el nombre del documento que contiene el código css.

¿No encuentras lo que buscas?

<<< Sintaxis de CSS Background en CSS >>>

Artículos

Los mejores 10 hostings

Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...

CSS

Básico

Avanzado

Ejemplos y Examen

Guías de referencia