Clase 11

Bienvenidos a la undécima clase de Wiki College.

En esta clase, os presentaremos el **lenguaje CSS, su funcionalidad y sus usos**, así como *dónde* usarlos. ¡Comencemos!

## ¿"CSS"?

**CSS**, *"Hojas de estilo en cascada"* en su traducción al español, es un lenguaje de estilos usado en el HTML de **cualquier sitio web**. Fandom no es la excepción, *ni mucho menos*. Toda wiki tiene un apartado para poder introducir **códigos CSS** para modificar el aspecto de **cualquier elemento HTML** del sitio web, *aunque* no se permite la modificación de **ciertos** elementos, figurativamente.

## ¿Cómo se usa CSS?

Abriendo un archivo HTML puedes encontrar, por así decirlo, el código fuente de un sitio web, y en este están los elementos HTML que incluye, y cada uno de estos *puede* tener atributos `id` y `class`. Sabiendo esto, puedes usar los nombres de esos atributos para poder **modificar el aspecto** del elemento.

### Selectores

En CSS, para modificar el aspecto de un elemento, se utilizan los **selectores**. Los selectores, como dice su nombre, seleccionan el elemento en cuestión y lo modifican. Su síntax es el siguiente:

```
[elemento, opcional][tipo de atributo][nombre de clase][:estado, opcional] {}

```

Con ese síntax puedes seleccionar un elemento concreto para su modificación. Te pondré un ejemplo: imagina que tienes un elemento HTML con el siguiente código:

```
<div class="EjemploDeClase"></div>

```

Como podemos ver, el elemento `div` contiene una clase, de nombre **EjemploDeClase**. Para modificar el aspecto del elemento, hay que seleccionarlo usando el nombre de esa clase.

```
div.EjemploDeClase {}

```

Digamos, que le queremos cambiar el color del fondo. CSS está lleno de un montón de propiedades que modifican el elemento como tal; su posición, color, organización, etc. Para cambiarle el color del fondo, es tan sencillo como poner una propiedad dentro de la clase:

```
div.EjemploDeClase {
  background-color: #000;
}

```

El `div` es opcional, debido a que el nombre de la clase puede darse en **cualquier otro** tipo de elementos, así que para especificar al código qué tipo de elemento quieres cambiar, se pone delante de la clase. Poniendo el código de arriba, modificarías el elemento que tenga una clase de nombre *EjemploDeClase*, su color de fondo pasaría a ser negro.

### ¿Qué pasa si quiero modificar un atributo ID?

Este caso es más curioso debido que los IDs solo se preven ser usados **una sola vez** dentro del código. El sintax no cambia mayormente, solo que en vez de usar un **punto** como en las clases:

```
div.EjemploDeClase {
  background-color: #000;
}

```

... Utilizas un hashtag (almohadilla, #) para especificar que es un ID:

```
div#EjemploDeId {
  background-color: #000;
}

```

Pero como se ha especificado antes, los IDs solo se pueden usar *una sola vez*, así que el código afectaría a **un único elemento HTML**.

## ¿Dónde van estos códigos en Fandom?

En Fandom, dentro de su sistema (llamado *MediaWiki*), hay páginas especiales que solo pueden modificar los administradores de la wiki. Si tú eres administrador, puedes modificar estas páginas. Para modificar el código CSS de tu wiki, debes acceder a MediaWiki:Common.css.

Para acceder a esta página, puedes acceder entrando al **panel de control de administrador**, el cual está en el menú de tres puntos en la barra superior de toda wiki donde tengas permisos. Cuando accedes a la página, está mayormente vacía, para que puedas agregar tus códigos CSS.

## ¿Dónde puedo conocer más propiedades para modificar?

Esta página contiene, en español, todas las propiedades CSS que puedes utilizar en un código CSS. Varias propiedades *no siempre* afectarán al tipo de elemento que estés usando o porque **no tienen** la propiedad que necesitan para poder modificarse correctamente.

## Estados de elemento

Los elementos HTML tienen estados que se activan dependiendo de la interacción del usuario. Cambian su apariencia según esta interacción. Interacciones como hacer click o poner el cursor del mouse encima. Estos estados se pueden agregar para que también cambien la apariencia del elemento.

Por ejemplo, el color de un link:

```
a {
  color: #a64dff;
}

```

Quisieramos hacer que cambie de color cuando el usuario pasa por encima del link usando el mouse. Para hacer esto, se utiliza el evento `:hover`, que se activa cuando ocurre lo dicho:

```
a:hover {
  color: #c180ff;
}

```

Así, el link de color **#a64dff** pasaría siendo **#c180ff** cuando el evento `:hover` es disparado. El color vuelve a su estado normal cuando el usuario deja de mantener el mouse encima del elemento.

¡Y esa sería la clase de hoy! Si tienes alguna duda, puedes usar Discusiones o comentar abajo tu duda, o incluso puedes explorar la Referencia de CSS en el sitio web de Mozilla. ¡Nos vemos en la siguiente clase!