Manual de HTML y CSS

Guía de CSS para principantes

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, promedio: 5,00 de 5)
Cargando...

Vemos conceptos básicos para maquetar páginas web con CSS. Guías que nos ayudarán a crear hojas de estilo limpias y optimizadas.

Usar hojas de estilo (CSS) resulta fundamental a la hora de diseñar una página web, te permite dar estilo a todos los elementos de tu web y controlar de una manera ordenada cómo se presenta la información, sin mencionar el hecho de lo fácil que resulta modificar el estilo de múltiples páginas a la vez cuando éstas comparten la misma hoja de estilos.

Ahora bien, a pesar de tener multitud de ventajas, el uso de CSS requiere de aprendizaje, y aquellos que no están acostumbrados a usarlo suelen tener problemas comunes cuando se meten en la tarea de dar estilo a sus páginas web, en especial con navegadores obsoletos como Internet Explorer 8, por suerte en proceso de extinción.

No te asustes, no eres el único, con frecuencia el uso de CSS se atraganta a diseñadores noveles (y no tan noveles). En este artículo vamos a explicar algunos conceptos que se confunden con frecuencia en diseño web, para intentar evitar más quebraderos de cabeza de los necesarios.

Consejos básicos de CSS para empezar

Usar un reset.css

Los navegadores tienen estilos CSS por defecto para ciertas estructuras, por ejemplo para los enlaces, encabezados -h1, h2… – sin olvidar margins y paddings.

Si queremos (por nuestro bien) empezar a maquetar con una hoja de estilos realmente limpia, es más que recomendable el uso de resets para CSS.

Algunos de los CSS reset más conocidos son: reset de Eric Meyer y Normalize.

Yo por costumbre suelo usar el de Normalize, pero adaptándolo a las necesidades de cada proyecto.

La herencia y la especificidad en CSS

Cuando estamos aprendiendo a maquetar con CSS, es frecuente llenar nuestro HTML de clases e id, la mayoría innecesarias. En CSS es importante tener en cuenta la herencia y la especificidad para simplificar el código.

La herencia en CSS es una de sus propiedades fundamentales, es importante comprenderla y acostumbrarse a jugar con ella para desarrollar códigos optimizados y limpios.

Cuando determinas el valor de una propiedad CSS en un elemento, por ejemplo un div, los elementos hijos de ese elemento la heredan automáticamente.

Por ejemplo, tenemos un div con un tamaño de letra de 2em.


#divUno { font-size: 2em; } /*tamaño de fuente 2em */

Por herencia, todos los párrafos, enlaces, listas, etc. y en general cualquier texto que contenga ese div, tendrá automáticamente un tamaño de letra de 2em.

Este efecto se puede anula por medio de la especificidad. Supongamos que en ese mismo div, le damos a los párrafos un tamaño de letra de 1.5em.

Entonces, todos los elementos contenidos dentro del div tendrán un tamaño de letra de 2em salvo los párrafos, que serán de 1.5em.


#divUno { font-size: 2em; } /*tamaño de fuente 2em */
#divUno p { font-size: 1.5em; } /*tamaño de fuente 1.5em, más especifico */

Los párrafos aplican el valor de 1.5em porque esa regla es más específica que la primera. Además, no hemos tenido que asignarle una clase adicional a la etiqueta p, puesto que por medio de su identificador padre hemos filtrado.

Cuándo usar class y cuándo usar id

En relación a lo anterior, es necesario entender la diferencia entre las clases y los id.

En CSS se puede definir una propiedad por medio de class o id indistintamente. No obstante, las implicaciones de usar uno u otro son distintas. Básicamente:

  • class: se utiliza cuando una estructura se repite más de una vez en la misma página de un sitio web.
  • id: se utiliza cuando una estructura se usa una única vez en la misma página de un sitio web.

Ahora bien, ya que sabemos qué es la herencia y la especificidad, hay que decir que un id es más específico que una clase. Es decir, si tengo esto para el mismo párrafo:


