Introducción a CSS

¿Qué es CSS y por qué es importante?

CSS define la apariencia de una página web.

Permite separar el contenido del diseño.

Facilita la reutilización y mantenimiento del código.

Tipos de CSS

• Inline: Se aplica directamente en la etiqueta con style.

<p style="color: red;">Texto</p>

• Interno: Se define dentro de <style> en el head.

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

• Externo: Se usa un archivo .css enlazado con <link>.

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

Clases e ID en CSS

Se usan para aplicar estilos a elementos específicos.

Ejemplos

.button { background-color: blue; }

#header { font-size: 24px; }

Pseudo Clases

• :hover: Se activa al pasar el cursor sobre el elemento.
• :active: Se activa al hacer clic en el elemento.

Ejemplos

.button:hover { background-color: red; }

input:focus { border: 1px solid blue; }

Combinadores

Ejemplos

div p { color: red; }

div > p { color: blue; }

h1 + p { font-size: 16px; }

h1 ~ p { font-size: 16px; }

Box Model

Todos los elementos en CSS son cajas.

Tipos de display

• block: Ocupa todo el ancho disponible y se muestra en una nueva línea.
• inline: Solo ocupa el ancho necesario.

Tipos de posición

• static: Posición por defecto.
• relative: Se mueve respecto a su posición original.

• absolute: Se posiciona en relación a su ancestro posicionado.
• fixed: Permanece fijo en pantalla.
• sticky: Se comporta como relative hasta que se hace sticky.

Unidades en CSS

Absolutas

• cm: Centímetros.
• px: Píxeles. (1px = 2.54cm)
• in: Pulgadas. (1in = 2.54cm)
• pt: Puntos. (1pt = 1/72in)

h1 { font-size: 24px; } 

Relativas

• %: Porcentaje.
• em: Tamaño de fuente.
• rem: Tamaño de fuente del root.
• vw/vh: Viewport width/height dimensions

h1 { font-size: 2em; }

Colores y Gradientes

• Colores en nombres, HEX, RGB y HSL.

                
color: red;
color: #ff0000;
color: rgb(255, 0, 0);
color: hsl(0, 100%, 50%);
                
            

• Gradientes lineales y radiales.
• Uso de transparencia con rgba().

                
background: linear-gradient(to right, red, blue);
background: radial-gradient(circle, red, blue);
background: rgba(0, 0, 0, 0.5);
                
            

Fuentes y Tipografía

• Uso de fuentes seguras.
• Google Fonts.

<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">

font-family: Arial, sans-serif;

Ejemplos

font-family: Arial, sans-serif;

font-size: 16px;

font-weight: bold;

font-style: italic;

text-align: center;

text-decoration: underline;

text-transform: uppercase;

line-height: 1.5;

Flexbox vs Grid

¿Cuál usar y cuándo?

• Flexbox es un modelo unidimensional.
• Se usa para alinear elementos en una fila o columna.

Ejemplo de Flexbox

  .container {
      display: flex;
      justify-content: center;
      align-items: center;
  }
                  

• Grid es un modelo bidimensional.
• Se usa para crear layouts complejos.

Ejemplo de Grid

  .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
  }
                  

Animaciones y Transiciones

• transition para cambios suaves.
• @keyframes para animaciones avanzadas.
• Optimización para rendimiento.

Ejemplo de Transición

  .button {
      transition: background-color 0.5s ease-in-out;
  }
                  

Ejemplo de Animación

  @keyframes fadeIn {
      from { opacity: 0; }
      to { opacity: 1; }
  }