:: Tip CSS. Ser específico

Cuando realizamos por ejemplo un desarrollo web, necesitamos hacer uso de CSS (Cascading Style Sheets) y es posible que en muchas ocasiones hayamos utilizado reglas "abreviadas"; Si queremos cambiar el color de fondo de un elemento, podríamos utilizar el siguiente código:

background:red;

Esta versión abreviada, aunque nos ahorra tiempo, automáticamente se están definiendo estas otras propiedades:

background-color : red;
background-repeat : repeat;
background-origin : padding-box;
background-image : none;
background-position : 0% 0%;
background-size : auto auto;
background-clip : border-box;
background-attachment : scroll;

Por lo tanto, la mejor opción sería ser lo más específico posible, en este caso:

background-color:red;

:: Estilos CSS. Cómo crear un bocadillo

Para crear un "bocadillo", mensaje al estilo de un cómic podemos realizarlo utilizando estilos CSS.

Los estilos que debemos aplicar sobre una capa para que esta tenga el aspecto de un "bocadillo", son los siguientes:
.bocadillo{

.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}

El código fuente completo es el siguiente:

< html lang="es" >
< head >

< title >Bocadillo (mensaje)< /title >
< style >
.bocadillo{
 border-radius: 30px;
 background-color: #808080;
 color: #fff;
 padding: 30px;
 width: 300px;
 font-family: 'Trebuchet ms';
 font-size: 1em
}
.bocadillo:before {
 content:"";
 position: absolute;
 width: 0;
 height: 0;
 border-top: 20px solid #808080;
 border-left: 18px solid transparent;
 margin: 68px 0 0 250px;
}
< /style >
< /head >
< body >
 < div class="bocadillo" >
 Mensaje de texto dentro de un bocadillo al estilo cómic.
 < /div >
< /body >
< /html >