Estilos CSS Básicos

1. Sintaxis Básica

Un bloque CSS básico tiene la siguiente estructura:

selector {
    propiedad: valor;
}

Ejemplo: Cambiar el color de fondo de un elemento:

body {
    background-color: lightblue;
}

2. Tipos de Selectores

CSS ofrece varios tipos de selectores para apuntar a elementos específicos:

• Selector de etiqueta: Apunta a todas las etiquetas de un tipo (`body`, `p`, `h1`).
• Selector de clase: Usa `.` para seleccionar clases (`.mi-clase`).
• Selector de ID: Usa `#` para seleccionar un ID específico (`#mi-id`).

.mi-clase {
    color: red;
}

#mi-id {
    font-size: 20px;
}

3. Propiedades Comunes

Algunas de las propiedades CSS más utilizadas son:

• Color: `color` (texto) y `background-color` (fondo).
• Tipografía: `font-family`, `font-size`, `font-weight`.
• Márgenes y rellenos: `margin`, `padding`.
• Dimensiones: `width`, `height`.

h1 {
    color: #ff00c3;
    font-size: 36px;
    margin-bottom: 20px;
}

4. Uso de Clases y Estilos Inline

Aplica clases en HTML para estilizar elementos:

<div class="mi-clase">Texto estilizado</div>

También puedes usar estilos inline:

<p style="color: blue; font-size: 14px;">Texto azul</p>

Nota: Se recomienda usar clases para mantener un código limpio.

5. Conclusión

CSS es fundamental para crear páginas atractivas y bien diseñadas. Aprende a usarlo junto con HTML para llevar tus proyectos al siguiente nivel.

¡Experimenta con colores, fuentes y estilos para personalizar tu diseño!