#2 Programación web: CSS

Bienvenidos a la segunda parte del curso de programación web, donde hablaremos de CSS. En esta parte del curso de CSS vamos a ver todos los elementos que necesitas para empezar a utilizar esta herramienta. Empezaremos con algunos conceptos que es preciso entender para poder programar en CSS correctamente.

Así que sin más dilación, ¡allá vamos!

Introducción a CSS

Es necesario especificar que existen buenas prácticas relacionadas con las nuevas pantallas de visualización. Antiguamente, si alguien estaba mirando una página web, siempre era desde un ordenador con una pantalla grande.

De hecho, tampoco había mucha variedad de tamaños de pantalla así que se podían especificar los tamaños de los objetos que poníamos en nuestras páginas web en unidad fija de píxeles.

Hoy en día eso no es posible, ya que existen una gran cantidad y variedad de tamaños de pantallas diferentes, así que es totalmente inviable suponer el tamaño que tiene una pantalla. Por esos motivos, existen nuevas técnicas para adaptar automáticamente el tamaño a las pantallas.

Yo, en esta primera parte del curso de CSS, te voy a explicar los conceptos de una forma simplificada, y en siguientes partes entraremos más en detalle de como hacerlo de una forma más correcta y actual. 

El motivo para no explicaros directamente la versión más actual de uso, es que será más fácil seguir el curso si vamos paso por paso.

Esta parte del curso de CSS va a ser extensa, pero no contiene conceptos ni información muy complicada o difícil de seguir.

Cuando hablamos de CSS, tenemos que tener en cuenta que estamos hablando de un tipo de programación que nos permite aplicar estilos a nuestros HTMLs. Para ello, tenemos una gran variedad de herramientas que nos permite modificar los textos de HTML. Para hacerlo de forma correcta, lo lógico es separar el HTML y el CSS en dos ficheros y relacionarlos mediante un vínculo del CSS en el HTML. Es decir, podríamos cambiar de CSS y tendríamos unos estilos diferentes con el mismo contenido.

Para hacer una relación de los estilos con cada parte del contenido en HTML necesitaremos los selectores, que explicaremos justo en el siguiente punto.

Selectores

Empecemos por lo primero de todo. Para ser capaces de relacionar cada uno de los elementos de nuestros HTML al CSS, necesitamos utilizar selectores. Los hay de varios tipos, y los vamos a ver uno a uno a continuación. Utilizando los selectores, podemos especificar los estilos que queremos para cada uno de ellos.

Selectores de Etiquetas

Los selectores de etiquetas son los más básicos ya que hacen referencia a las etiquetas de HTML. Ya hemos hablado de las etiquetas en la parte anterior de este curso, pero básicamente son los elementos que vamos a utilizar y que están predefinidos en HTML.

La manera de utilizar este tipo de selector es especificar la etiqueta y poner los estilos entre llaves. Por ejemplo: h1 {..estilos..} ➢ estilos especificaría todos los estilos para el título.

Selectores de ID

Los selectores de ID nos permiten asociar directamente elementos concretos del HTML con un estilo en CSS. Para ello, debemos darle un identificador o ID al elemento y referenciarlo en CSS. La sintaxis sería la siguiente:

Este selector solo puede aplicarse a un elemento, ya que cada elemento solo puede tener un identificador, si quisiéramos aplicar una serie de estilos a varios elementos, deberíamos usar un selector de clase, que veremos a continuación.

Selectores de Clases

El selector nos permite especificar una clase y asociarla a varios elementos. Los estilos que se aplican a una clase, se aplican a todos los elementos de dicha clase.

En este ejemplo tenemos cuatro párrafos y tres clases predefinidas. Si un elemento tiene más de una clase y tiene contraindicaciones en la especificación de los estilos, CSS va a utilizar los últimos que se hayan definido o los que sean más específicos.

Selectores de Atributos

Este tipo de selectores nos permiten seleccionar elementos concretos de las etiquetas existentes en HTML y aplicarles un estilo. Para que quede más claro vamos a ver un ejemplo.

Selectores Hijo

Los selectores hijo nos permiten especificar mediante ">" la serie de etiquetas que debe darse para aplicar el estilo. Por ejemplo, si aplicamos un estilo al selector: #menu > li > a lo que estamos haciendo es especificar lo máximo posible que queremos darle unos estilos concretos a los enlaces (a) que encontraremos en las listas (li) que estén dentro de la clase menu (#menu).

Prioridad en CSS

Como he comentado anteriormente, el fichero CSS se va leyendo de arriba hacía abajo. Pero hay diferentes estilos que afectan al mismo elemento, se usarán los que estén más abajo o sean más específicos. Si son igual de específicos, se usará el que esté más abajo del fichero. Por ejemplo, si tenemos el CSS siguiente:

