Tecnología y Coaching para Emprendedores

10 Consejos Muy Útiles de CSS para Principiantes

css

Gracias a CSS, el estilo se puede crear de manera independiente del código HTML que define la estructura de la página web. Hoy en día con unos pocos conocimientos de CSS, incluso una persona sin experiencia en programación puede darle estilo a su sitio web.

Tanto si estás interesado en aprender CSS para crear tu propia página web, como si lo que quieres es simplemente retocar un poco el aspecto de tu blog, vale la pena tener en cuenta unos principios básicos para crear un buen código CSS. Veamos pues algunos consejos de CSS que pueden ser útiles para principiantes.

1. Utiliza reset.css

Cuando se trata de mostrar los estilos CSS, cada uno de los diferentes navegadores tiene un modo distinto de interpretar los mismos. Para evitar diferencias en la presentación de nuestras páginas web, utilizaremos lo que se llama un reset, que es una colección de parámetros que restablecen los valores de los estilos a un mismo valor para todos los navegadores y, a partir de aquí, definimos los parámetros en función de nuestras necesidades.

Esto lo podemos hacer bien con un archivo aparte llamado reset.css, bien especificándolo arriba del todo de nuestra hoja de estilos. Aquí tienes una recopilación de los mejores CSS resets.

2. Comprende la diferencia entre id y class

Este es uno de los puntos que confunden más a los principiantes, ¿para qué utilizar un ID y para qué usar class? Bien, utilizaremos un ID cuando se trata de un elemento que aparece una y sólo una vez en una página web. En CSS definiremos un id empezando con el signo de la almohadilla “#“. Por otro lado, utilizamos una clase cuando vamos a hacerla servir más de una vez en un determinado documento web. Para referirnos a una class en CSS utilizamos el punto “.

3. Añade comentarios a tu CSS

Si bien cuando estás creando el CSS te parece que no es necesario añadir comentarios, créeme si te digo que lo agradecerás. Cuando pasan unos meses y has estado entremedio trabajando en otros proyectos y vuelves al CSS que escribiste entonces, puedes perder un montón de tiempo si no has incluido comentarios. Lo mejor es poner comentarios del estilo /*--formulario de contacto --*/ o /* -- menú principal -- */, pues facilitan mucho el trabajo de revisión y mantenimiento.

4. Descubre la potencia de !important

!important se utiliza cuando quieres sobreescribir a un selector que viene después, con lo que te saltas la jerarquía de CSS. Veamos un ejemplo:

.estilo { 
   background-color:blue !important;   
   background-color:red;
}  

Vemos que sobreescribimos el color de azul a rojo, sin embargo el estilo será azul, pues hemos puesto que es !important. Esto es muy útil cuando por ejemplo en WordPress estamos queriendo sobreescribir el CSS de un plugin y no nos deja, si utilizamos !important podremos poner los valores que queramos sin problemas.

5. Evita el uso de table

Anteriormente se utilizaba mucho table en HTML, si eres de los que programaba en los años 90, seguro que todavía piensas en el uso de table en la maquetación de tus páginas web, ¡olvídalo! Las tablas sólo debes utilizarlas en el caso de querer tabular datos en una tabla, nada más. Descubre la potencia de los div y olvídate del uso de tablas.

6. Esconde el texto detrás de una imagen

A veces queremos esconder texto detrás de una imagen. Está claro que con la etiqueta alt podemos poner el texto alternativo a la imagen, pero si se trata de una etiqueta tipo h1 nos puede interesar poner el texto en la etiqueta por temas de SEO. Y aquí está el truco: si utilizas text-indent:-9999 el texto se irá detrás de la imagen, a pesar de estar en el documento HTML, con lo que quedará escondido a los ojos del usuario, pero no a los ojos de Google.


h1 {  
   text-indent:-9999px;  
   background:url("titulo.jpg") no-repeat;  
   width:200px;  
   height:50px;  
} 

7. Utiliza < target="_blank" rel="nofollow" href="http://getfirebug.com">Firebug y mejora tu CSS

Muchas veces cuando doy clases de diseño web y WordPress los alumnos me preguntan cómo pueden hacer que la letra sea como la de la página tal o conseguir un efecto muy chulo que sale en la página pascual. Bien, hay dos maneras, una, romperte los cuernos con el prueba una y otra vez o dos, instalarte Firebug y espiar el código de la página que te gusta. Firebug es un plugin excelente para Firefox y Chrome que, entre otras cosas, con un sólo clic te permite ver el código HTML y CSS de un determinado elemento de una página web. Con este plugin no sólo aprendes un montón a través de los diseños de otras páginas web, sino que ahorras mucho tiempo cuando quieres implementar algo que no sabes cómo hacer.

