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.
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 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.
Encabezados H3
Aquí damos un estilo a todos los elementos correspondientes a h3
- font-style: Pone el texto en cursiva.
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.
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.
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.
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.
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.