Selectores y propiedades fundamentales

📚 Selectores y Propiedades Fundamentales en CSS

Bienvenido a esta lección donde aprenderás los cimientos de CSS: cómo seleccionar elementos HTML y cómo aplicarles estilos que transformen completamente tu página web. Estos conocimientos son esenciales para cualquier desarrollador web.

🔍 ¿Qué es un Selector?

Un selector es la parte de la regla CSS que indica a qué elemento(s) se aplicarán los estilos. Piensa en él como la «dirección» que le das a CSS para que sepa exactamente qué debe decorar.

📋 Tipos de Selectores Básicos

1. Selector de Etiqueta (Tipo)

El selector más simple: usa el nombre de la etiqueta HTML directamente. Afecta a todos los elementos de ese tipo en tu página.

/* Todos los párrafos serán azules */
p {
    color: blue;
}

/* Todos los títulos h1 serán rojos y centrados */
h1 {
    color: red;
    text-align: center;
}

/* Todos los enlaces serán verdes y sin subrayado */
a {
    color: green;
    text-decoration: none;
}

2. Selector de Clase

Las clases son quizás el selector más utilizado. Se definen con un punto (.) seguido del nombre de la clase. Puedes reutilizar una misma clase en múltiples elementos.

/* En HTML: <div class="tarjeta"> */
.tarjeta {
    background-color: #f5f5f5;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Elementos con múltiples clases */
.tarjeta.destaque {
    border: 2px solid gold;
    transform: scale(1.02);
}

3. Selector de ID

El selector de ID usa el símbolo (#) seguido del nombre del ID. A diferencia de las clases, un ID debe ser único en toda la página. Úsalo para elementos que aparecen una sola vez: cabecera, pie, modal, etc.

/* En HTML: <header id="encabezado-principal"> */
#encabezado-principal {
    background-color: #2c3e50;
    color: white;
    padding: 30px;
    text-align: center;
}

/* Error común: usar el mismo ID en varios elementos */
/* #menu { } ← Solo debería existir UNA vez */

4. Selector Universal

El asterisco (*) selecciona todos los elementos de la página. Es útil para crear un «reset» inicial o aplicar estilos base a todo el documento.

/* Reset básico que eliminan márgenes y paddings por defecto */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* También puedes combinarlo */
*.importante {
    font-weight: bold;
    color: #e74c3c;
}

🎯 Selectores Combinados

Selector Descendiente (espacio)

Selecciona elementos que están dentro de otros, sin importar cuántos niveles de profundidad los separen.

/* Todos los <span> que estén dentro de <article> */
article span {
    color: #3498db;
}

/* Incluso más específico */
article main p span.destacado {
    background-color: yellow;
}

Selector de Hijo (>)

Selecciona solo los elementos que son hijos directos, es decir, un nivel inmediatamente inferior.

/* Solo los <li> que son hijos directos de <ul> */
ul > li {
    list-style-type: square;
}

/* No afectaría a <li> dentro de un <ol> anidado */

Selector de Hermanos Adyacentes (+)

Selecciona un elemento que viene inmediatamente después de otro.

/* El primer párrafo después de un h2 */
h2 + p {
    font-style: italic;
    color: #555;
}

/* El input que viene justo después de una etiqueta label */
label + input {
    margin-left: 10px;
}

🛠️ Propiedades CSS Fundamentales

Ahora que conoces los selectores, veamos las propiedades más importantes que usarás diariamente.

📏 Modelo de Caja: padding, margin y border

Entender el modelo de caja es crucial. Cada elemento HTML se renderiza como una caja rectangular con cuatro capas:

1. Content (Contenido): El texto o elementos dentro del elemento.
2. Padding (Relleno): Espacio interno entre el contenido y el borde.
3. Border (Borde): La línea que rodea el padding y el contenido.
4. Margin (Margen): Espacio externo que separa el elemento de sus vecinos.

.caja-ejemplo {
    /* Padding: espacio interno */
    padding: 20px;
    
    /* Border: marco visible */
    border: 2px solid #3498db;
    
    /* Margin: espacio hacia afuera */
    margin: 15px;
    
    /* El resultado visual */
    background-color: #ecf0f1;
    border-radius: 8px;
}

🎨 Fuentes y Texto

.articulo {
    /* Tamaño de fuente con unidad relativa */
    font-size: 1.125rem; /* 18px aproximadamente */
    
    /* Familia tipográfica con alternativas */
    font-family: 'Segoe UI', Tahoma, sans-serif;
    
    /* Peso de la fuente */
    font-weight: 600;
    
    /* Altura de línea para legibilidad */
    line-height: 1.7;
    
    /* Transformación de texto */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Fuentes de Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');

body {
    font-family: 'Roboto', sans-serif;
}

🔗 Ejemplo Práctico Completo

Vamos a crear una tarjeta de perfil elegante combinando todo lo aprendido:

<!-- HTML -->
<article class="perfil">
    <img src="avatar.jpg" alt="Foto de María" class="perfil-imagen">
    <h2 class="perfil-nombre">María García</h2>
    <p class="perfil-titulo">Desarrolladora Frontend</p>
    <p class="perfil-bio">Especialista en crear experiencias web modernas y accesibles.</p>
    <button class="perfil-boton">Contactar</button>
</article>

/* CSS */
.perfil {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px;
    border-radius: 16px;
    text-align: center;
    max-width: 350px;
    margin: 20px auto;
    box-shadow: 0 10px 30px rgba(102,126,234,0.4);
}

.perfil-imagen {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 4px solid white;
    object-fit: cover;
}

.perfil-nombre {
    font-size: 1.5rem;
    margin: 15px 0 5px;
}

.perfil-titulo {
    font-size: 0.9rem;
    opacity: 0.9;
    margin-bottom: 20px;
}

.perfil-boton {
    background-color: white;
    color: #667eea;
    border: none;
    padding: 12px 30px;
    border-radius: 25px;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}

.perfil-boton:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

«CSS es el lenguaje que convierte documentos HTML planos en experiencias visuales memorables. Dominar los selectores y propiedades fundamentales es tu primer paso hacia el diseño web profesional.»

📝 Resumen de la Lección

• Selectores básicos: etiqueta, clase (.), ID (#), universal (*)
• Selectores combinados: descendiente (espacio), hijo (>), hermano (+)
• Modelo de caja: padding (interno), margin (externo), border (borde)
• Propiedades fundamentales: color, background, font-size, font-family, width, height
• Buenas prácticas: nombrar clases por función, usar unidades relativas, priorizar clases sobre IDs

En la siguiente lección profundizaremos en flexbox y grid, las herramientas de layout más poderosas de CSS moderno que te permitirán crear diseños complejos con facilidad.