Un poco exagerado el título pero, estos trucos que vamos a mostrar a continuación son muy útiles ya que aunque sepas poco CSS, podrás manejarte tan bien cuando crees tu proyecto que sentirás dominar el mundo.

Esperamos que te ayuden en las próximas experimentaciones de tu diseño. Empezemos:

1.Resetear

Recomendamos resetear el código CSS siempre que sea posible. Podemos hacerlo con Yahoo UI Reset CSS Package.

Podemos resetear la fuente a 10px usando la línea siguiente:

html {font-size: 62.5%;}

Si deseas usar unidades EM en tus fuentes y hacer que, por ejemplo, los párrafos tengan 12 px y la etiqueta h1 20px, sería así en unidades EM:

p {font-size: 1.2em;}
h1 {font-size: 2em;}

Si deseáis saber más técnicas recomendamos leer la entrada que publicamos sobre 10 técnicas para resetear CSS.

2. Diseño centrado horizontalmente (width fixed)

La mayoría de los sitios web tienen un width fixed. Es muy cuestionable cual es mejor, si fixed o liquid (el ancho se expande al 100%) ya que esto dependerá del objetivo que queramos obtener. Para centrar tu layout horizontalmente aplica este código CSS al wrapper o container div de tu página:

div#container {margin: 0 auto;}

3.Controlando la posición (Absoluta y relativa)

Definir elementos con position:absolute te permite tener más control sobre el posicionamiento través de una distancia, ya sea izquierda, derecha, arriba o abajo. Esta distancia es calculada a partir del cuerpo (body) a menos que un elemento estemos dentro de un elemento con position: relative.

Un ejemplo:

Relativa

Absoluta

4. Posición de un elemento en el centro de la pantalla

Si deseas posicionar un elemento (por ejemplo, un popup) en el centro de la pantalla, este es el código CSS que debemos añadir:

div.popup { height:400px; width:500px; position: absolute; top: 50%; left: 50%;}
div.popup { margin-top: -200px; margin-left: -250px;}

Obviamente debes modificar el alto y ancho del elemento que vayas a centrar.Como se muestra en el código, debes darle márgenes negativos y porcentajes al 50% a las dimensiones top y left, que hará que el div se muestre centrado.

Seguramente te vendrá muy bien leer esta entrada sobre Centrar la estructura de tu web horizontalmente usando CSS.

5. Las reglas globales pueden ser reusadas.

.left {float: left;}
.right {float: right;}
img .left { border:2px solid #aaaaaa; margin: 0 10px 0 0;}
img .right { border:2px solid #aaaaaa; margin: 0 0 0 10px; padding: 1px;}

Indicar unos cuanto selectores al principio de tu hoja de estilos puede ayudarte. Puedes añadir la tag que quieras dependiendo de tus necesidades.

6. Doble margen en elementos con float con IE 6

IE 6 desea sentirse individual con sus errores únicos. Si deseamos solucionar el doble margen en los elementos con float, indicamos este código CSS:

div {float:left;margin:40px;display:inline;}

7. Barra de navegación simple

<div id="navbar">
<ul>
<li><a href="http://www.yahoo.com">Yahoo</a></li>
<li><a href="http://www.google.es/?gfe_rd=cr&amp;dcr=0&amp;ei=cZEfWoTaMILFaKK7iIAD&amp;gws_rd=ssl">Google</a></li>
<li><a href="https://www.cssblog.es">CSSBlog ES</a></li>
</ul>
</div>

Si deseamos obtener una barra de navegación mediante listas de lo más sencillo que se puede encontrar podemos usar este código XHTML:

Seguido de, como no, CSS:

#navbar ul li {display:inline;margin:0 10px 0 0;}
#navbar ul li a {color: #333;display:block;float:left;padding:5px;}
#navbar ul li a:hover {background:#eee;color:black;}

8. Form sin tablas

¿Cómo crear un form sin tablas, mediante div, como el de Jeff Howden?

Este es el código HTML a añadir:

<form action="form.php" method="post">
<fieldset>
<legend>Información personal</legend>
<div>
<label for="first_name">Nombre:</label>
<input type="text" name="first_name" id="first_name" size="10″ value="" />
</div>
<div>
<label for="last_name">Apellido:</label>
<input type="text" name="last_name" id="last_name" size="10″ value="" />
</div>
<div>
<label for="postal">C.Postal:</label>
<input type="text" name="postal" id="postal" size="10″ value="" />
</div>
</fieldset>
</form>

Con su parte de CSS:

form div {clear:left;display:block;width:400px;zoom:1;margin:5px 0 0 0;padding:1px 3px;}
form div label {display:block;float:left;width:130px;padding:3px 5px;margin: 0 0 5px 0;text-align:right;}

Os recomendamos mirar la lista de forms bonitos, para poder inspirarnos en nuestro diseño.

9. Footer pegado al bottom

En esta entrada se muestra como crear un footer que quede “pegado” a la barra de navegación.

10. Múltiples clases en un elemento

Podemos añadir varias clases a un solo elemento. El elemento en este caso será el párrafo. Este es el código CSS:

.red {color: red;}
.bold {font-weight: bold;}

Y el HTML:

<p class="red bold">¡Esto se visualizará rojo y en negrita!</p>

Si nos fijamos las dos clases van separadas por un espacio, tenedlo en cuenta.

Finalmente recomendamos mirar otra lista de trucos para CSS que indicamos anteriormente.

Vía | Peakflowdesign