Cajas de colores con Html usando CSS

Hola que tal, hoy haremos cajas de colores con Html usando Css, una excelente forma de empezar muy bien el mes empezando a diseñar, y entrando al mundo de diseño web.

Como crear Cajas de colores con Html usando CSS

Realmente vamos a ver una parte tal y como lo hace un gran framewok conocido, Bootstrap utiliza mucho las clases en las etiquetas DIV, y vamos a imitar esto pero le meteremos colores muy bonitos que de seguro te encantarán.

Imitando diseños de Bootstrap.

Bueno veamos como lo hace Bootstrap, pues es un modelo el cual vamos a seguir pero obvio que nosotros empezaremos a utilizar mucho nuestros propios estilos.

<div class="alert alert-primary" role="alert">
  This is a primary alert with <a href="#" class="alert-link">an example link</a>. Give it a click if you like.
</div>

Como podemos observar Bootstrap utiliza la clase Alert-primary para identificar el color celeste, en realidad se pueden utilizar muchas clases como :
alert alert-success
alert alert-danger
alert alert-danger
Todas estas clases tienen un color que los distingue, así que lo único que tienes que hacer aquí es cambiar la clase.
En fin, vayamos entonces a lo que hemos venido, y es crear nuestras propias cajas html con CSS.

Creando cajas con HTML y CSS

Bueno vayamos a hacer como lo hace bootstrap, definiremos primeramente nuestro identificador DIV con una clase de esta manera.
<div class="caja-roja"> Esta es una caja roja </div>

Diseño CSS

Ahora que ya tenemos nuestro identificador procederemos a ponerle nuestros estilos css que le darán un aspecto fabuloso.
Esta es una caja roja
caja-roja {
background-color: #f9dbdb;
 border: 1px solid #e9b3b3;
 height: 100px;
 margin: 0 auto 0 auto;
 overflow: hidden;
 padding: 40px;
 width: 230px;
}
Como puedes observar tu puedes modificar a como en realidad te encante, pero bien este es un pequeño tutorial de CSS para principiantes, espero que en realidad te haya encantado, ya sabes que puedes pedirnos mas pequeños tutoriales de diseño web, muchas gracias.