8. Utiliza un editor de CSS

Si trabajas con el Notepad de Windows o algo por el estilo, prepárate para dejarte los ojos en la pantalla. Mejor utiliza un editor que use diferentes colores para las etiquetas, pues esto te facilitará mucho la vida. Aquí tienes un listado de los mejores editores de texto para diseño web.

9. No utilices hacks para IE

Todos sabemos los problemas que da Internet Explorer, que interpreta las cosas como le da la gana. En lugar de utilizar hacks del estilo _main o *main, lo mejor es crear un documento CSS para IE7.Cara IE6, soy de la opinión que ya no se debería darle soporte, pues un navegador muy desfasado. Para ello puedes utilizar un script que bloquea el contenido en IE6.

<!--[if lte IE 7]>
   <link rel="stylesheet" type="text/css" href="css/ie7.css">
   <![endif]-->

10. Utiliza un código optimizado (shorthand).

Utilizar un código shorthand optimiza el tiempo de carga y el mantenimiento del código. El código CSS shorthand se refiere a que en lugar de utilizar:

p { margin-top: 10px;
margin-right: 20px;
margin-bottom:  30px;
margin-left: 40px; }

se utiliza:

p { margin: 10px 20px 30px 40px; }

Aquí tienes 4 maneras de especificar los márgenes:

(Imagen de Smashing Magazine)


Comentarios

  • Oscar

    Gracias.. gracias.. gracias… Tú apunte sobre Shorthand me ha aclarado un tema que me tenía de los nervios. El resto de datos que muestras en el artículo los tenía más o menos controlado… Gran artículo para los Amateurs Diseñadores como yo.

    Saludos.

  • dashaft

    Buen post, pero tengo algunos comentarios :p ¿qué quiere decir que nos olvidemos de las tablas? Estoy totalmente en desacuerdo, cada tag tiene su uso y table se necesita si o si, si que en una página web puedes prescindir de ellas usando divs a destajo y floats por un tubo, pero ¿qué me dices de los mailings? los gestores de correo no saben interpretar los floats, entonces se deben usar tablas. También, sobre los comentarios en el css, google sacó recientemente una guía (lo comenté en mi blog http://blog.dashaft.net/2012/05/23/google-te-quiere-ayudar-a-ser-webmaster-con-webmaster-academy/ ) de cómo maquetar para su buscador y decían lo contrario, que ni un comentario y todo el código comprimido. Si que soy partidario de los comentarios por el tema que tu dices, pero también soy partidario de pulir el código en producción y tener mil comentarios en preproducción. Y por último (y ya me callo XD ) el tema de los textos detrás de la imagen, html permite incorporar los atributos  alt y title en las imágenes expresamente para eso, para SEO, para no andar haciendo pirulas con css, que son cosas que a Google no le gustan nada.
    Saludos y sigue escribiendo cosas interesantes! ;)

  • Kevin

    Es un buen artículo, servirá de ayuda a muchos iniciados al diseño web.
    Yo recalcaría la importancia de separar el estilo (CSS) del contenido (HTML), que debería escribirse de forma semántica, (p.e. para un párrafo, no para cualquier texto que se quiera estilizar).

  • julio

    ecelente articulo pero, actualmente con las distintas aplicaiones web que hay ya no es tan necesario aprender a programar.. chequea esta pagina:

    http://1-acb.com/Aplicaciones%20Web.html

    • Sandra

      No estoy de acuerdo, Julio, el código web determinará muchos factores, como la velocidad de carga, el posicionamiento web, la validación web.. esta creencia es la que está llevando a muchas personas a pensar que cualquiera puede hacer una web, y sí, cualquiera puede hacerla sin saber programar, pero si buscas un diseño original optimizado tanto para los motores de búsqueda como para los distintos navegadores, entonces has de saber programar. Más todavía, en el enlace que proporcionas menciona WordPress y sí, hay mil plantillas de WordPress, ahora, cuando no sepas programar, no podrás editarlas y tendrás una web igual que la de otros muchos.

  • Edwin Corona

    Hola SandraTodo esta muy bien.
    Solo cuando abre en Explorer tarda mucho en cargar ¿Es normal?Saludos y muchas gracias por esta aportacion

    • ale

      Solución, NO uses explorer jeje

    • Sandra

      Te recomiendo que utilices la herramienta GTMetrix o Pingdom Tools para comprobarlo.