Clase 14

¡Hola! Así que ya has creado la wiki y ahora quieres personalizarla, ¿no? Bueno, aquí te enseñamos cómo hacerlo.

## Antes de empezar

* Procura tener un conocimiento básico (muy básico) de HTML.
* Si vas a diseñar mucho, recomiendo instalar extensiones como Stylus o Live CSS editor. Si no puedes instalar extensiones, puedes optar por el script PortableCSSPad.
* Piensa a lo simple.

## Diseñador de temas

Antes de ponernos técnicos, debemos recordar que Fandom ya proporciona una herramienta de personalización, llamada *Diseñador de Temas*. En ella, puedes cambiar, entre otras cosas, el logo de la comunidad, el *favicon*, el fondo, etc. El usuario DarkGames tiene una guía sobre cómo usarlo, y te recomiendo que le eches un vistazo antes de seguir leyendo.

## ¿Qué es CSS?

**CSS** (acrónimo para ***C**ascading **S**tyle **S**heets*, hojas de estilos en cascada) es un lenguaje estilístico que se usa en páginas web para determinar **cómo** se ve una página. Suele ir acompañado de HTML (acrónimo para ***H**yper**T**ext **M**arkup **L**anguage*).

Si comparamos una página web con una casa, el código HTML serían los ladrillos, mientras que el CSS sería la pintura, los murales, etc.

## Sintaxis básico

```
/\* Esto es un comentario, el cual será ignorado. \*/

/\* Esto es un comentario muy largo, que también será ignorado

CSS es fácil de aprender. En serio. No tienes que saber sobre programación
o nada por el estilo.
\*/
.class { /\* Esto es un selector, que selecciona un elemento en la página \*/
 color: red; /\* Esto es una declaración, formado por una propiedad (color) y un valor (red). \*/
}

```

Aquí encima acabas de ver un ejemplo de código CSS. Seguramente no has entendido nada, así que vayamos por partes...

## ¿Cómo se usa?

Como se ha dicho anteriormente, el CSS suele ir acompañado de código HTML, que suele ser un conglomerado de elementos con clases e *ID*s, además de otros atributos sobre los cuales no profundaremos.

```
<div class="myBox">
    <div id="wiki-portada-titulo">
        ¡Bienvenido/a a la wiki!
    </div>
    <div id="wiki-portada-descripcion">
        Somos una pequeña comunidad de usuarios que nos encargamos de documentar sobre [tema]
    </div>
</div>

```

En este caso, tenemos una caja exterior con la clase `myBox`, y dos cajas internas con los IDs `wiki-portada-titulo` y `wiki-portada-descripcion`.

### Clases de selectores

#### Selector de tipo

Selecciona a todos los elementos que coinciden con el nombre del elemento especificado. Por ejemplo:

```
div {
 background:black;
}

```
 seleccionará todos los elementos `<div></div>`

#### Selector de clase

Selecciona a todos los elementos que tengan la clase (`class=""`) especificada. Por ejemplo:

```
.mi-clase {
 background:black;
}

```
 seleccionará todos los elementos `<div class="mi-clase"></div>`

*¡Recuerda! Una clase puede tener guiones (`-` o guiones bajos (`_`), pero no puede contener espacios.*
#### Selector de clase

Selecciona al elemento que tenga el ID (`id=""`) especificado. Por ejemplo:

```
#mi-id {
 background:black;
}

```
 seleccionará al elemento `<div id="mi-id"></div>`

*Los ID no se pueden repetir en una página. En otras palabras, solo puede haber un elemento con (por ejemplo) el ID `id="mi-id"`, aunque puedes usar más elementos con IDs diferentes.*