CSS significa Cascading Style Sheets (Hojas de estilo en cascada). Es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

Los estilos se puede añadir a los elementos HTML de 3 formas:

En línea – utilizando el atributo style en los elementos HTML.
Internamente – utilizando un elemento <style> en la sección <head> del código HTML.
Externamente – utilizando uno o más archivos CSS externos.

La forma más común para agregar estilos, es mantenerlos en archivos CSS separados (externamente). Pero, en este artículo, usaremos estilos internos, ya que es más fácil de mostrar, y más fácil para que puedas probarlo tu mismo.

Sintaxis CSS

Los estilos CSS tienen la siguiente sintaxis:

elemento { propiedad:valor; propiedad:valor }

El elemento, es el nombre de un elemento HTML. La propiedad es una propiedad CSS. El valor es un valor CSS. Puedes aplicar varios estilos a un elemento HTML separándolos con el símbolo de punto y coma (;).

Estilos en línea (CSS en línea)

Los estilos en línea son útiles cuando deseas aplicar un único estilo (o como mucho, unos pocos estilos) a un elemento HTML.

Para los estilos en línea debes de utilizar el atributo style.

Por ejemplo las propiedad CSS: color cambia, el color del texto de un elemento HTML.

Ejemplo

<!DOCTYPE html>
<html>
<body>
   <h3 style="color:blue;font-style:verdana">Este es un titulo de color azul y fuente verdana</h3>
</body>
</html>

Resultado en el navegador

Este es un titulo de color azul y fuente verdana

Estilos internos (CSS interno)

Puedes utilizar una hoja de estilos interna para definir un estilo común para todos los elementos HTML de una página.

Los estilos internos tienes que colocarlos en la sección <head> de la página HTML, utilizando el elemento <style>.

Ejemplo

<!DOCTYPE html>
<html>
<head>
   <style>
      body {background-color:lightgrey}
      h1   {color:blue}
      p    {color:green}
  </style>
</head>
<body>
   <h1>Esto es un título de nivel 1</h1>
   <p>Esto es un párrafo.</p>
</body>
</html>

Resultado en el navegador

Estilos externos (CSS externo)

Las hojas de estilo externas son ideales para cuando desees aplicar los mismos estilos a varias páginas web.

Con las hojas de estilo externas, podrás cambiar el aspecto completo de un sitio web cambiando un único archivo.

Las hojas de estilo externas las tienes que definir en archivos CSS independientes, y enlazar a ellos en la sección <head> de la página HTML.

Ejemplo:

Código archivo HTML

<!DOCTYPE html>
<html>
<head>
   <link rel="stylesheet" href="estilos.css">
</head>
<body>
   <h1>Esto es el t&iacute;tulo</h1>
   <p>Esto es un p&aacute;rrafo.</p>
</body>
</html>

Código archivo estilos.css

body {
   background-color:lightgrey;
}
h1   {
   color:blue;
}
p    {
   color:green;
}

Guarda el código HTML en un archivo de nombre, por ejemplo, estilos.html, y en la misma carpeta, el código CSS, en un archivo de nombre estilos.css, y ejecuta en el navegador el archivo estilos.html, haciendo un doble clic sobre él.

Resultado en el navegador

Estilos de fuente CSS

La propiedad CSS color define el color del texto del elemento HTML.
La propiedad CSS font-family define la fuente a usar en el elemento HTML.
La propiedad CSS font-size define el tamaño del texto a asignar al elemento HTML.

Ejemplo

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         color:blue;
         font-family:verdana;
         font-size:300%;
     }
     p  {
        color:red;
        font-family:courier;
        font-size:160%;
     }
   </style>
</head>
<body>
   <h1>Esto es un t&iacute;tulo</h1>
   <p>Esto es un p&aacuterrafo.</p>
</body>
</html>

Resultado en el navegador

Esto es un título

Esto es un párrafo

Las cajas CSS (CSS Box Model)

Cada elemento HTML, dispone de una caja alrededor de él, lo que ocurre, es que por defecto no se puede ver.

La propiedad CSS border define un borde visible alrededor del elemento HTML.
La propiedad CSS padding define el espacio entre el borde y el elemento HTML.
La propiedad CSS margin define, el espacio por fuera del elemento HTML.

