Introducción a CSS
Profesor: Javier López
Volver
Funcionamiento de los estilos CSS
Tres modos de utilización:

1. Utilizar un fichero CSS externo
2. Incluir el código CSS dentro del HTML
3. Aplicar CSS a un trozo de texto muy concreto

Funcionamiento de los estilos CSS
Los estilos CSS son un conjunto de normas que indican cómo el navegador debe visualizar cada uno de los diferentes elementos que contiene una página web. Aunque estas normas habitualmente están relacionadas con aspectos visuales y consideraciones decorativas, con CSS3 cada vez existen más posibilidades (animaciones, trasnsiciones, eventos..).

Una de las utilidades más evidentes de CSS es la posibilidad de aplicar un estilo a múltiples páginas html, no teniendo que repetir los mismos estilos cada vez que creamos un html nuevo. En este caso se podría utilizar un único fichero CSS externo que afectaría al mismo tiempo a múltiples páginas html. También sería posible incluir el código CSS dentro del mismo fichero html, o bien añadir código CSS señalando sólo una parte del texto dentro del mismo html o incluso utilizar todas estas tres posibilidades conjuntamente.

Vamos a suponer que queremos que el fondo de nuestra página web tenga un bonito color verde oliva (nombre de color en HTML5: 'olive') y que además el color del texto sea blanco. Y para ello vamos a hacerlo de tres maneras distintas.

Tres modos de utilización

1. Utilizar un fichero CSS externo
Esta es una de las opciones más comunes, ya que posteriormente es posible utilizar el mismo fichero CSS para aplicar el mismo estilo a otras páginas html. De esta manera, cualquier cambio realizado en el diseño afectaría al mismo tiempo a todas las páginas html que utilicen dicho fichero CSS.

En este caso, por una parte tendríamos un fichero HTML y un fichero CSS, para conectar ambos debemos añadir el siguiente código en fichero HTML dentro del <head>.
<link rel="stylesheet" href="estilo.css" type="text/css"/>
En el ejemplo anterior, el fichero CSS se llamaría estilo.css y estaría ubicado en la misma carpeta que el html. Como lo lógico es que el fichero esté en una carpeta llamada css, lo único que tendríamos que hacer es añadir el nombre de la carpeta antes del fichero:
<link rel="stylesheet" href="css/estilo.css" type="text/css"/>
Dentro del fichero estilo.css tendríamos únicamente el siguiente contenido:
body{
  background-color:olive;
  color:white;
}
La estructura siempre es la misma:
selector{
  atributo:valor;
  atributo:valor;
}

2. Incluir el código CSS dentro del HTML
En este caso, como aspecto positivo, podemos decir que no necesitamos tener 2 ficheros, ya que todo está en el fichero html. Como punto negativo (o no) es que dicho estilo únicamente afectará al fichero hmtl en el que se coloque el código CSS.

Este código se añade dentro del apartado '<head>', y debe estar dentro de estas 2 líneas:
<style type="text/css">
</style>
Siguiendo el ejemplo anterior, el código completo quedaría de la siguiente manera:
<style type="text/css">
  body{
    background-color:olive;
    color:white;
  }
</style>

3. Aplicar CSS a un trozo de texto muy concreto
Si lo que queremos es aplicar un estilo a un párrafo, a un frase o incluso a una palabra o letra en concreto insertaremos el código CSS dentro de un '<span>' o '<p>' que encerrará el párrafo, frase, palabra o letra afectada:

Si dicho texto tiene aplicado otro estilo a través de un CSS externo o colocado en el html se aplicarán ambos estilos al mismo tiempo.
(El texto coloreado de color rojo es aquel que se mostrará en pantalla con los atributos que se le hayan asignado, éstos en color negro).
Texto <span style="color:red;font-size:40px">rojo y grande</span> y este otro <span style="color:blue;
font-weight:bold;font-size:16px">azul, negrita y pequeño</span>
</style>
Texto rojo y grande y este otro azul, negrita y pequeño