Introducción a CSS

Profesores:JAB y Ester Torres

¿Qué son 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 de posicionamiento y colocación, con CSS3 cada vez existen más posibilidades (animaciones, transiciones, rotaciones..).

Una de las utilidades más evidentes de CSS es la posibilidad de aplicar un estilo (un conjunto de características) 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 (con formato .css) que afectaría al mismo tiempo a múltiples páginas HTML, o bien incluir el código CSS dentro del mismo fichero HTML (dentro del <head>), o utilizar estas dos 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 dos maneras distintas.


Dos modos de utilización

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, tendríamos un fichero HTML y un fichero CSS (con extensión .css). Para conectar a ambos utilizaremos la etiqueta <link>, que colocaríamos en el fichero HTML dentro del <head>.
<link rel="stylesheet" href="css/estilos.css" type="text/css"/>
En el código anterior, el fichero CSS se llamaría estilos.css y estaría ubicado en una carpeta llamada css, que estaría en la misma carpeta que el fichero HTML.
Dentro del fichero estilos.css tendríamos el siguiente contenido:
body{
  background-color:olive;
  color:white;
}
La estructura siempre es la misma:
selector{
  propiedad:valor;
  propiedad:valor;
}


Incluir el código CSS dentro del HTML

Si añadimos el código CSS dentro del mismo fichero HTML (dentro del <head>), como aspecto positivo, podemos decir que no necesitamos tener 2 ficheros, ya que todo está en el mismo fichero HTML.
Como punto negativo (o no en algunos casos) es que dicho estilo únicamente afectará al fichero HTML en el que se coloque el código CSS. Lo cual implica que si tenemos múltiples ficheros HTML que tienen que usar los mismos estilos, dicho código se tendría que copiar y pegar en cada uno de los ficheros HTML de manera independiente.
Este código CSS se añade dentro del apartado <head>, y debe estar dentro de la etiqueta style:
<style type="text/css">
</style>
Siguiendo el ejemplo anterior, el código completo quedaría de la siguiente manera:
<head>
  <style type="text/css">
    body{
      background-color:olive;
      color:white;
    }
  </style>
</head>