Composición de clases CSS

composicion-de-clases-css.markdown

Composición de clases CSS

A Pen by Joel Alejandro Villarreal Bertoldi on CodePen.

License.

index.html

<div id="forma1">
  <img class="figura-redonda" src="https://placehold.it/100x100">
  <img class="borde-rojo" src="https://placehold.it/100x100">
  <img class="borde-grueso borde-rojo" src="https://placehold.it/100x100">
  <img class="borde-rojo figura-redonda borde-grueso" src="https://placehold.it/100x100">
  <img class="borde-rojo figura-redonda" src="https://placehold.it/100x100">
</div>
<div id="forma2">
  <img class="imagen1" src="https://placehold.it/100x100">
  <img class="imagen2" src="https://placehold.it/100x100">
  <img class="imagen3" src="https://placehold.it/100x100">
  <img class="imagen4" src="https://placehold.it/100x100">
  <img style="width: 100px; height: 100px" class="imagen5" src="https://placehold.it/100x100">
</div>

style.css

#forma1 .figura-redonda {
  border-radius: 50%;
}

#forma1 .borde-rojo {
  border-style: solid;
  border-color: red;
}

#forma1 .borde-grueso {
  border-width: 10px;
}

#forma2 .imagen1 {
  border-radius: 50%;
}

#forma2 .imagen2 {
  border: 1px solid red;
}

#forma2 .imagen3 {
  border: 10px solid red;
}

#forma2 .imagen4 {
  border: 10px solid red;
  border-radius: 50%;
}

#forma2 .imagen5 {
  border: 1px solid red;
  border-radius: 50%;
}