Las clases

En nuestro archivo CSS podemos listar los elementos HTML que hemos usado y decir cómo queremos que se vean. Hay muchas formas de señalar los elementos que queremos, y Clases de HTML son una de esas formas.

Clases de HTML Son atributos que podemos agregar a los elementos. Una vez que un elemento tiene un nombre de clase, podemos usar esto en nuestro CSS.

El nombre de la clase elegida debe ser una palabra o palabras que describan el contenido de ese elemento.

Añadiendo una clase a nuestro podría verse algo como esto:

Las clases no son únicas, por lo que varios elementos diferentes pueden tener el mismo nombre de clase. Esto hace que agregar los mismos estilos a muchos elementos sea mucho más sencillo; Veremos esto en acción cuando lleguemos a las imágenes de nuestra tienda.!

Cómo se escribe CSS

La forma en que escribes el código se llama su sintaxis. Al igual que con HTML, CSS debe escribirse de la manera correcta para que funcione.

Vamos a saltar a nuestro archivo CSS y, solo para practicar, cambiar el color de fondo del encabezado a azul.

.encabezado primario color de fondo: azul; 

Así que nuestro CSS entiende que lo que estamos apuntando es un nombre de clase, necesitamos hacer algunas cosas:

• Necesitamos poner un punto . antes del nombre.
• Las instrucciones de estilo están contenidas entre corchetes., . 
• Lo que vamos a estilizar (color de fondo) es seguido inmediatamente por dos puntos : 
• Luego agregamos el valor (que es azul en este caso). 
• Cada estilo debe terminar con un punto y coma. ; 

Puede ser muy fácil olvidarlos.!

Guarde este archivo CSS y actualice el navegador; Si aún no lo tiene abierto, puede hacerlo haciendo doble clic en el archivo "index.html" en la "carpeta de tuts". Que lindo es eso?!

Importante! Ahora eliminemos este estilo ya que nuestro sitio no tendrá un encabezado azul!

Más comentarios

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

Un comentario de CSS está contenido dentro de estos símbolos: / * * /

/ * Este es un comentario en CSS * /

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

El cuerpo

Lo primero que podemos hacer en nuestro sitio web es cambiar el color de fondo a ese precioso amarillo claro. Hay algunos valores de color que se pueden escribir en CSS, como azul en el código de ejemplo anterior, y el navegador entiende. Para otros colores menos comunes tendremos que incluir los colores hexadecimal, o maleficio, numero en vez.

Todos los colores tienen un número hexadecimal para coincidir. Los navegadores no entienden muchos colores cuando están escritos, pero sí entienden muy bien los números hexadecimales. El número hexadecimal de nuestro color amarillo claro es # FAF8DA, y queremos aplicar eso a la , para llenar toda la página.

cuerpo fondo-color: # FAF8DA; 

Importante! No hay necesidad de un punto delante de cuerpo Aquí porque no es un nombre de clase. En cambio, hemos señalado el elemento del cuerpo de inmediato..

Si tiene curiosidad acerca del valor hexadecimal de otros colores, este sitio de color hexadecimal puede ser muy útil..

Fuentes

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

Todo lo que necesitamos saber en este punto es que tenemos que enlazar una fuente de Google a nuestro documento HTML. Una vez que estén vinculados, el navegador lo entenderá y podremos usarlo..

Aquí hay un vistazo al enlace que necesitamos agregar dentro del de nuestro HTML (el mismo lugar donde vinculamos nuestro documento CSS)

Luego podemos guardar esto y dirigirnos a nuestro documento CSS:

body font-family: 'Open Sans'; 

Esto establecerá la fuente para todo el texto en la página como Open Sans.

El encabezado

Dentro del encabezado cambiaremos el color y el tamaño del texto, así como el tamaño de la imagen de la ciudad..

Primero, debemos agregar las clases de HTML correctas a los elementos en el encabezado, para que podamos usarlas en nuestro CSS.

Dentro de la apertura

etiqueta vamos a añadir una clase de título principal y dentro de la agregaremos una clase de vista previa de la ciudad:

 
Bienvenido a Tuts + Town
  

En nuestro documento CSS, ahora podemos señalar estos elementos a través de los nombres de clase que establecemos y comenzar a diseñar..

Establecemos un tamaño de fuente bastante grande aquí 70px. px, o píxeles, Es como un punto en la pantalla. Este punto está lleno de color y se usa como una unidad de medida. La imagen de nuestra ciudad también es bastante grande, así que estableceremos eso en 650px amplio.

los color propiedad establece el color del texto, que aquí (# 205D76) Es un azul oscuro.

.encabezado principal font-size: 70px; color: # 205D76;  .town-preview width: 650px; 

Principal

Recuerda, dentro de main tenemos secciones más pequeñas que contienen una imagen y texto. Tendremos que establecer un tamaño en estas imágenes y diseñar los encabezados y listas con CSS.

Imágenes

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

Queremos agregar el mismo nombre de clase, edificio, a las tres imágenes de la tienda en nuestro HTML, y luego redimensionelas todas a la vez en nuestro CSS, así:

.edificio ancho: 200px; 

Encabezados

Nuestros tres encabezados más pequeños también pueden tener el mismo nombre de clase y lo usaremos para cambiar el color y tamaño de fuente del texto.

.encabezado de categoría color: # 205D76; tamaño de letra: 30px; 

Listas y enlaces

Después del encabezamiento dentro de cada sección tenemos nuestras listas de tiendas desordenadas, ¿las recuerdas? Además de cambiar el tamaño y el color de los enlaces aquí, también tendremos que cambiar el color de la lista puntos de bala.

Vamos a añadir una clase de lista de la tienda al