These are some elements / things that sometimes we miss while using CSS:

  • Always define margin and padding. This is one of the main problems when designing for multiple browsers (specially IE6) since each browsers has a default value for this properties. You an use * {padding:0; margin:0; } to degine 0 padding and margin for all elements in the stylesheet.
  • Use em instead of px (pixels). That will help to make the site more friendly with users who want to change the default font size. Choose font-size: 62.5% to set the base / standard size which it’s aprox.to a 10px font. This is equivalent to say 1em. From that point we can use 1.1em (11px), etc.
  • Always use a background (or background-color) and color: #xxxxxx to define background and font color since this is important to CSS standards and validation. Remember that some people changes the defaults in their browsers in order to get different contrast options so keep in mind this in order to avoid problems.
  • Instead of setting margin-top, margin-right, margin-bottom y margin-left individually we can save som space by using all these declarations in one line: margin: 12px 4px 6px 3px; (clockwise: top, right, bottom, left).
  • In order to align / float elements right or left and make text wrap these elements use float: right or float: left. You can also add position: relative;
  • Some browsers (like Firefox) ow support some CSS rounded borders options:
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
  • If we wan to use an image instead of text, but we do want to keep the text inside the code we can use display: none and a background with an image in it : background: #fff url(/imagenes/mi_imagen.gif); But be careful since this technique can be seen by Google as a way to hide keywords and may get you intro trouble (see reference).
  • Remember that BODY and HTML can be styled using CSS also.
  • When combining CSS with Flash we can use z-index in order to control which element is on top. The Flash Object option can be set to OPAQUE to gain some control over elements stacking in different browsers.

Estas son algunas cosas que a veces se nos escapan:

  • Siempre definir margin y padding. Este es uno de los problemas más molestos a la hora de diseñar para Firefox e Internet Explorer (especialmente IE6) ya que cada navegador tiene valores predeterminados diferentes. Pueden usar * {padding:0; margin:0; } para definir 0 padding y margin para todos los elementos.
  • link, visited, hover y active es el orden en los que hay que definir los atributos de a (links)
  • Tipos de letras con espacios deben encerrarse entre comillas. Por ejemplo: “Trebuchet MS”
  • Usar em en vez de pixel nos ayuda a mantener los tipos de letra en forma proporcional. Usando font-size: 62.5% setea el tamaño a aproximadamente 10px. Que es igual a 1em. De ahi podemos usar 1.1em (11px) y así.
  • Siempre usar background (o background-color) y color: #xxxxxx para definir el color de fuente ya que no solo es requerido para ser CSS válido sino que también hay usuarios que cambian los colores por defecto. Al usar esto nos garantizamos que el color de fondo y de fuentes sea el que queremos para nuestro diseño.
  • En vez de setear margin-top, margin-right, margin-bottom y margin-left podemos poner todo en una línea: margin: 12px 4px 6px 3px; (en el sentido de las agujas del reloj: arriba, derecha, abajo, izquierda).
  • Para alinear (flotar) imagenes a la derecha o izquierda para que el texto las rodée podemos usar float: right o float: left.
  • En Firefox y Opea podemos usar bordes redondeados de CSS3 con:
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    En Internet Explorer tenemos que seguir usando imagenes para emular este efecto.
  • Si queremos usar una imagen en vez de un texto, pero queremos mantener el texto en el código podemos usar display: none y un background con imagen: background: #fff url(/imagenes/mi_imagen.gif); Aunque es preferible usar el background y que el texto quede visible porque sino Google puede tomar ese detalle en contra pensando que uno está ocultando keywords (ver referencia).
  • Recordar que HTML y Body pueden cambiarse con CSS también.
  • Al usar CSS con Flash podemos usar z-index para que el CSS / Flash esté por encima o por debajo del elemento que queramos. También, en Flash se puede usar la opción OPAQUE para tener más control sobre esto aunque no funcione bien en todos los navegadores.