Introducción a CSS y sus propiedades

En esta instancia doy por hecho que tienen una noción al menos básica de HTML5 y que al menos por curiosidad saben que es CSS. Si por el contrario no lo saben he aquí una definición:

Según nuestra amiga Wikipedia "Hojas de Estilo en Cascada (Cascading Style Sheets) es el lenguaje de hojas de estilo utilizado para describir el aspecto y el formato de un documento escrito en un lenguaje de marcas, esto incluye varios lenguajes basados en XML como son XHTML o SVG."

Empezando con CSS

Las hojas de estilo (CSS) requieren conectarse con las páginas HTML y al mismo tiempo, poder comunicarse entre sí. Para que las hojas CSS puedan enviar las instrucciones de diseño y estilos, se necesita tener un identificador en las hojas HTML para que podamos manipular cada etiqueta. Para eso, están las propiedades “id” y “class”, esto permite una conexión entre ellos y sepas exactamente qué estás manipulando. Realmente es muy sencillo:

HTML

<etiqueta id=”usuario1” class=”azul”></etiqueta>
<etiqueta id=”usuario2” class=”azul”></etiqueta>

CSS

#usuario1 {
    /* Fuente especial para usuario1 */
    font-size:16px;
}

#usuario2 {
    /* Fuente especial para usuario2 */
    font-size:14px;
}

.azul {
    /* Mismo color para todos los usuarios */
    color: blue;
}

Ya tenemos una idea de como se usa CSS, si quieres aprender sobre CSS básico puedes googlear "curso de CSS", "tutorial de CSS", etc. En este artículo nos basaremos en las nuevas características de CSS3.

¿Que hay de nuevo?

A continuación veremos las nuevas capacidades de CSS3; bordes redondeados, sombras, @font-face, etc..

Bordes Redondeados

El border-radius es una nueva característica de CSS3 que permite crear border redondeados de forma sencilla. Ej.:

#caja {
  border-radius: 20px 40px 60px 80px;  
  background-color: #fafafa;
  width: 300px;
  padding: 10px;
}

Podemos indicar el redondeo de cada esquina de forma independiente (el orden de los valores son la esquina superior izquierda, la esquina superior derecha, la esquina inferior derecha y por último la esquina inferior izquierda).

Se pueden setear de forma individual como les muestro a continuación:

#caja {
 border-top-left-radius: 20px;
 border-top-right-radius: 20px;
 border-bottom-right-radius: 20px;
 border-bottom-left-radius: 20px;
}

Sombras

El box-shadow nos permite darle una sombra a un objeto de nuestra página.

#caja {
  box-shadow: 30px 10px 20px #aaa; 
}

Debemos definir tres valores y un color.

Desplazamiento horizontal: un valor positivo indica que la sombra será a la derecha del objeto y un valor negativo a la izquierda
Desplazamiento vertical: un valor positivo indica que estará en la parte superior y uno negativo en la inferior.
Radio de desenfoque: en valor 0 la sombra será muy fuerte y si aumentamos su valor la sombra será suave.
Color: este último valor como su nombre lo dice establece el color de dicha sombra.

Hay mucho más sobre sombras; sombras múltiples, sombras interiores, sombras con transparencias, sombras de texto (text-shadow) pero eso se los dejo de tarea para que investiguen por su cuenta :)

@font-face

En CSS3 se especifica una nueva sintaxis para importar fuentes no disponibles en el navegador y que se descargan de un servidor web.

El problema actual es que hay varios formatos de fuentes que son apoyados por distintos navegadores. El IE8 e inferiores solo admite el formato EOT que es propietario. El formato True Type es ampliamente soportado por navegadores modernos. Otros formatos son el OpenType, SVG y WOFF.

Esta diversidad de formatos de fuente hace necesario que indiquemos la mayor cantidad de formatos de fuentes posibles para nuestro sitio.

Para importar una fuente que será utilizada por nuestra página web debemos utilizar la regla @font-face, en la misma indicamos el nombre de la fuente a importar y la dirección web de donde la debe descargar el navegador, la sintaxis es:

@font-face {
  font-family: [nombre de la fuente];
  src: local(""),
  url("nombrearchivo.woff") format("woff"),
  url("nombrearchivo.otf") format("opentype"),
  url("nombrearchivo.svg#nombre de la fuente") format("svg");
}

Podemos descargar una fuente del sitio www.fontsquirrel.com para probar la importación de fuentes (hay una sección donde podemos descargar varios formatos para la misma fuente).

Veamos un ejemplo de utilizar una fuente descargada del sitio mencionado anteriormente:

<!DOCTYPE html> 
<html> 
<head> 
<title>Prueba @font-face</title> 

<style type="text/css"> 
@font-face {
    font-family: "Ubuntu";
    src: url("Ubuntu-Title-webfont.eot") format("eot"),
         url("Ubuntu-Title-webfont.woff") format("woff"),
         url("Ubuntu-Title-webfont.ttf") format("truetype"),
         url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");
}
#cuadro1{
  border-radius: 20px;  
  background-color: #ddd;
  width: 200px;
  padding: 10px;
}
#cuadro1 p {
  font-family: Ubuntu;
  color: #ff0000;
  font-size: 20px;
}
body {
  background: white;
  margin: 50px;
}
</style> 
</head>
<body>

<div id="cuadro1"> 
<h3>Cuadro 1</h3>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec.</p>
</div> 

</body> 
</html>

Con @font-face hacemos referencia a cuatro fuentes con distintos formatos y definimos su nombre en la propiedad font-family:

@font-face {
    font-family: "Ubuntu";
    src: url("Ubuntu-Title-webfont.eot") format("eot"),
         url("Ubuntu-Title-webfont.woff") format("woff"),
         url("Ubuntu-Title-webfont.ttf") format("truetype"),
         url("Ubuntu-Title-webfont.svg#UbuntuTitle") format("svg");
}

Ya podemos utilizar la fuente "Ubuntu" que acabamos de importar:

#cuadro1 p {
  font-family: Ubuntu;
  color: #ff0000;
  font-size: 20px;
}

En este código indicamos que los párrafos contenidos en #cuadro1 deben utilizar la fuente Ubuntu.

Hay otras propiedades interesantes de CSS3 que puedes investigar; transform, opacity, animaciones, etc.

No olvides participar dejando tus dudas y comentarios :)