Domina CSS: Fundamentos, Técnicas Avanzadas y Ejemplos Prácticos

Introducción a CSS

CSS (Cascading Style Sheets) es el lenguaje que se utiliza para describir la presentación de documentos HTML. A través de CSS controlamos colores, fuentes, márgenes, posiciones, animaciones y casi todos los aspectos visuales de una página web.

Un archivo CSS puede ser interno, en línea o externo. La mejor práctica es usar archivos externos para separar la estructura (HTML) del estilo (CSS).

Ejemplo de inclusión de CSS externo:

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

Selectores en CSS

Un selector en CSS es el mecanismo que usamos para apuntar a los elementos HTML que queremos estilizar.

Tipos de Selectores:

• Selector de tipo: selecciona elementos por su nombre de etiqueta.

  p { color: blue; }
  

• Selector de clase: selecciona todos los elementos que tienen una clase específica.

  .destacado { font-weight: bold; }
  

• Selector de ID: selecciona un elemento único por su identificador.

  #principal { background-color: lightgray; }
  

• Selectores de atributo: selecciona elementos en función de atributos o valores de atributos.

  input[type="text"] { border: 1px solid #ccc; }
  

Combinadores:

• Descendiente:

  div p { color: red; }
  

• Hijo directo:

  div > p { margin: 10px; }
  

La cascada, especificidad y herencia

Cascada

Cuando múltiples reglas CSS afectan a un mismo elemento, se aplica un conjunto de reglas basado en la cascada: último en el código, mayor prioridad.

Especificidad

Cada selector tiene un valor de "fuerza" que determina qué estilos se aplican si hay conflictos.

• Etiqueta: 1 punto
• Clase: 10 puntos
• ID: 100 puntos

Un ejemplo:

/* Menor especificidad */
p { color: green; }
/* Mayor especificidad */
#titulo { color: blue; }

Aunque p esté definido, si el elemento tiene el ID titulo, el color será azul.

Herencia

Algunos estilos, como el color o la fuente, se heredan automáticamente. Otros, como los márgenes y bordes, no.

Responsive Design con CSS

El diseño responsive es esencial para que las páginas web se adapten a diferentes tamaños de pantalla.

Media Queries

Son reglas que aplican estilos solo si se cumple una condición de ancho, altura, resolución, etc.

Ejemplo básico:

@media (max-width: 768px) {
  body {
    background-color: lightblue;
  }
}

Flexbox y Grid: Diseños modernos en CSS

Flexbox

Flexbox permite diseñar layouts de una dimensión (fila o columna) de forma sencilla.

Ejemplo:

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

Grid

CSS Grid Layout es ideal para estructuras bidimensionales (filas y columnas).

Ejemplo:

.grid-container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

Transiciones, Transformaciones y Animaciones

CSS también permite crear efectos visuales y animaciones sin usar JavaScript.

Transiciones

Aplican cambios suaves entre estados.

button {
  transition: background-color 0.3s ease;
}
button:hover {
  background-color: #3498db;
}

Transformaciones

Rotar, escalar o mover elementos.

img:hover {
  transform: scale(1.2) rotate(5deg);
}

Animaciones

Crear animaciones personalizadas usando @keyframes.

@keyframes mover {
  0% { transform: translateX(0); }
  100% { transform: translateX(100px); }
}
.cuadro {
  animation: mover 2s infinite alternate;
}

Buenas Prácticas en CSS

• Usar clases en lugar de IDs para estilos recurrentes.
• Seguir una nomenclatura clara como BEM (Block Element Modifier).
• Agrupar y comentar el CSS para facilitar el mantenimiento.
• Minimizar el uso de !important.
• Utilizar variables CSS (--color-primario: #3498db;) para hacer más fácil el cambio de temas.
• Optimizar el tamaño de los archivos CSS usando técnicas como minificación.

Ejemplo Práctico Integrado

Vamos a crear una tarjeta responsive sencilla utilizando Flexbox, colores y efectos:

HTML:

<div >
 <img src=https://via.placeholder.com/300 alt="Imagen de ejemplo">
 <h2>Artículo CSS</h2>
 <p>Aprende a dominar CSS con técnicas modernas y ejemplos reales.</p>
 <button>Leer más</button>
</div>

CSS:

.card {
  width: 300px;
  margin: 20px auto;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  text-align: center;
  transition: transform 0.3s;
}
.card:hover {
  transform: scale(1.05);
}
.card img {
  width: 100%;
  height: auto;
}
.card h2 {
  margin: 10px 0;
  color: #333;
}
.card p {
  padding: 0 15px;
  font-size: 14px;
  color: #666;
}
.card button {
  background-color: #3498db;
  color: #fff;
  border: none;
  padding: 10px 15px;
  margin: 15px 0;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}
.card button:hover {
  background-color: #2980b9;
}

Visualizar código https://codepen.io/Esgranmore/pen/OPPjjgJ