Fundamentos CSS

/* Selector de elemento */
div { color: blue; }

/* Selector de clase */
.class-selector { color: red; }

/* Selector de ID */
#id-selector { color: green; }

/* Selector de atributo */
[data-example] { color: purple; }

.box-model-example {
  margin: 20px;
  border: 5px solid var(--gold);
  padding: 15px;
  width: 200px;
  height: 100px;
}

/* Display */
.block { display: block; }
.inline { display: inline; }
.inline-block { display: inline-block; }
.flex { display: flex; }
.grid { display: grid; }

/* Position */
.static { position: static; }
.relative { position: relative; }
.absolute { position: absolute; }
.fixed { position: fixed; }
.sticky { position: sticky; }

.rgb { background-color: rgb(255, 0, 0); }
.hex { background-color: #00ff00; }
.hsl { background-color: hsl(240, 100%, 50%); }
.rgba { background-color: rgba(255, 0, 0, 0.5); }
.gradient { background: linear-gradient(45deg, #ff0000, #00ff00); }
.bg-multiple {
  background-color: var(--gold);
  background-image: linear-gradient(45deg, rgba(255,255,255,0.1), transparent);
}

.font-family { font-family: 'Arial', sans-serif; }
.font-size { font-size: 24px; }
.font-weight { font-weight: bold; }
.text-align { text-align: center; }
.line-height { line-height: 1.6; }
.letter-spacing { letter-spacing: 2px; }
.text-transform { text-transform: uppercase; }

/* Bordes */
.border-example {
  border: 3px solid var(--gold);
  padding: 10px;
  margin: 10px;
}

.rounded {
  border-radius: 15px;
}

/* Sombras */
.box-shadow {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
}

.text-shadow {
  text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}

.multiple-shadow {
  box-shadow: 
    5px 5px 15px rgba(0,0,0,0.3),
    -5px -5px 15px rgba(255,255,255,0.1);
}

/* Transiciones */
.transition-example {
  transition: all 0.3s ease;
}

.hover-scale:hover {
  transform: scale(1.1);
}

.hover-color:hover {
  background-color: var(--coral);
}

.hover-rotate:hover {
  transform: rotate(45deg);
}

.hover-complex:hover {
  transform: scale(1.1) rotate(45deg);
  background-color: var(--coral);
}

/* Animaciones */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}