El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
HOME Mis cursos Finalizados
◄ Anterior
◄

Propiedades Básicas de CSS

Siguiente ►
►

En esta sección, aprenderás sobre las propiedades básicas de CSS que te permitirán comenzar a estilizar tus páginas web. Estas propiedades son fundamentales y se utilizan con frecuencia en el desarrollo web. Asegúrate de comprender bien cada una de ellas, ya que serán la base para temas más avanzados.

  1. Propiedades de Fondo

1.1 background-color

La propiedad background-color se utiliza para establecer el color de fondo de un elemento.

Sintaxis:

selector {
  background-color: color;
}

Ejemplo:

body {
  background-color: lightblue;
}

1.2 background-image

La propiedad background-image se utiliza para establecer una imagen de fondo para un elemento.

Sintaxis:

selector {
  background-image: url('ruta/de/la/imagen.jpg');
}

Ejemplo:

div {
  background-image: url('background.jpg');
}

1.3 background-repeat

La propiedad background-repeat define cómo se repite la imagen de fondo.

Valores comunes:

  • repeat: Repite la imagen en ambas direcciones (horizontal y vertical).
  • no-repeat: No repite la imagen.
  • repeat-x: Repite la imagen solo horizontalmente.
  • repeat-y: Repite la imagen solo verticalmente.

Ejemplo:

div {
  background-image: url('background.jpg');
  background-repeat: no-repeat;
}

1.4 background-position

La propiedad background-position especifica la posición inicial de la imagen de fondo.

Sintaxis:

selector {
  background-position: x y;
}

Ejemplo:

div {
  background-image: url('background.jpg');
  background-position: center;
}

  1. Propiedades de Bordes

2.1 border

La propiedad border es una forma abreviada de establecer el ancho, estilo y color del borde de un elemento.

Sintaxis:

selector {
  border: ancho estilo color;
}

Ejemplo:

p {
  border: 2px solid black;
}

2.2 border-radius

La propiedad border-radius se utiliza para redondear las esquinas de un borde.

Sintaxis:

selector {
  border-radius: valor;
}

Ejemplo:

div {
  border: 2px solid black;
  border-radius: 10px;
}

  1. Propiedades de Espaciado

3.1 margin

La propiedad margin se utiliza para crear espacio alrededor de los elementos, fuera de los bordes definidos.

Sintaxis:

selector {
  margin: valor;
}

Ejemplo:

h1 {
  margin: 20px;
}

3.2 padding

La propiedad padding se utiliza para crear espacio dentro de un elemento, entre su contenido y su borde.

Sintaxis:

selector {
  padding: valor;
}

Ejemplo:

div {
  padding: 15px;
}

  1. Propiedades de Dimensión

4.1 width y height

Las propiedades width y height se utilizan para establecer el ancho y la altura de un elemento.

Sintaxis:

selector {
  width: valor;
  height: valor;
}

Ejemplo:

img {
  width: 100px;
  height: 100px;
}

Ejercicio Práctico

Ejercicio 1: Estilizando un Div

Crea un archivo HTML con un div y aplica las siguientes propiedades CSS:

  1. Establece un color de fondo.
  2. Añade una imagen de fondo que no se repita.
  3. Redondea las esquinas del div.
  4. Añade un borde sólido de 2px de ancho y color negro.
  5. Añade un margen de 20px alrededor del div.
  6. Añade un relleno de 15px dentro del div.
  7. Establece el ancho y la altura del div a 200px.

HTML:

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Propiedades Básicas de CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="box">Contenido del div</div>
</body>
</html>

CSS:

.box {
  background-color: lightblue;
  background-image: url('background.jpg');
  background-repeat: no-repeat;
  border: 2px solid black;
  border-radius: 10px;
  margin: 20px;
  padding: 15px;
  width: 200px;
  height: 200px;
}

Solución del Ejercicio

El código CSS anterior aplica todas las propiedades solicitadas al div con la clase box. Asegúrate de tener una imagen llamada background.jpg en el mismo directorio que tu archivo CSS para ver el efecto completo.

Conclusión

En esta sección, has aprendido sobre las propiedades básicas de CSS que son esenciales para estilizar elementos en una página web. Estas propiedades incluyen la manipulación de fondos, bordes, espaciado y dimensiones. Asegúrate de practicar estos conceptos para familiarizarte con ellos, ya que son fundamentales para cualquier proyecto de desarrollo web.

En la próxima sección, profundizaremos en la estilización de texto y fuentes, lo que te permitirá mejorar aún más la apariencia de tus páginas web.

◄ Anterior
◄
Siguiente ►
►

Maestría en CSS: De Principiante a Avanzado

Módulo 1: Introducción a CSS

Módulo 2: Estilización de Texto y Fuentes

Módulo 3: Modelo de Caja y Diseño

Módulo 4: Posicionamiento y Flotación

Módulo 5: Flexbox

Módulo 6: CSS Grid

Módulo 7: Técnicas Avanzadas de CSS

Módulo 8: Diseño Responsivo

Módulo 9: Preprocesadores y Frameworks

Módulo 10: Mejores Prácticas y Optimización

Módulo 11: Proyecto: Construyendo un Sitio Web Responsivo

El Proyecto | Sobre nosotros | Contribuir | Donaciones | Licencia
© Copyright 2024. Todos los derechos reservados