Advertisement
  1. Web Design
  2. Kids

Diseño Web para Niños: CSS

Scroll to top
Read Time: 8 min
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Content
Web Design for Kids: CSS Layout

Spanish (Español) translation by Javier Salesi (you can also view the original English article)

Bienvenidos a la quinta lección de nuestra serie Diseño Web para Niños, todo sobre CSS.

Hemos trabajado muy duro en nuestro contenido HTML, así que ¿ahora es momento de hacerlo bonito! Añadiremos cosas a nuestra página HTML, así como también comenzar un nuevo archivo: un documento CSS.

Observa el sitio web completado que estamos creando. Los archivos para ésta lección pueden descargarse aquí y no olvides formular cualquier pregunta en la sección de comentarios en la parte inferior de la página.

¿Qué es exactamente CSS?

Antes que iniciemos a codificar asegurémonos primero que entendemos que es CSS. CSS significa Hojas de Estilo en Cascada y es un lenguaje que nos ayuda a cambiar la forma en que se ve nuestra página HTML.

no css vs css

En la imagen de arriba, el navegador de la izquierda muestra un sitio web sin CSS, sin aplicación de estilos, mientras que el sitio web de la derecha tiene aplicación de estilos. La aplicación de estilos ha sido escrita dentro de un archivo CSS-¡mucho mejor!

CSS es escrito en un archivo separado usando nuestro editor de texto. Nuestro documento HTML fue guardado con una extensión .html, pero nuestro documento CSS será guardado con una extensión .css.

Crear un archivo CSS

Necesitaremos iniciar un flamante documento en nuestro editor de texto y guardar éste como "tutstown.css" in "tutsfolder"; junto a "index.html" y el directorio "images" (imágenes).

HTML & CSS

Para que nuestro documento CSS aplique estilos a nuestro documento HTML necesitamos enlazarlos. Éste se hace a través del elemento <link> dentro del elemento head en la parte superior de nuestro documento HTML.

Agregaremos éste enlace directamente debajo de nuestro título:

Hay unos cuantos atributos importantes para incluir dentro de éste elemento de auto-cierre, el primero es type. El atributo type le indica al navegador que tipo de contenido estamos enlazando. En éste caso es un archivo text/css.

El segundo atributo que vemos aquí es rel, que le indica al navegador que relación hay entre el HTML y el documento enlazado (nuestro CSS). El documento CSS es una hoja de estilos para nuestro HTML, eso será lo que incluiremos aquí.

Finalmente, tenemos el href que podrías recordar de nuestros elementos <a>. Apunta a algún otro lado. En éste caso le está indicando al navegador donde encontrar el archivo CSS al que lo hemos enlazado.

Si todo está enlazado correctamente, la página se verá diferente cuando la refrescas en el navegador:

Clases

En nuestro archivo CSS podemos listar los elementos HTML que hemos usado e indicamos cómo queremos que se vean. Hay muchas formas de apuntar a elementos que queremos, y las clases HML son una de ésas formas.

Las clases HTML son atributos que podemos agregar a elementos. Una vez que un elemento tiene un nombre de clase, podemos usarla en nuestro CSS.

El nombre de clase elegido debería ser una palabra o palabras que describen el contenido en ese elemento.

Agregar una clase a nuestro <header> podría verse así:

Las clases no son únicas, así que diferentes elementos pueden tener el mismo nombre de clase. Ésto hace mucho más sencillo el agregar los mismos estilos a muchos elementos; ¡veremos ésto en acción cuando tengamos nuestras imágenes de tienda!

Como se escribe CSS

La manera en que escribes código se llama sintaxis. Al igual que en HTML, CSS necesita ser escrito de la manera correcta para que funcione.

Vayamos a nuestro archivo CSS y, solo para practicar, cambia el background-color (color de fondo) del header a blue (azul).

¡Hay muchas cosas por hacer correctamente!

Para que nuestro CSS entienda que a lo que estamos apuntando es un nombre de clase, necesitamos hacer unas cuantas cosas:

  • Necesitamos poner un punto . antes del nombre.
  • Las instrucciones de estilo están contenidas dentro de llaves, {}.
  • El estilo que estaremos aplicando (background-color) (color de fondo) es inmediatamente seguido por dos puntos:
  • Luego agregamos el valor (que es blue en éste caso).
  • Cada estilo debe finalizar con un punto y coma ;

¡Puede ser muy fácil olvidarlos!

Guarda éste archivo CSS y refresca el navegador, si no lo tienes abierto, puedes hacerlo al dar doble click en el archivo"index.html" en el "tutsfolder". ¡Qué ordenado es eso!

¡Importante! Ahora borremos éste estilo pues nuestro sitio no tiene un header azul!

Más comentarios

CSS también nos permite incluir comentarios en nuestro archivo que el navegador ignorará, pero se verán un poco diferente de nuestros comentarios HTML.

Un comentario en CSS es contenido dentro de éstos símbolos: /* */

