Ejemplos de aplicación

Ejemplos

body

  • El body define los estilos generales como fuente, color y fondo.
  • Corresponde a toda la página en general.
  • font-family: Cambia el estilo de la fuente a Arial o una fuente sin serif (sans-serif).
  • line-height: Define el espacio entre líneas para facilitar la lectura.
  • background-color: Establece el color de fondo para toda la página.
  • color: Cambia el color predeterminado del texto.

body

Encabezados H1

Aquí damos estilo a todos los elementos de encabezados que pertenezcan a h1 

1. text-align
Qué hace: Alinea el contenido del texto dentro de un contenedor.
Valores comunes:left: Alinea el texto a la izquierda (valor predeterminado para idiomas como español o inglés).
right: Alinea el texto a la derecha.
center: Centra el texto horizontalmente.
justify: Ajusta el texto para que ocupe todo el ancho del contenedor, agregando espacio entre palabras.

2. margin-top
Qué hace: Añade un espacio vacío (margen) en la parte superior de un elemento.
Valores comunes:Unidades absolutas como px (píxeles) o relativas como % o em.
auto: Deja que el navegador ajuste automáticamente el margen.

3. color
Qué hace: Cambia el color del texto de un elemento.
Valores comunes:Palabras clave: red, blue, green, etc.
Código hexadecimal: #ff0000 (rojo), #00ff00 (verde).
RGB: rgb(255, 0, 0) (rojo).

Encabezados

Encabezados H2

Aquí damos un estilo a todos los elementos correspondientes a h2

  • border-bottom: Agrega una línea verde debajo del subtítulo.
  • padding-bottom: Añade espacio entre el texto y el borde.
  • margin: Establece márgenes superior, inferior e interlineado.

h2

Encabezados H3

Aquí damos un estilo a todos los elementos correspondientes a h3

  • font-style: Pone el texto en cursiva.

h3

Nav

Añadimos un estilo para el nav general, además también para los links

Nav

  • background-color: Da un fondo verde a la barra de navegación.
  • text-align: Centra los elementos del menú.
  • padding: Añade espacio interno para dar altura a la barra.

Nav a  

  • color: Establece el color blanco para los enlaces.
  • text-decoration: Elimina el subrayado de los enlaces.
  • margin: Añade espacio entre los enlaces.
  • font-weight: Hace los enlaces más gruesos.
  • hover: Subraya los enlaces cuando el cursor pasa sobre ellos.

nav

Párrafos y listas

Estilos de los párrafos y listas 

Párrafos

  • margin: Define el espacio entre párrafos.
  • font-size: Aumenta el tamaño del texto para facilitar la lectura.

Listas  

  • list-style-type: Cambia los marcadores de lista a cuadrados.
  • padding-left: Añade espacio a la izquierda de la lista.
  • margin: Añade espacio entre los elementos de la lista.
  • color: Cambia el color de los elementos de la lista.

parrafos

Table

Estilo para la tabla 

  • width: Ajusta la tabla para ocupar el ancho completo del contenedor.
  • border-collapse: Elimina los espacios entre bordes de las celdas.
  • margin: Añade espacio encima y debajo de la tabla.
  • border: Crea bordes finos alrededor de las celdas.
  • padding: Añade espacio interno dentro de las celdas.
  • text-align: Alinea el texto a la izquierda.
  • background-color: Da un fondo verde a los encabezados de la tabla.
  • color: Cambia el texto de los encabezados a blanco.
  • nth-child(even): Estiliza las filas pares con un color de fondo claro.

tablas

Formulario

Estilizar el formulario 

  • width: Hace que el campo de texto ocupe todo el ancho del contenedor.
  • padding: Añade espacio interno para un diseño más limpio.
  • border-radius: Redondea las esquinas del campo de texto.
  • background-color: Cambia el fondo del botón a verde.
  • cursor: Cambia el cursor a una mano al pasar sobre el botón.
  • hover: Cambia el color del botón al pasar el cursor.

formulario

Footer

Estilos para el footer de nuestra página 

  • position: fixed: Fija el pie de página en la parte inferior de la ventana.
  • width: Asegura que el pie de página ocupe todo el ancho.

footer

Obra publicada con Licencia Creative Commons Reconocimiento Compartir igual 4.0

Creado con eXeLearning (Ventana nueva)