Aprendiendo CSS

CSS (Cascading Style Sheets o Hojas de Estilo en Cascada) es el lenguaje utilizado para describir la presentación y el diseño de las páginas web. Permite separar el contenido (HTML) de la apariencia visual, facilitando la creación de sitios web atractivos, accesibles y fáciles de mantener.

• ¿Qué hace CSS? Define colores, fuentes, márgenes, posiciones, animaciones y mucho más.
• ¿Por qué usarlo? Permite reutilizar estilos, mejorar la experiencia de usuario y adaptar el diseño a diferentes dispositivos.

¿Cómo se aplica CSS?

1. En línea:

   <p style="color: blue;">Texto azul</p>

2. En la cabecera (interno):

   <style>
   p { color: blue; }
   </style>

3. En archivo externo:

   <link rel="stylesheet" href="estilos.css">

Sintaxis básica

selector {
    propiedad: valor;
}

Por ejemplo, para cambiar el color de todos los títulos:

h1 {
    color: #1c2566;
    font-size: 2.5em;
}

Ventajas de CSS

• Separación de contenido y presentación
• Facilita el mantenimiento y la escalabilidad
• Permite crear diseños responsivos y modernos
• Reduce la duplicación de código

En CSS, clases y identificadores (IDs) son selectores que permiten aplicar estilos a elementos HTML específicos.

Clases (.clase)

• Se definen con un punto (.) seguido del nombre.
• Pueden ser usadas en varios elementos.
• Ejemplo de uso:

<p class="destacado">Este texto es importante</p>

.destacado {
    color: #007bff;
    font-weight: bold;
}