#idUno { color: #000; } /*color negro*/
.claseDos { color: #FFF; } /*color blanco*/

<p id="idUno" class="claseDos">Párrafo de ejemplo</p>

El texto del párrafo se verá negro, porque el id es más específico que la clase y sobrescribe al valor dado en .claseDos.

Los id sólo se pueden usar una vez dentro de cada página, las clases pueden usarse tantas veces como sea necesario.

Usar shorthand CSS, reagrupar el código CSS

Cuando aprendemos a maquetar tendemos a poner líneas de código innecesarias, uno de los principales causantes es el no saber reagrupar el código CSS como corresponde.

Un shorthand de CSS, consiste en agrupar en una sola línea, todo el código que es utilizado para definir el mismo tipo de característica. De esa manera evitamos tener un montón de líneas extra en nuestro código.

Imagina tener un archivo CSS donde cada elemento tenga siete líneas nada más para definir el borde, otras cuatro para establecer el margen y cinco para el fondo.

Esto nos daría como resultado un número de líneas enorme, haciendo que la búsqueda se vuelva más difícil y la organización de nuestro código se pierda, produciendo menos limpieza.

Un ejemplo:


#content {
	background-color: #FFF;
	background-image: url(../img/bg-content.gif);
	background-repeat: no-repeat;
	background-position: top left;
}

Podemos usar esto, que hará exactamente lo mismo:


#content {
	background: #FFF url(../img/bg-content.gif) no-repeat top left;
}

Código más limpio con  CSS3

El concepto original de CSS fue el de separar el contenido web (HTML) de su apariencia (CSS). Esto fue conseguido con cierto éxito hasta el momento, aunque ciertos efectos requieren trucos o maniobras algo complicadas o confusas.

La llegada de CSS3, trajo consigo una cantidad de mejoras que obvian tales trucos y los transforman en técnicas normales del CSS.

Entre otras mejoras, CSS3 incorporó lo siguiente:

  • Manejo de Áreas Rectangulares:
    Mediante simples instrucciones se pueden manejar características de los objetos rectangulares (boxes), tales como tipo y color del borde, sombras, bordes redondeados.
  • Multiplicidad de Imágenes en Fondos:
    Ahora pueden ubicarse varias imágenes como fondo en un bloque (o en la página completa), en forma de capas, de tal forma que resulte en una combinación de imágenes. Esto se realiza muy fácilmente con la sentencia background-image, en la cual las diferentes ilustraciones se enumeran separadas por comas.
  • Otras mejoras de CSS3:
    Existen algunas otras novedades para facilitar la maquetación, como efectos sobre el texto (en particular sombreado y manejo del texto excedente), colores y administración de opacidad y transparencia.

A través de la combinación de estas novedades más las herramientas tradicionales de CSS, los diseñadores web han conseguido formidables resultados y hasta ilustraciones de gran calidad y detalle sin utilizar imágenes.

Preguntas y respuestas sobre CSS

Cuando ya hemos empezado a trabajar con CSS pero no tenemos mucha experiencia, hay una serie de preguntas que se nos pasan por la cabeza.

¿Qué es un selector CSS?

Si al leer la palabra “selectores” en el título de la sección solo añadiste una duda más a tu libro de preguntas, pues no te preocupes porque aquí te explicamos qué es.

Un selector es el pedazo de código que va antes de las llaves ({}) en una hoja de estilo, estos se encargan de delimitar el rango de elementos que vamos a modificar agregándoles un estilo específico. Por ejemplo en el siguiente código:


#soyUnId { color: red; }

El selector sería la palabra “#soyUnId”.

¿Qué diferencia hay entre .clase y p.clase?

Por ejemplo si tuviéramos dos bloques de código como los siguientes:


.claseX { /* Estilo */ }
p.claseX { /* Estilo */ }

El primero de estos selectores aplicará el estilo a todos los elementos que pertenezcan a “claseX”, mientras que el segundo lo aplicará únicamente a los elementos de tipo párrafo que pertenezcan a esa misma clase.

