¿Cómo se usan los estilos?

¿Dónde debemos utilizar CSS y cómo funciona en cada lugar?


¿Dónde usar 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
  2. Dentro de la sección Head
  3. Hojas de estilo externas

1. Entre líneas

Definimos el estilo directamente dentro del código HTML.

Sintaxis

<selector style="propiedad: valor;propiedad: valor;">

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

Ejemplo

Vamos a aplicar un estilo "solo" al elemento p de esta línea.

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. Dentro de la sección Head

Las hojas de estilo interna deben usarse cuando una página tiene un estilo único.

Sintaxis

<head>
<style type="text/css">
selector 1 {propiedad: valor;}
selector 2 {propiedad: valor;}
</style>
</head>

<body>
<etiqueta 1>Bla, bla, bla</etiqueta 1>
<etiqueta 2>Texto, texto, texto</etiqueta 2>
</body>

La etiqueta <style type="text/css"> en la cabecera del documento entre las etiquetas <head> y </head> se usa para definir los estilos correspondientes a esta página solamente.

Ejemplo

Vamos a aplicar estilos a aquellos elementos definidos en la sección Head solo de "esta" hoja.

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 página es #008080.
</p>
</body>
Resultado

Este texto es de color blanco y el color de fondo de la página 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 #008080 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.
Los archivos de hojas de estilo deben llevar la terminación .css.

Sintaxis

Contenido del archivo de los estilos

selector
{
propiedad:valor; /* No olvidar el (;) al final de cada valor */
propiedad:valor;
propiedad:valor;
}

Sintaxis

Esta es la forma de llamar al archivo ".css" desde un documento HTML

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

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.

Ejemplo

Así se vería por ejemplo, un archivo CSS externo que llamaremos "estilos.css".
Nota: el código, en los archivos de hojas de estilos externos, comienza directamente con el selector.

Código CSS
p
{
font-family:Arial;
font-size:12px;
font-weight:bold;
}

Así se vería el documento HTML que llama al archivo "estilos.css".

Código HTML
<head>
<link rel="stylesheet" type="text/css" href="/estilos.css">
</head>

<body>
<p>Características de este texto: Arial, de 12 pixels, bold</p>
</body>
Resultado

Características de este texto: Arial, de 12 pixels, bold


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

En la Web