En las urls fuera del menú, se usarán los estilos2, mientras que en las urls que están dentro de la lista del menú usarán los estilos1, ya que aunque estén especificados anteriormente, son mucho más específicos.

Además, si queremos que uno estilo se priorice frente a todos los demás, se puede utilizar la sentencia !important. Esta sentencia hace que el estilo especificado siempre se ejecute por encima del resto.

Colores en CSS

Los colores en CSS se pueden asignar de tres formas:

• Hexadecimal, con la sintaxis #num_hexadecimal.
• En formato RGB, con la sintaxis rgb{0-255,0-255,0-255} (r,g y b).
• En formato RGBA (con capa alfa), utilizando la sintaxis rgba{0-255,0-255,0-255,0-1}.

Para definir un color en hexadecimal, rgb o rgba, podemos utilizar páginas externas que nos proporcionan esta información, por ejemplo aquí.

Además, hay algunos colores predefinidos que podemos utilizar por sus nombres en inglés, como red, blue, black, etc.

Fondos

Los fondos en CSS se pueden especificar como un color o como una imagen. En el caso del color se puede especificar de las formas mencionas en el apartado anterior, utilizando el estilo de CSS background-color: rgb(35,28,0)  (por ejemplo).

En el caso de especificar una imagen como fondo de la página web, debemos usar background-image: url(ruta de la imagen) donde la ruta puede ser en local o una url online (no recomendado).

Si es una imagen, podemos especificar como queremos que se visualice y si queremos que se repita. Para configurar la visualización de la imagen en nuestro fondo tenemos varios estilos CSS.

Por ejemplo, background-repeat para especificar como queremos que se repita, que tiene las opciones repeat (por defecto), no-repeat, repeat-x, repeat-y. Estas opciones especifican si queremos que se repita o no, que lo haga en el eje x o en el eje y, respectivamente.

Además, podemos especificar el tamaño en el que queremos que se muestre la imagen, con respecto a las dimensiones de la imagen en píxeles. Para ello, usamos background-size y le decimos para el eje x y el eje y en qué porcentaje de tamaño queremos que se vea, por ejemplo background-size: 100% 100% mostraría la imagen de fondo en su tamaño original.

También podemos definir si queremos que la imagen de fondo se mueva (haga scroll) cuando nosotros nos movemos hacía abajo o arriba en la página web. Para ello, utilizamos background-attachment, cuyos atributos más utilizados son: scroll (por defecto, se hace scroll ) y fixed (para no hacer scroll).

Por último, podemos definir también en qué punto queremos que se centre la imagen. Para ello, utilizamos background-position y le damos el valor de donde queremos que se posicione, por ejemplo left bottom, right center, etc. Si vamos a poner una imagen que se vea ampliada en todo el fondo, este valor no afecta. Pero si que lo hará en otras configuraciones.

Propiedades para texto

Los textos en CSS tienen una gran cantidad de propiedades que podemos variar. En primer lugar tenemos font-family, con la cual podemos especificar una serie de fuentes separadas por comas, y se usará la primera que esté disponible en el pc, de izquierda a derecha.

Además, podemos especificar el tamaño de las fuentes con la propiedad font-size. A esta propiedad le podemos dar un valor en píxeles, por ejemplo 16px; pero es una mejor práctica utilizar la medida em, donde 1em corresponde a 16px.

CSS asimismo nos permite especificar el grosor del texto. Para ello tenemos la propiedad font-weight. Esta propiedad admite los valores normal (defecto), bold, bolder o lighter para aplicar valores predefinidos. También podemos asignar valores numéricos desde 100 hasta 900, de 100 en 100. 100 es el valor de texto más fino, 400 es el grosor de normal y 700 el de bold.

A las fuentes les podemos asignar un estilo con font-styles, entre estos estilos destacan italic, normal y oblique.

Podemos especificar la altura de línea con la propiedad line-height en px y la alineación con text-align, que puede tener unos valores de center, left, right y justify.

También tenemos otros parámetros como text-transform, text-decoration, text-indent, word-spacing(px) y letter-spacint(px). 

Modelo de Cajas y Posicionamiento en CSS

En HTML tenemos algunas etiquetas que nos sirven para separar bloques de información, los más utilizados son <div> y <section>. Estos bloques, si no les añadimos estilos, son bloques planos donde la separación entre ellos es visualmente invisible.

Sin embargo, si les añadimos CSS, podemos crear un contenido más visual, que llamamos cajas. Hay varias propiedades que nos permiten personalizar las cajas. Para ello, primero debemos crear una caja con <div> o <section> y asignarle un identificador o una clase y posteriormente crear su sección de estilos.