El primero resulta más genérico puesto que el código puede ser útil para varios tipos de elementos, y tiene la gran ventaja de que es más rápido de entender y aplicar por parte del navegador.

Por su parte el segundo es más específico y por lo mismo puede ser más única su aplicación, por lo que puede dar menos problemas de herencia, pero es más lento de interpretar por el navegador.

En general, la primera opción es más recomendable, ya que a parte de lo mencionad, si deseas utilizar esa misma clase en distintos tipos de elementos entonces deberás realizar un código como este:


p.claseX { color: red; }
span.claseX { color: orange; }
etc.

¿Importa el orden de los elementos en CSS?

La respuesta corta es sí.

El primer ejemplo claro de esto se encuentra en los selectores, no es lo mismo poner primer el elemento y después la clase a poner primero la clase y luego el elemento.

Si tenemos  dos bloques de código como estos:


.claseX div { color: red; }
div.claseX { color: orange; }

No obtendremos los mismos resultados, ¿Cuál es la diferencia?:

  • La primera sentencia indica que el estilo de color rojo se aplicará a todos los elementos div que estén dentro de la clase “claseX”.
  • La segunda sentencia hace que el estilo de color naranja únicamente se aplique a los elementos de tipo div que tengan la clase “claseX”.

El orden también es un factor a considerar al momento de llamar dos o más hojas de estilo en un archivo HTML, la última hoja es la que tiene prioridad y si una propiedad se define en dos o más partes, las propiedades que se dieron en la última hoja son las que se respetarán.

De igual manera esto se ve reflejado en el orden interior de las hojas de estilo, es decir, si en una misma hoja tenemos dos selectores con la misma especificidad, como los siguientes:


.claseRojo { color: red; }
.claseVerde { color: green; }

Y aplicamos ambas clases al mismo elementos, el último es el que finalmente predominará y aplicará sus propiedades. En este caso, el de color verde.

Es importante leer bien nuestro código y verificar que no existan propiedades repetidas en una misma sentencia, en caso de que llegaran a existir entonces el orden será un elemento a considerar para determinar que propiedad prevalecerá. Si tenemos un código como este:


.claseX {
	color: red;
	border: 1px solid;
	color: orange;
}

Donde claramente definimos dos veces el color de nuestro texto, debemos ser conscientes que únicamente la última propiedad será la que se aplicará, dejando el texto de color naranja.

¿Uso id o class?

Hasta cierto punto el uso de un ID o una clase en un elemento resulta bastante similar.

La diferencia está en que cuando queremos aplicar un estilo único, usamos id, mientras que la clase (class) nos ayuda a aplicar el mismo estilo a diferentes elementos.

Consejos para escribir CSS más comprensible

Quizás en más de una ocasión te hayas visto en la necesidad de modificar un código ajeno, y al hacerlo pudiste haber notado ciertos factores que te causaron frustración e incluso enfado.

En muchas ocasiones, la actividad de entender el código ajeno evoluciona en reescribir dicho código, ya que al leerlo puede llegar a parecer que no tiene sentido y resulta bastante decepcionante tener que trabajar sobre ese mismo código.

Para evitar que futuros desarrolladores del mismo proyecto pasen lo mismo que nosotros, al momento de escribir nuestro código, debemos ser considerados y tratar siempre de dar una estructura que permita al lector comprender rápidamente lo que estamos haciendo.

Existen muchos estilos de codificación, hay a quienes no les gusta utilizar sangría, a otros les gusta manejar varios elementos en una sola línea, pero en busca de una mejor organización, debemos dejar de lado los gustos personales y empezar a buscar una mejor manera de presentar el código.

Añadir comentarios

Los comentarios son elementos de gran utilidad para comprender la funcionalidad del código. Con los comentarios, te será mucho más sencillo identificar bloques de código y el proceso de búsqueda se hará más rápido y eficiente.

Ejemplo de comentarios en CSS:


/************** Texto de comentario importante **************/
/* Texto de comentario menos importante */

