Este tutorial no convertirá mágicamente en un programador. Sí quieres ser bueno en eso, necesitaras meses o inclusos años de aprendizaje y práctica. sin embargo queremos mostrarte que programar o crear sitios web no es tan complicado como parece. Intentaremos explicarte en pequeñas partes tan bien como podamos, para que no te sientas intimidado por la tecnología.

¡Esperamos poder hacerte amar la tecnología tanto como nosotros lo hacemos!

* [Cómo funciona internet][2]

* [El editor de código][5]

* [Extendiendo Platinllas][20]

Nuestras recomendaciones están listadas abajo, pero siéntete libre de preguntarle a tu profesor cuales son sus preferencias - de esa forma será mas fácil obtener ayuda de ellos.

[Descárguelo aquí][1]

[Descárguelo aquí][2]

[Descárguelo aquí][4]

Hojas de estilo en cascada (CSS) es un lenguaje utilizado para describir el aspecto y el formato de un sitio web escrito en lenguaje de marcado (como HTML). Trátelo como maquillaje para nuestra página web ;).

Pero no queremos empezar de cero otra vez, ¿verdad? Una vez más, usamos algo que ya ha sido hecho por programadores y publicado en Internet de forma gratuita. Ya sabes, reinventar la rueda no es divertido.

Bootstrap es una de las infraestructuras digitales mas populares para hacer paginas web bonitas: http://getbootstrap.com/

Fue escrito por programadores que trabajaron para Twitter y ahora es desarrollado por voluntarios en todo el mundo.

Esto no añade los archivos a su proyecto. Sólo apunta a los archivos que existen en internet. Adelante, abra su sitio de Internet, actualice la página. ¡ Aquí está!

![Figura 14.1][1]

Otra cosa sobre la que ustedes aprenderán hoy se llama **archivos estáticos**. Las paginas estáticas son todo tu CSS e imágenes -- archivos que no son dinámicos entonces su contenido no depende de contexto de solicitud y sera el mismo para todos los usuarios.

CSS es un archivo estatico, así que para personalizar CSS necesitamos primero configurar archivos estáticos en Django. Solo tendrás que hacerlo una vez. Empecemos:

Abrir el archivo `mysite/settings.py`, desplácese hasta el fondo del asunto y agregue las siguientes líneas:

Vamos a crear un archivo CSS ahora, para agregar su propio estilo a tu página web. Crear un nuevo directorio llamado `css` dentro de tu directorio `static`. Crear un nuevo archivo llamado `blog.css` dentro de este directorio `css`. Listo?

No iremos muy profundamente en la personalización y aprendizaje sobre CSS aquí, porque es muy fácil y lo puedes aprender por tu cuenta después de este taller. Realmente recomendamos hacer este [curso de HTML y CSS en Codecademy][2] para aprender todo lo que necesitas saber sobre cómo hacer tus sitios web más bonitos con CSS.

Pero vamos a hacer al menos un poco. ¿Tal vez podríamos cambiar el color de nuestro titulo? Para entender los colores, las computadoras utilizan códigos especiales. Empiezan con `#` y siguen con 6 letras (A-F) y números (0-9). Usted puede encontrar los códigos de color por ejemplo aquí: http://www.colorpicker.com/. También puede utilizar [colores predefinidos][3], tales como `rojo` y `verde`.

En el archivo `static/css/blog.css` debe agregas el siguiente código:

`h1 un` es un Selector de CSS. Esto significa que estamos aplicando nuestros estilos a `cualquier elemento dentro de un elemento <code>h1`</code> (por ejemplo cuando tenemos en código algo como: `< h1 >< a href = "" > enlace < /a >< / h1 >`). En este caso, estamos diciendo que cambie su color a `#FCA205`, que es de color naranja. Por supuesto, usted puede poner su propio color aquí!

En un archivo CSS determinamos estilos para los elementos en el archivo HTML. Los elementos se identifican por el nombre del elemento (es decir, `a` `h1`, `body`), el atributo `class` o el atributo `id`. Class y id son nombres que le das al elemento tu mismo. Classes definen grupos de elementos y ids apuntan a elementos específicos. Por ejemplo, la siguiente etiqueta puede identificarse mediante CSS usando la etiqueta nombre `a`, la clase `external_link` o el id `link_to_wiki_page`:

Entonces, necesitamos decirle a nuestra plantilla HTML que hemos añadido CSS. Abra el archivo `blog/templates/blog/post_list.html` y agregue esta línea al principio:

Estamos cargando archivos estáticos aquí:). Luego, entre el `< head >` `y/< / head >`, después de los enlaces a los archivos CSS Bootstrap (el navegador lee los archivos en el orden que los das, así que nuestro archivo de código puede anular el código en los archivos de arranque), añade la siguiente línea:

![Figura 14.2][5]

Añade esto a tu CSS, guarda el archivo y ve cómo funciona!

![Figura 14.3][6]

Esta línea va a importar una letra llamada *Lobster* de Google Fonts (https://www.google.com/fonts).

![Figura 14.3][7]

Como se mencionó anteriormente, CSS tiene un concepto de clases, que básicamente permite nombrar una parte del código HTML y aplicarle estilos solo a esa parte, no afectara a los otros. Es super útil si tienes dos divs, pero están haciendo algo muy diferente (como tu header y tu post), así que no quieres que se vean de la misma.

Adelante y nombra algunas partes del código HTML. Agregar una clase llamada `page-header` a tu `div` que contiene el encabezado, así:

Y ahora agrega la clase `post` a tu `div` que contiene una entrada del blog.

Ahora agregaremos bloques de declaración a diferentes selectores. Selectores a partir de `.` se refieren a las clases. Hay muchos tutoriales y explicaciones sobre CSS en la Web para ayudarte el siguiente codigo. Por ahora, sólo copia y pega en tu archivo `mysite/static/css/blog.css`:

Luego envuelve el código HTML que muestra los mensajes con las declaraciones de clases. Cambiar esto:

![Figura 14.4][8]

Woohoo! Parece increíble, ¿verdad? El codigo que acabamos de pegar no es tan difícil de entender y tu debe ser capaz de entender la mayoría sólo con leerlo.

No tengas miedo de juguetear un poco con este CSS e intentar cambiar algunas cosas. Si rompes algo, no te preocupes, siempre puede deshacerlo!

De todos modos, recomendamos tomando este libre en línea [Codeacademy HTML & CSS course][2] como tarea que para aprendas todo lo que necesitas acerca de embellecer tus sitios web con CSS.

¡¿Listo para el próximo capítulo?! :)