Con estos atributos podemos darle un tamaño a la caja concreto, un tamaño mínimo y máximo, un color de fondo y espacios de márgenes. Además del atributo margin, también tenemos margin-top, margin-left, margin-bottom y margin-right, que nos permiten especificar los márgenes de cada lado de la caja.

Además de la propiedad margin, que se refiere al margen de la caja con respecto al resto de elementos, tenemos el padding. El padding es el margen interno. El padding, igual que ocurre con el margen, lo podemos modificar con padding-top, padding-left, padding-bottom y padding-right.

Más allá de poder personalizar las cajas, también podemos modificar su posición y como se comportan con respecto al resto de elementos. Para ello, incluimos el concepto de bloque, que tendremos que asignárselo a las cajas. Para ello, usamos la propiedad display: block. Una vez tengamos asignado este valor, podremos usar la propiedad float, que puede tener los valores left, right y none. Estos valores apilan las cajas a la izquierda, derecha y en diferentes filas, respectivamente. Para que se entienda mejor, pongo un ejemplo de cada caso:

Al utilizar el valor float, no sólo afecta al elemento de las cajas en sí, si no que afecta al resto de elementos posteriores. Por tanto, después de utilizarlo habría que reestablecer el valor float a none.

Sombras y Efectos

Las sombras y efectos se pueden aplicar a las cajas y textos en CSS. Para ello, podemos utilizar propiedades como text-shadow, que nos permite especificar como queremos que se vean las sombras en el texto. Esta propiedad tiene cuatro parámetros de entrada, los tres primeros están en píxeles y son el desplazamiento de la sombra en el eje X, el desplazamiento en el eje Y y el difuminado. El último parámetro es el color del que queremos que se vea la sombra.

Podemos usar, exactamente con los mismos parámetros, la propiedad box-shadow, que a mayores nos permite especificar si queremos que sea sombra interior o exterior. Es decir que se vea por fuera de la caja o por dentro. Este parámetro debe establecerse como inset para que sea interior, por defecto será exterior.

Además, a las cajas les podemos cambiar hasta cierto punto la forma de las esquinas. Por lo general tendrán forma de esquinas, pero podemos asignarle un valor de radio (con la propiedad border-radius) en píxeles. Con este parámetro se puede ajustar el valor de los bordes de las esquinas hasta que sean más redondeadas. La propiedad border-radius permite asignar un único valor, que se aplicará a todas las esquinas, o un valor por cada esquina.

Transiciones y animaciones

Para terminar esta parte del curso, hablaremos de las transiciones y animaciones en CSS. Para ello, es preciso introducir un nuevo término: pseudoclase. Este término hace referencia a ciertas acciones que se activan en momentos concretos. Por ejemplo, tenemos la pseudoclase :hover que se activa al pasar el ratón por encima del elemento al que está asociado la pseudoclave. De esta manera, podemos asociar ciertos cambios o comportamientos concretos a esa acción.

La manera de utilizarlo es la siguiente:

En este ejemplo, se implementa un comportamiento para que cuando el ratón pasa por encima de los links del menú, el puntero tiene forma de mano en vez de flecha.

Con las pseudoclases se pueden generar una gran cantidad de efectos, depende de tu imaginación. Ademas de la pseudoclase :hover, tenemos algunas más, por ejemplo:

• Pseudoclases de elementos en listas. Aplica los estilos a cada uno de los siguientes casos:
  • :first-child
  • :nt-child(x)
  • last-child
• Pseudoclases de enlaces:
  • :link (cuando no se ha visitado el link)
  • :visited (cuando se ha visitado)
• A cualquier elemento:
  • :hover (pasar por encima el ratón)
  • :active (pulsar elemento)
  • :focus (puntero dentro de elemento, por ejemplo en un campo de entrada de texto)

Para hacer transiciones, vamos a utilizar estas animaciones. La forma teórica de utilizarlas es asignar un valor por defecto para el objeto, un valor de animación (puede ser cualquiera de las que he comentado antes) y especificar un tiempo de transición de una a otra. Con estos datos especificados, la animación empezará de la forma especificada, se irá transformando progresivamente al estado de la animación y tardará el tiempo que se especifique en ello.

Estos valores se especifican como parámetros de la propiedad transition. Por ejemplo:

En este caso se especifica que la animación de width tarde 2 segundos en realizarse y la de height 4 esto quiere decir que cuando pasas el ratón por encima del objeto (que es una caja) se ampliará de tamaño, tardará 2 segundos en ampliarse a lo ancho y 4 a lo alto. Ver ejemplo.

Si en lugar de especificar el atributo que se va a modificar en la transición (width y height en este caso) se utiliza la palabra all, se harán transiciones para todas las propiedades especificadas en ambos casos (por defecto y pseudoclase).

Anterior parte del curso