Si tu usas un CSS general para todo tu sitio, imagina lo que sería buscar un estilo especifico a través de todas esas sentencias y líneas de código, el tiempo invertido sería demasiado y cuando surja la necesidad de volver a hacer otro cambio es muy probable que tengas que volver a buscar.

En cambio, si agrupamos nuestros elementos en base a la función que cumplen, la sección de tu página a la que pertenecen, etc., y agregamos comentarios en la parte superior de estos, los podemos identificar rápidamente.

Indentar tu código CSS

Otra clave para mantener nuestro código organizado y limpio, es la indentación. Esta consiste en agregar espacio antes de cada línea de código, dicho espacio ira aumentando dependiendo del nivel al que pertenezca el código.

Esta técnica nos permite leer mejor e identificar elementos de manera más rápida, aunado a esto, hace que el código sea más fácil de modificarse y trabajar con él en un futuro.


.clase1 {}
   .clase1 p {}
      .clase1 p a {}

Trata de utilizar hacks CSS fuera de la hoja normal

Internet Explorer es un navegador que cuenta con bastantes problemas para interpretar ciertas reglas de CSS, por lo mismo existen una serie de hacks de CSS hechos por la comunidad de desarrolladores, para solucionar varios de los problemas que se presentan.

Lo mismo, aunque menos acusado, te puede pasar con otros navegadores.

Es recomendable que los hacks de CSS estén en una hoja parte.

Primero porque son parches que añadimos para solucionar un problema, pero no son la manera correcta de hacerlo. Y segundo porque de esta forma mantenemos la hoja de estilos más limpia.

Utiliza nombres de IDs y clases significativos

Puede parecer simple en cierta manera, pero la lectura de IDs y clases es uno de los principales métodos para identificar qué parte del diseño estamos modificando.

Si un ID o clase es bastante descriptivo, nos ahorrará la necesidad de ir a buscar dicho elemento en el HTML para que dónde se usa.

Si por ejemplo quisieramos dar un estilo a la barra lateral, en vez de utilizar un nombre de selector como este:


#bl { color: #000000; }

Debemos usar algo así, que sólo con leerlo se entiende:


#barra-lateral { color: #000000; }

Eliminar clases e IDs que ya no son utilizados

En muchas ocasiones el sitio cambia, muchos elementos dejan de ser necesarios y se borran del código, por lo que ya no son desplegados en el DOM. Es por esto, que sus estilos ya no se aplican y las reglas CSS para definirlos sobran.

Si ya no necesitamos dicho código, lo mejor que podemos hacer es borrarlo, ya que sólo estará ocupando espacio innecesario y hará más complejo nuestro código.

Al mantener en la hoja de estilo, IDs y clases no utilizados, estamos aumentando el nivel de complejidad para buscar a través del archivo y localizar lo que necesitamos modificar.

Mantener código muerto también crea otros problemas, ya que no podemos identificar qué sentencias hacen referencia a los elementos que realmente se utilizan y cuales no.

Por lo tanto, tan pronto como borres un elemento del código, elimina también sus estilo.

Si sientes la necesidad de conservar dicho estilo porque puedes reutilizarlo en un futuro, puedes guardarlo en una hoja por separado para no tener que rehacer el código.

Dividir los estilo en varios archivos

Es común que al iniciar un proyecto, empecemos a trabajar sobre una sola hoja de estilo, la cual se convierte en la poseedora de todos los estilos de nuestro sitio.

Los problemas empiezan a llegar cuando el sitio se vuelve demasiado grande, la hoja se amplia demasiado y cada vez cuesta más mantenerla ordena.

Incluso, algunos de los consejos que aquí mencionamos, pueden parecer bastante complejos cuando se cuenta con una hoja de estilo muy grande.

Es por ello que para esos casos, se puede optar por dividir la hoja general en varios archivos de estilo. Dichos archivos se pueden crear en base al tipo de los elementos, a la página donde se despliegan o al módulo o aplicación que los utiliza.