El documento CSS en los archivos de ejercicios contendrán algunos comentarios útiles para explicar más cosas.

El Body (Cuerpo)

El primer aspecto de estilo real que podemos hacer en nuestro sitio web es cambiar el background-color a un encantador amarillo pastel. Hay algunos valores de color que pueden escribirse en CSS, como blue en el código de ejemplo arriba, y el navegador entiende. Para otros colores menos comunes necesitaremos en cambio incluir el número hexadecimal, o hex del color.

Todos los colores tienen un número hexadecimal correspondiente. Los navegadores no entienden muchos colores cuando se escriben, pero si entienden números hexadecimales muy bien. El número hexadecimal para nuestro color amarillo pastel es #FAF8DA, y queremos aplicarlo al <body>, para que cubra toda la página.

¡Importante! No hay necesidad de poner un punto frente a body aquí porque no es un nombre de clase. En cambio, hemos apuntado al elemento cuerpo directamente.

Si eres curioso sobre el valor hexadecimal de otros colores éste sitio sobre los hexadecimales de los colores puede serte útil.

Fuentes

También podemos establecer la fuente (el estilo de las letras) para nuestro sitio web usando body en nuestro CSS.

Todo lo que necesitamos saber en éste punto es que tenemos que enlazar con la etiqueta link  una fuente de Google a nuestro documento HTML. Una vez que está enlazada el navegador entenderá y podemos usarla.

Así se ve el enlace que necesitamos agregar dentro del <head> de nuestro HTML (¡el mismo lugar que enlazamos nuestro documento CSS!)

Entonces podemos guardar ésto y dirigirnos a nuestro documento CSS:

Ésto establecerá la fuente para todo el texto de la página como Open Sans.

El Header

En el header cambiaremos el color y tamaño del texto así como el tamaño de la imagen de la ciudad.

Primero, necesitamos agregar las clases HTML correctas a los elementos en el header, para que podamos usarlas en nuestro CSS.

Dentro de la etiqueta de apertura <h1> agreguemos una clase de main-heading y dentro de <img> agregaremos una clase de town-preview:

En nuestro documento CSS ahora podemos apuntar a éstos elementos a través de nombres de clases que establecimos  y comenzamos a aplicar estilos.

Establecemos un tamaño de fuente grande, de 70px. px, o pixeles, es como un punto en la pantalla. Éste punto está lleno de color y es usado como una unidad de medida. La imagen de nuestra ciudad también es muy grande, así que estableceremos eso en una anchura de 650px.

La propiedad color establece el color del texto, que aquí (#205D76) es azul oscuro.

Main (Principal)

Recuerda, dentro de main tenemos secciones más pequeñas que contienen una imagen y texto. Necesitaremos establecer un tamaño en éstas imágenes y aplicar estilo a los encabezados y listas con CSS.

Imágenes

Lo primero que necesitamos hacer es establecer el tamaño de las imágenes del edificio. Para establecer los tamaños de las imágenes podemos usar el mismo nombre de clase para varios elementos.

Vamos a querer añadir el mismo nombre de clase, building, a las tres imágenes guardadas en nuestro HTML, y luego redimensionarlas a la vez en nuestro CSS, así:

Headings (Encabezados)

Nuestros tres encabezados más pequeños pueden tambien tener el mismo nombre de clase y usaremos ese para cambiar el color y el font-size (tamaño de la fuente) del texto.

Listas y Enlaces

Después del encabezado dentro de cada sección tenemos nuestras listas desordenadas-¿las recuerdas? Además de cambiar el tamaño y color de los enlaces aquí, también necesitaremos cambiar el color de las viñetas de la lista.

Agreguemos una clase de store-list a <ul> y store-link a <a> en nuestro documento HTML y luego guardarlo.

Podrías notar, cuando observas nuestro sitio web en el navegador, que no hay mucho espacio entre los elementos de la lista, viéndose amontonados. Hablaremos sobre el espacio y como añadirlo aquí en el tutorial de maquetado más adelante en la serie.

Footer (Pie de Página)

Después que añadimos una clase de primary-footer a <footer> y created-by al elemento <p> dentro de éste pie podemos declarar el background-color asi como el color y el font-size del texto.

Conclusión

En ésta lección aprendimos todo sobre cómo enlazar un HTML y un documento CSS y luego agregar bonitos estilos a nuestros elementos por medio de clases. En éste momento lo que vemos en nuestro navegador aún no coincidirá con al vista previa del sitio web completamente diseñado que tenemos como referencia, pero ¡mira la diferencia que pueden hacer los valores de color y de tamaño! Solo va a mejorar.

Posteriormente estaremos migrando nuestro contenido a su lugar en la pantalla usando algunas técnicas inteligentes de maquetado en CSS.

¡Nos vemos por la ciudad!

¡Sé el primero en conocer las nuevas traducciones–sigue @tutsplus_es en Twitter!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.