Some CSS Tricks

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.
Compartir / Share