Por ejemplo, si cuentas con un blog, puedes dejar los estilos para el layout principal en un archivo, y utilizar archivos distintos para los estilos que aplicarás a los posts y a las categorías.

Trata de mantener esto en práctica únicamente si estás manejando proyectos grandes, ya que de lo contrario el uso de muchos archivos en proyectos pequeños puede ser contraproducente.

Buscar uniformidad

El código escrito debe parecer que fue hecho por una sola persona, si el desarrollador que estuvo antes que tú, manejaba cierto patrón para elegir los nombres, trata de replicarlo.

Es decir, si las clases utilizaban guiones entre las palabras (clase-css-definida), usa el mismo modo para las nuevas clases que crearás, no trates de imponer un estilo sólo porque a ti te gusta más como se ven los nombres de las clases con guión bajo, y si quieres hacerlo entonces trata de modificar todo el código ya existente, para que haya uniformidad.

Aplica un formato correcto

En un esfuerzo extra para obtener mayor calidad, se puede buscar adaptar y crear código en base a un formato estándar.

Para lograrlo, se puede optar por seguir ciertas reglas.

  • Cuando utilices sentencias con varios selectores, no coloques más de un selector discreto por línea.
  • Incluye un espacio antes de la llave de apertura y antes de la de clausura.
  • Utiliza sólo una declaración por línea.
  • Deja un espacio después de los dos puntos de cada regla y después de las comas.
  • Usa letras minúsculas para los valores hexadecimales.
  • Incluye un punto y coma al final de cada regla, aunque sea la última del bloque.