Identificadores (#id)

• Se definen con una almohadilla (#) seguida del nombre.
• Solo deben usarse una vez por página.
• Ejemplo de uso:

<div id="banner">Bienvenido</div>

#banner {
    background-color: #f2f2f2;
    padding: 20px;
    text-align: center;
}

Diferencias clave

• Clases: reutilizables, para grupos de elementos.
• IDs: únicos, para un solo elemento.

Modelo de Caja

.elemento {
    margin: 20px; /* Todos los lados */
    margin: 10px 20px; /* Vertical | Horizontal */
    margin-top: 15px;
}

.elemento {
    border: 2px solid #1c2566;
    border-radius: 8px; /* Esquinas redondeadas */
}

.elemento {
    padding: 15px;
    padding-left: 30px;
}

Flexbox y Grid

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.contenedor {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 15px;
}

¿Cuándo usar cada uno?

• Flexbox: Diseños unidimensionales (filas o columnas), alineación precisa, componentes pequeños
• Grid: Diseños bidimensionales complejos, layouts completos de página, estructuras regulares

CSS Flex Layout

Transiciones CSS

/* Transición básica */
.elemento {
    transition: propiedad duración timing-function delay;
}

/* Ejemplo concreto */
.boton {
    background-color: #4a6bff;
    transition: background-color 0.3s ease, transform 0.2s;
}

.boton:hover {
    background-color: #1c2566;
    transform: scale(1.05);
}

Propiedades animables

• Colores (color, background-color, border-color)
• Tamaños (width, height, font-size)
• Posición (margin, padding, top, left)
• Transformaciones (transform, opacity)

Animaciones con @keyframes

/* Definición de la animación */
@keyframes nombre-animacion {
    0% { /* Estilos iniciales */ }
    50% { /* Estilos intermedios */ }
    100% { /* Estilos finales */ }
}

/* Aplicación a un elemento */
.elemento {
    animation: nombre-animacion 2s infinite alternate;
}

Los selectores en CSS permiten elegir a qué elementos HTML se aplicarán los estilos. Son la base para personalizar la apariencia de tu sitio web.

Tipos principales de selectores

• Selector de etiqueta: Aplica estilos a todos los elementos de un tipo.
  p { color: #333; }
• Selector de clase: Aplica estilos a los elementos con una clase específica.
  .destacado { background: #ffeeba; }
• Selector de ID: Aplica estilos a un elemento con un ID único.
  #principal { padding: 20px; }
• Selector universal: Selecciona todos los elementos.
  * { box-sizing: border-box; }
• Selector de atributo: Selecciona elementos según un atributo.
  input[type="text"] { border: 1px solid #007bff; }

Selectores combinados y avanzados

• Selector descendiente: nav ul li { ... } (selecciona li dentro de ul dentro de nav)
• Selector hijo directo: div > p { ... } (solo p hijos directos de div)
• Selector de hermano adyacente: h2 + p { ... } (primer p después de h2)
• Selector de hermanos generales: h2 ~ p { ... } (todos los p después de h2)
• Pseudoclases: a:hover { color: red; } (cuando el mouse pasa sobre un enlace)
• Pseudoelementos: p::first-line { font-weight: bold; } (primera línea de un párrafo)

Ejemplo práctico

<ul>
              <li class="importante">Elemento 1</li>
              <li>Elemento 2</li>
            </ul>

            ul li.importante {
              color: #e74c3c;
              font-weight: bold;
            }
            

Consejo: Usa selectores específicos para evitar conflictos y mantener tu CSS organizado.

Media Queries permiten adaptar el diseño de tu sitio web a diferentes tamaños de pantalla y dispositivos, haciendo posible el diseño responsivo.

¿Cómo funcionan?

Una media query aplica estilos CSS solo si se cumple una condición sobre el dispositivo, como el ancho de la pantalla.

@media (max-width: 600px) {
              body {
                background-color: #f0f8ff;
              }
              h1 {
                font-size: 1.5em;
              }
            }

• max-width: Aplica estilos cuando la pantalla es igual o menor a 600px.
• min-width: Aplica estilos cuando la pantalla es igual o mayor a cierto tamaño.

Ejemplo práctico

/* Estilos generales */
            nav ul {
              display: flex;
              gap: 20px;
            }

            /* Para pantallas pequeñas */
            @media (max-width: 768px) {
              nav ul {
                flex-direction: column;
                gap: 10px;
              }
            }

Otras condiciones útiles

• orientation: portrait (modo vertical)
• orientation: landscape (modo horizontal)
• min-height y max-height
• print (para impresión)

Consejos

• Empieza diseñando para móviles (mobile first) y usa min-width para ampliar.
• Utiliza unidades relativas (em, rem, %) para mayor flexibilidad.
• Prueba tu sitio en diferentes dispositivos y resoluciones.

Más sobre Media Queries en MDN

Responsive Design o diseño web adaptable es una técnica que permite que las páginas web se vean y funcionen correctamente en cualquier dispositivo, ya sea un computador, tablet o teléfono móvil. El objetivo es que el contenido se adapte automáticamente al tamaño de la pantalla del usuario.

¿Por qué es importante?

• Mejora la experiencia del usuario en todos los dispositivos.
• Evita la necesidad de hacer zoom o desplazarse horizontalmente.
• Es recomendado por Google para el SEO.

¿Cómo se logra?

• Usando media queries para aplicar estilos según el ancho de la pantalla.
• Utilizando unidades flexibles como %, em, rem y vw/vh.
• Diseñando layouts fluidos con Flexbox o CSS Grid.
• Imágenes y videos adaptables con max-width: 100%;.

Ejemplo básico de Responsive

<style>
            .container {
              width: 90%;
              max-width: 800px;
              margin: auto;
            }
            img {
              max-width: 100%;
              height: auto;
            }
            @media (max-width: 600px) {
              .container {
                width: 100%;
                padding: 10px;
              }
              h1 {
                font-size: 1.2em;
              }
            }
            </style>

            <div class="container">
              <h1>¡Este sitio es responsive!</h1>
              <img src="https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=600&q=80" alt="Ejemplo Responsive">
              <p>Prueba cambiar el tamaño de la ventana para ver el efecto.</p>
            </div>
            

Más sobre Responsive Design en MDN

Consejos rápidos

• Empieza diseñando para móviles (mobile first).
• Evita valores fijos de ancho y alto.
• Prueba tu web en diferentes dispositivos y resoluciones.