El estilo de párrafo:

p {
    border:1px solid red;
    padding:10px;
    margin:30px;
}

define un borde de un pixel de grosor, sólido (visible), de color rojo, con un espaciado interior de 10 pixels y un espaciado exterior de 30 pixels.

Ejemplo

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         border:1px solid red;
         padding:10px;
         margin:30px;
     }
   </style>
</head>
<body>
   <p>Este es el primer p&aacute;rrafo.</p>
   <p>Este es el segundo p&aacute;rrafo.</p>
   <p>Este es el tercer p&aacute;rrafo.</p>
</body>
</html>

Resultado en el navegador

Este es el primer párrafo.

Este es el segundo párrafo.

Este es el tercer párrafo.

el padding de 10px es el espacio interior entre los bordes y el texto. El margin de 30px, es el espacio, que rodea a las cajas por el exterior de las mismas.

El atributo id

Todos los ejemplos anteriores utilizan estilos CSS para los elementos HTML de forma general.

Si deseas definir un estilo especial, sólo para un elemento HTML, debes de añadir el atributo id al elemento.

Ejemplo

<!DOCTYPE html>
<html>
<head>
   <style>
      p {
         font-family: verdana;
      }
      p#p01 {
         color: blue;
      }
   </style>
</head>
<body>
   <p>Este es un p&aacute;rrafo.</p>
   <p>Este es otro p&aacute;rrafo.</p>
   <p id="p01">Este p&aacute;rrafo es diferente.</p>
</body>
</html>

Resultado en el navegador

Este es un párrafo.

Este es otro párrafo.

Este párrafo es diferente.

En el ejemplo anterior, a todos los párrafos se les asigna la fuente verdana, pero sólo el párrafo con id p01 es de color azul.

El atributo CSS class

Cuando desees definir un estilo para un tipo especial de elementos, deberás añadir el atributo class al elemento. Por ejemplo:

Ejemplo

<!DOCTYPE html>
<html>
<head>
   <style>
      p.error {
         color:red;
     }
   </style>
</head>
<body>
   <p>Este es un p&aacute;rrafo.</p>
   <p class="error">Este es un p&aacute;rrafo diferente.</p>
   <p>Esto es un p&aacute;rrafo.</p>
   <p class="error">Este es un p&aacute;rrafo diferente.</p>
</body>
</html>

Resultado en el navegador

Este es un párrafo.

Este es un párrafo diferente.

Esto es un párrafo.

Este es un párrafo diferente.

En el ejemplo, sólo los párrafos con clase (class) error, son de color rojo.

Usa id para asignar estilos a un elemento HTML. Utiliza class para asignar estilos a un grupo de elementos.

En resumen

Utiliza el atributo HTML style para estilos en línea.
Utiliza el elemento HTML <style>, dentro de la sección <head> del documento HTML, para definir estilos CSS internos.
Utiliza el elemento HTML <link>, dentro de la sección <head> del documento HTML, para enlazar con archivos CSS externos.
Utiliza la propiedad CSS color para asignar color al texto de los elementos HTML.
Utiliza la propiedad CSS font-family para asignar la fuente a los elementos HTML.
Utiliza la propiedad CSS font-size para asignar el tamaño de la fuente a los elementos HTML.
Utiliza la propiedad CSS border para hacer visible el borde que rodea a los elementos HTML.
Utiliza la propiedad CSS padding, para signar el espacio entre el borde y el elemento HTML.
Utiliza la propiedad CSS margin, para asignar espacio exterior al borde del elemento HTML.

Ejemplo

<!DOCTYPE html>
<html>
<head>
   <style>
   p.intro {
      background-color:black;
      color:white;
      border:1px solid grey;
      padding:10px;
      margin:30px;
      font-size:150%;
   }
   </style>
</head>
<body>
   <h1>Este es el t&iacute;tulo</h1>
   <p>Este es un párrafo por defecto</p>
   <p class="intro">Este es un p&aacute;rrafo clase intro.</p>
   <p class="intro">Este es un p&aacute;rrafo clase intro.</p>
   <p>Este es un p&aacute;rrafo por defecto.</p>
</body>
</html>