.selector1 { color: #000; border: 1px solid #FF0000; }
.selector2,
.selector3 { font-size: 1em; }

Técnicas de CSS para empezar

CSS tiende a ser un lenguaje muy sencillo cuando se logra dominar su estructuración básica.

En este lenguaje, existen una serie de reglas y declaraciones un poco más complejas, las cuales nos permiten transformar nuestros diseños de manera considerable.

Media queries (@media)


@media screen and (max-width: 768px) {
   ...
}

Los media queries se han convertido en una herramienta muy importante para elaborar el diseño adaptable (responsive design).

El uso de esta regla en combinación con propiedades como “min-width” y “max-height”, nos permite ajustar el diseño de nuestro sitio al tamaño de la pantalla o ventana donde se está mostrando.

background-size


body {
	background: url(imagen_de_fondo.jpg) no-repeat;
	background-size: 100%;
}

Si se presenta la necesidad de manejar una imagen de fondo que cubra en su totalidad el espacio desplegado en la pantalla, entonces esta propiedad de CSS3 te resultará extremadamente útil.

Antes para poder realizar esta clase de tarea, se tenía que recurrir al uso de JavaScript o algún otro truco que nos permitiera adaptar la imagen al tamaño del padre, pero ahora gracias a la propiedad background-size, basta con una sola línea de código.

@font-face


@font-face {
	font-family: FuenteLaWebera;
	src: url("fuentes/fuentelawebera.ttf");
        url("fuentes/fuentelawebera.eot"); /* IE9 */
}

Otra propiedad CSS3 que ha venido a ser de gran ayuda para transformar el diseño web, es @font-face.

Anteriormente, el uso de fuentes en una página web era algo muy poco flexible, ya que para usar una fuente uniforme en el sitio tenías que elegir una de tipo común que pudiera encontrarse en la mayoría de los sistemas operativos, y si deseabas utilizar alguna personalizada tenías que forzosamente subir dicha fuente a tu servidor.

Ahora, con el uso de “@font-face” se ha promovido el uso de fuentes alojadas en la Web, ya que esta propiedad nos permite cargar cualquiera de estas tipografías desde la locación donde se encuentren.

Gracias a esto, ahora podemos obtener fuentes de servicios proporcionados por terceros, como Google fonts y Typekit, de esta manera el diseñador se olvida de utilizar las fuentes “web-safe”.

margin: 0 auto;


#contenedor { margin: 0 auto; }

Por íncreible que parezca, uno de los más grandes dolores de cabeza para los diseñadores web principiantes que tratan de estructurar una página, se produce al querer centrar de manera correcta los elementos que la componen.

La propiedad “margin” es utilizada para establecer los margenes que tendrá un elemento con respecto a lo que le rodea en el DOM, en este caso el valor “0 auto” indica que no tendrá ningún espacio en su parte superior e inferior, mientras que en los laterales se le agregará un espacio automático.

Esto hace que el elemento de tipo bloque, se centre automáticamente respecto a su padre.

overflow


#contenedor { overflow: hidden; }

En muchas ocasiones, cuando nuestro sitio carga contenido de manera dinámica, podemos encontrarnos con el caso de que el contenido sobrepasa el espacio proporcionado para el contenedor, es entonces que el texto sale del elemento y afecta la apariencia.

Para evitar esta clase de situaciones, se puede optar por utilizar la propiedad “overflow”, a la cual si le damos el valor “auto” agregará barras desplazadoras cuando sea necesario y si le damos el valor “hidden” simplemente omitirá la información que salga de los limites del elmento y no la presentará.

Esta propiedad, también representa una alternativa para limpiar los elementos de tipo float que manejamos en el DOM.

clearfix

Para todas esas situaciones donde “overflow:hidden” no cumpla con su función de limpiar el espacio dejado por los elementos flotantes, se puede hacer uso de la técnica clearfix, la cual básicamente consiste en agregar esta clase al elemento padre que contiene las estructuras con float.


.clearfix:after {
	content: "";
	display: table;
	clear: both;
}

<div class="clearfix">
   <div></div> <!-- Elemento con float -->
   <div></div> <!-- Elemento con float -->
</div>

color: rgba()


#elemento { color: rgba(0,0,0, 0.5); }

En el pasado muy lejano, para poder utilizar una transparencia colorida se recurría al uso de imágenes de tipo PNG, a las cuales se les agregaba la propiedad alpha para que se traslucieran y el usuario pudiera ver lo que estaba detrás de ellas.

Gracias al uso de colores en “rgba”, podemos agregar un color a un elemento y al mismo tiempo añadir un patrón alpha para establecer la transparente que queramos.

Cue con “RGBa”, definidos el valor en base a la escala de rojo-verde-azul, mientras que el cuatro parámetro se utiliza para definir la transparencia mediante un valor que va del 0 al 1.

input[type=”text”]


input[type="text"] { width: 200px; }

En la lista de sentencias un poco más avanzadas, encontramos “input[type=’text’]”, este selector es realmente útil si queremos englobar todos los elementos de cierto tipo pero que solamente cuenten con cierta propiedad.

En este caso, la sintaxis que estamos usando es para obtener todos los elementos input de tipo texto.

Este tipo de selectores puede ser elaborado con cualquiera de los atributos que maneje el tag, además de que si queremos manejar algo más avanzado, podemos hacer uso de expresiones regulares.

transform: rotate(40deg)


#elemento { transform: rotate(40deg); }

Esta propiedad nos permite manipular la colocación de un elemento, rotando su posición dependiendo de los grados que especifiquemos como parámetro.

Esto resulta bastante interesante, ya que no necesitamos del uso de alguna librería externa o de JavaScript para lograrlo, por lo que en combinación con las transiciones podemos lograr buenos efectos en las animaciones.

7 respuestas

  1. estoy muy de acuerdo. también encuentro problemas a la hora de aplicar un estilo a quién debo aplicárselo.. a la caja, al contenido… jajajaja es un verdadero lío, a veces me desanimo y estoy por dejarlo todo, pero cuando consigo un que una mínima cosa, me salga como yo quiero, me animo de nuevo, es muy gratificante. Supongo que css3 y yo, terminaremos entendiéndonos aunque hablemos distintos idiomas.. gracias me anima ver que mis dudas son comunes.

  2. Muy bueno tus tips Veronica me has aclarado unas dudillas que tenia muchas muchas muchas muchas muchas muchas muchas muchas muchas muchas muchas muchas GRACIAS!!!

Deja una respuesta