Blogia
Algar Publicidad Digital

CSS

Aprender CSS es fácil si te lo planteas bien

Incluso con una herramienta como WordPress (que francamente te recomiendo como mejor opción para crear una web “normal” hoy en día) dónde en principio se supone que las miles y miles de plantillas de diseño (temas WordPress) de las las que goza WordPress harían innecesario cualquier conocimiento de CSS, no habrá color entre saber o no saber un poco de CSS.

Tener simplemente unos conocimientos básicos de CSS como los que puedes adquirir en este post y no estar limitado a las opciones de configuración de la plantilla plantilla de turno te llevará a otro nivel en lo que serás capaz de hacer con tu web.

En el caso de WordPress, por ejemplo, saber un poco de HTML y CSS significa que la plantilla ya no marca el techo de lo que puedes hacer con tu blog o tu web basada en WordPress. Incluso con temas gratuitos muy simples y un poco de imaginación y habilidad podrás conseguir unos resultados que te sorprenderán, y mucho.

Aunque una hoja con reglas CSS de una web grande y compleja, como lo puede puede ser este mismo blog, ciertamente puede llegar a intimidar un poco cuando la ves las primeras veces, pero no te asustes: los fundamentos básicos de CSS son muy fáciles de aprender y ya te van a dar mucho juego.

Lo que ocurre simplemente es que se trata de una especificación muy grande y muy potente, de ahí que un diseño CSS profesional puede ser algo realmente muy sofisticado. Pero te aseguro que en el 99% de las ocasiones con un nivel medio-básico te apañarás más que de sobrada y llegar a este nivel de conocimientos, insisto, no es muy complicado si e echas un poco de ganas.

¿Cómo funcionan las hojas de estilo en cascada?

Las hojas de estilo CSS son un conjunto reglas que enumeran en un fichero .css y que describen el aspecto que deben tener los diferentes elementos HTML de una página.

Lo interesante de esto es que funcionan con una filosofía de patrones o plantillas, es decir, no es necesario especificar cada uno de los elementos, sino que se pueden definir reglas como estas dos:

  • “Los títulos de nivel 1 y 2 han de ser de color negro y un tamaño de fuente de 16 y 14 pixeles respetivamente.”
  • “El texto de los párrafos están alineados a la izquierda, tienen un tamaño de fuente de 12 pixeles y un color gris oscuro.”

A modo de comparación, si dominas el uso de estilos en Microsoft Word, verás que que esto se parece mucho al concepto de estilo en Word, aunque las CSS son infinitamente más potentes que Word en todas sus posibilidades.

Veamos un ejemplo concreto de cómo se expresarían las reglas anteriores en el lenguaje de las CSS:

 

Los conceptos clave en las hojas de estilo CSS

Este ejemplo muy sencillo de reglas CSS ya nos sirve perfectamente para habla de los conceptos clave que hay que tener claros en todo esto.

Reglas, selectores y propiedades

En el ejemplo anterior tenemos un total de 3 reglas, cada una se compone de un selector que indican a qué elementos HTML aplica la regla que es el texto que precede a las llaves de apertura y cierre de la regla. En la primera regla, el selector es “h1, h2”, en la segunda “h2” y en la tercera “p”.

Cada regla se compone a su vez de propiedades que especifican qué exactamente se hará con esos los elementos HTML a los que aplica.

El selector de la primera regla, por ejemplo, indica que esta regla se refiere a los elementos HTML

y

y que a ellos se aplicarán el color negro (propiedad “color”) y un tamaño de letra de 16 pixeles al al texto (propiedad “font-size”).

 

Hay cientos de propiedades de las cuales destacaré luego las que, en mi experiencia, me han parecido las más frecuentemente usadas y más útiles. En cuanto a los selectores, los ejemplos han sido triviales puesto que se refieren a a elementos HTML sin más, pero hay formas mucho más sofisticadas de diseñar selectores.

Un ejemplo rápido de esto:

En la primera regla se han anidado dos elementos para indicar que esta regla sólo se refiere a enlaces (etiqueta en HTML) dentro de párrafos de texto (etiqueta

en HTML) y que a estos enlaces se le aplicará un subrayado. Es decir, esta regla no aplica a elementos que no se encuentren dentro de un párrafo (

).

En la segunda regla se ha especificado algo parecido, pero jugando con un elemento y un atributo de clase (ver estos conceptos en el tutorial HTML). Es decir, esta regla aplicará a párrafos que contienen un atributo “class” con el valor “text-izq” tal como éste:

Fíjate que en la regla “text-izq” empieza con con un punto. Es la manera de especificar en el lenguaje CSS que “text-izq” se refiere a un atributo de clase.

No voy a profundizar más aquí puesto que este post no pretende ser un curso completo de CSS. Sin embargo, ya sólo con esto ya tienes cierto juego y creo que puedes ver la filosofía de cómo funcionan los selectores y qué pretenden. Para profundizar en el tema selectores te recomiendo esta referencia sobre los selectores básicos y esta otra sobre los avanzados.

MULTIPLICA EL Nº DE CLICS EN TUS CONTENIDOS

Con este eBook gratuito de plantillas de copywriting crearás titulos que dispararán los clics en tus contenidos:

  • 77 Plantillas de títulos probadas que multiplicarán los clics.
  • Sacaras infinitas ideas crear tus propios propios  títulos.
  • Con las palabras "mágicas" redactarás textos irresistibles.
  • Vale para todo: blogs, tiendas onlineredes sociales, etc.

La cascada: herencia, sobreescritura y conflictos de estilos

El nombre de hojas de estilo en “cascada” no es casual, expresa que los estilos que especifican con reglas se pueden heredar de una manera jerárquica.

Es decir, veamos esta regla:

Aquí estamos diciendo que la etiqueta que es la que envuelve el contenido de cualquier página web tenga un tipo de letra “Arial”. Esto no tendría mucho sentido si no fuera porque gracias a la capacidad de herencia de las reglas de este modo por defecto cualquier elemento hijo como un título o un párrafo va a “heredar” ese estilo, salvo que especifique lo contrario como, por ejemplo, en esta regla:

En esta última regla aplica el principio de “especificidad”. En principio, se plantearía un conflicto entre la regla general de con lo que dice la regla de

, pero se resuelve fácilmente puesto que se aplica la regla más específica y referirse a un párrafo es más específico que referirse a “los elementos hijos que pueden dentro de ”.

Igualmente, una regla con un selector “p a” (enlace dentro de un párrafo) tendría precedencia sobre una regla con un selector “a” que se refiere a un enlace a secas.

De nuevo, sabiendo esto, te apañaras bien en el 99% de los casos. Pero lo cierto es que el tema de la precedencia de las reglas entre sí tiene cierta tela, si lo quieres conocer más a fondo, échale un vistazo a esta referencia.

Un ejemplo práctico

Ahora que creo que ya vas viendo cómo funciona esto, te propongo un un pequeño ejercicio práctico para jugar un poco con tus nuevos conocimientos: modificar el diseño este blog cambiando una de sus reglas CSS, concretamente el color de los títulos de los posts. Y tranquilo: el cambio sólo afectará a la página en tu navegador, mi blog no sufrirá daños 🙂

Para ello te propongo utilizar la herramienta de inspección de código que traen consigo las versiones actuales de los navegadores FireFoxChrome e Internet Explorer. Con ellas puedes ver y manipular el código de una página web tanto a nivel de HTML como a nivel de CSS de una manera realmente cómodo e intuitiva.

En cualquiera de estos navegadores se activa la herramienta con F-12, en el ejemplo he usado Firefox que es la que más me gusta en conjunto, aunque utilizo también mucho la de Chrome.

Para que te sea más fácil seguir lo que viene a continuación te dejo un vídeo-tutorial de esta herramienta, el interfaz de usuario ha cambiado ligeramente con respecto a la versión utilizada en el vídeo, pero te podrás hacer perfectamente una idea:

 

El ejercicio que te propongo es cambiarle el color a los títulos

 de los posts en este blog.

 

Para ello, necesitamos encontrar la(s) regla(s) CSS que determina(n) la estética de estos títulos. Gracias a estas herramientas esto es tan simple como realizar los siguientes 4 pasos pasos que puedes ver en la captura de abajo:

  1. Activar el selector de elementos con el icono al que apunta la flecha en el paso 1.
  2. Una vez activado, puedes colocar el ratón sobre el elemento a examinar. En Firefox me gusta particularmente cómo los resalta. Además puedes ver cómo en el cuadro indica que el selector empleado en el HTML es “h1.entry-title”, es decir, aplican las reglas para etiquetas

    y la clase “entry-title”. Luego vemos estos conceptos un poco más despacio.

  3. Dentro del árbol de código HTML, se ha identificado el elemento HTML exacto que has seleccionado antes con el ratón. Fíjate como concuerda con las reglas CSS.
  4. En el lado derecho se listan todas las reglas que concuerdan con el elemento 

    y la clase “entry-title” que corresponden al elemento HTML seleccionado. Los blogs WordPress suele tener muchas reglas CSS de diferentes ficheros, por eso verás que salen varias reglas. Lo importante es que el orden de prioridad es de arriba abajo.

Echa ahora un vistazo con calma a la siguiente captura de pantalla y observa cómo se reflejan estos cuatro pasos en ella. Intenta reproducirlos en tu ordenador. si Si usas Chrome o Internet Explorer te costará algo más porque sus interfaces de usuario varían algo, pero el proceso y resultados son idénticos.

captura inspector código firefox

Los inspectores de código incorporados en los navegadores son tremendamente útiles cuando se trabaja con HTML y CSS.

Ahora toca modificar el título. Para ello vamos a modificar la siguiente regla:

Añadimos una línea (haz clic con el ratón justo justo delante de “font-size” y podrás editarla) para que quede así:

El resultado estético es discutible, pero desde luego nadie nadie podrá discutir que el cambio se ve con claridad 🙂

Si te interesa el tema blogging, tampoco te pierdas nuestra recopilación de los mejores recursos para blogs & bloggers

Propiedades básicas que deberías conocer

Ahora que conoces la filosofía básica y conoces también una herramienta magnífica para experimentar con CSS como lo son las herramientas de inspección de código de los navegadores, simplemente probando propiedades interesantes, ya podrás hacer un montón de cosas, por eso, te dejará una lista de lo que me parecen las propiedades más útiles.

Como temas WordPress premium te recomiendo Divi y GeneratePress

Consulta también aquí las mejores plantillas WordPress

Solamente adjunto una descripción muy breve a cada una, la descripción detallada la encuentras en sus respectivos enlaces.

Mi consejo es: juega un poco con las siguientes propiedades y diferentes selectores para ver qué pasa. Cuánto más simple, mejor al al principio. Ahora bien, no te quedes para siempre en el “trasteo”, si quieres aprender CSS como es debido, has has de hacerlo con un poco de orden por lo que te recomiendo que, después de una fase de jugar y experimentar, lo aprendas de una manera más estructurada con el material que te aporto al final del post.

1. Maquetación básica

  • width: Ancho de un elemento.
  • height: Alto de un elemento.
  • vertical-align: Alineamiento vertical dentro de un elemento.
  • margin: Espacio que se añade entre el elemento y sus vecinos. Se se puede diferencia por lado (arriba, abajo, izquierda, derecha).
  • padding: Relleno interior que se añade en los bordes del A diferencia de margin, cuenta para el tamaño del elemento.
  • float: Mueve el elemento todo lo posible hacia el lado indicado. Esta propiedad se usa en el posicionamiento flotante de CSS. El tema del posicionamiento en CSS no es trivial y conviene estudiar cómo funciona antes de usar esta propiedad.

2. Fuentes y texto

3. Color y fondos

  • color: Color del elemento. Se puede especificar en diferentes formatos como palabras predefinidas (red, green, etc.) RGB o como valor hexadecimal.
  • background-color: Color del fondo del elemento.
  • background-image: Permite especificar una imagen de fondo.
  • background-repeat: Permite usar una imagen a modo de mosaico en diferentes modalidades.
  • box-shadow: Crear un efecto de sombra para un elemento.

4. Listas

  • list-style-image: Usar la imagen especificada como viñeta para para la lista.
  • list-style-type: Diferentes estilos de viñetas y estilos de numeración para elementos de lista.

5. Bordes

  • border: Añade un borde a un elemento y establece algunas algunas propiedades (grosor, estilo de línea, etc.)
  • border-color: Color del borde.
  • border-style: Diferentes estilos para el borde (sólido, puntos, etc.)
  • border-radius: Permite crear esquinas redondeadas para un elemento.

Vincular los estilos CSS a páginas HTML

Ya sabes cómo crear reglas CSS, ¿pero cómo se aplican a una página HTML?

Para ello tienes básicamente 3 opciones:

1. Hojas de estilo CSS inline

La primera opción consiste en usar el atributo “style” en un elemento HTML tal como se puede ver aquí:

En este caso, no hay selector puesto que no hay elemento que seleccionar, es el que es. Por tanto, se especifican simplemente las propiedades a aplicar al elemento en cuestión. Este tipo de reglas tienen mayor prioridad de todas las reglas.

Se suele recomendar encarecidamente evitar esta manera de vincular estilos CSS puesto que al tener que aplicarse a cada elemento individualmente, implican un esfuerzo y mantenimiento disparatado.

No obstante, hay casos de uso muy concretos en los que son prácticas. Por ejemplo, en un widget sencillo de WordPress que permita configurar directamente ciertas ciertas propiedades CSS desde su interfaz de configuración puede ser una buena opción implementar estas propiedades con esta técnica.

2. Hojas de estilo CSS internas

La segunda opción es escribir las reglas dentro de un elemento elemento. dentro de esta etiqueta que, a su vez, se encontraría dentro del elemento <head> de la página HTML.</p><p>Obviamente la desventaja es que en este caso las reglas sólo son visibles para esa página concreta en las que se han declarado y no se pueden usar para otras páginas.</p><h3><span>3. Hojas de estilo CSS externas</span></h3><p>La última opción es la más usad y consiste en crear uno o varios ficheros con extensión “.css” en los cuales se declaran las reglas CSS.</p><p>La manera de vincular estas reglas a una página HTML consiste en referencia el fichero .css desde esa página. De este modo se puede crear un fichero global para una web entera y usarlo en todas las páginas que se quiera.</p><p>En este caso, la declaración también se incluye dentro del elemento <head> y tiene el siguiente aspecto:</p><div class="crayon-syntax crayon-theme-classic crayon-font-courier-new crayon-os-pc print-yes notranslate crayon-wrapped" id="crayon-5e0a19824f41f249102713"><div class="crayon-plain-wrap"></div><div class="crayon-main"><table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums "><div class="crayon-nums-content"><div class="crayon-num">1</div><div class="crayon-num crayon-striped-num">2</div></div></td><td class="crayon-code"><div class="crayon-pre"><div class="crayon-line" id="crayon-5e0a19824f41f249102713-1"><span class="crayon-ta"><link </span><span class="crayon-e ">rel</span><span class="crayon-i ">="stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span><span class="crayon-i ">="text/css"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span><span class="crayon-i ">="/css/estilos-1.css"</span><span class="crayon-h"> </span><span class="crayon-i ">/></span></div><div class="crayon-line crayon-striped-line" id="crayon-5e0a19824f41f249102713-2"><span class="crayon-ta"><link </span><span class="crayon-e ">rel</span><span class="crayon-i ">="stylesheet"</span><span class="crayon-h"> </span><span class="crayon-e ">type</span><span class="crayon-i ">="text/css"</span><span class="crayon-h"> </span><span class="crayon-e ">href</span><span class="crayon-i ">="/css/estilos-2.css"</span><span class="crayon-h"> </span><span class="crayon-i ">/></span></div></div></td></tr></tbody></table></div></div><p>Aquí hay que tener también en cuenta que en el caso de usar varios ficheros el orden de inclusión marca precedencia en el orden inverso. En el caso de existir un conflicto por haber diferentes reglas con igual selector en varios ficheros, las reglas de los ficheros siguientes sobreescriben los anteriores.</p><p>Es decir, si en estilos-1.css tenemos una regla  como:</p><div class="crayon-syntax crayon-theme-classic crayon-font-courier-new crayon-os-pc print-yes notranslate crayon-wrapped" id="crayon-5e0a19824f423600246746"><div class="crayon-plain-wrap"></div><div class="crayon-main"><table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums "><div class="crayon-nums-content"><div class="crayon-num">1</div><div class="crayon-num crayon-striped-num">2</div><div class="crayon-num">3</div></div></td><td class="crayon-code"><div class="crayon-pre"><div class="crayon-line" id="crayon-5e0a19824f423600246746-1"><span class="crayon-k ">p a </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5e0a19824f423600246746-2"><span class="crayon-h">  </span><span class="crayon-e ">text-decoration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">underline</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5e0a19824f423600246746-3"><span class="crayon-sy">}</span></div></div></td></tr></tbody></table></div></div><p>Y luego en estilos-2.css otra que dice:</p><div class="crayon-syntax crayon-theme-classic crayon-font-courier-new crayon-os-pc print-yes notranslate crayon-wrapped" id="crayon-5e0a19824f425213154772"><div class="crayon-plain-wrap"></div><div class="crayon-main"><table class="crayon-table"><tbody><tr class="crayon-row"><td class="crayon-nums "><div class="crayon-nums-content"><div class="crayon-num">1</div><div class="crayon-num crayon-striped-num">2</div><div class="crayon-num">3</div><div class="crayon-num crayon-striped-num">4</div></div></td><td class="crayon-code"><div class="crayon-pre"><div class="crayon-line" id="crayon-5e0a19824f425213154772-1"><span class="crayon-k ">p a </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-5e0a19824f425213154772-2"><span class="crayon-h">  </span><span class="crayon-e ">text-decoration</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">none</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-5e0a19824f425213154772-3"><span class="crayon-h">  </span><span class="crayon-e ">color</span><span class="crayon-sy">:</span><span class="crayon-h"> </span><span class="crayon-i ">blue</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-5e0a19824f425213154772-4"><span class="crayon-sy">}</span></div></div></td></tr></tbody></table></div></div><p>La propiedad “text-decoration” genera un conflicto que se resuelve dando prioridad a la propiedad de estilos-2.css.</p><div class="wppm-banner">Si tienes un blog <span>WordPress</span>, tampoco te pierdas nuestra <span>recopilación</span> de los <span><a href="https://www.ciudadano2cero.com/go/recursos/plugins" _mce_href="https://www.ciudadano2cero.com/go/recursos/plugins" target="_blank">mejores plugins de WordPress</a></span></div><h2><span>Personalizar CSS en blogs: WordPress y Blogger</span></h2><p>Como la gran mayoría de los lectores de este post son bloggers, es obligada una pequeña referencia del tema CSS en blogs. Solamente haré unos breves apuntes ya que en su momento dedicaré un post específico a cómo personalizar blogs usando CSS.</p><h3><span>CSS en Blogger</span></h3><p>Si tienes un blog en Blogger estás de suerte porque uno de los puntos más fuertes de esta plataforma gratuita es que <span>te permite trabajar directamente con HTML y CSS</span> para personalizar tus plantillas. Por tanto, en Blogger lo tienes fácil.</p><p>Aquí te dejo un vídeo con un pequeño tutorial que explica cómo se hace esto:</p><p><br /></p><h3><span>CSS en WordPress.org</span></h3><p>En el caso de <a href="https://www.ciudadano2cero.com/que-es-wordpress/" _mce_href="https://www.ciudadano2cero.com/que-es-wordpress/" target="_blank">WordPress.org</a> (la versión descargable que se instala en un hosting propio) también lo tienes muy fácil. El famoso plugin <a href="http://jetpack.me/" _mce_href="http://jetpack.me/" target="_blank">Jetpack</a> trae entre sus +30 módulos uno que permite editar reglas CSS que se añadirán a WordPress. Por otra parte, está también el plugin <a href="https://wordpress.org/plugins/simple-custom-css" _mce_href="https://wordpress.org/plugins/simple-custom-css" target="_blank">Simple Custom CSS</a>, una alternativa muy interesante a Jetpack que sólo implementa esta funcionalidad y, por tanto, bastante más ligero que Jetpack.</p><p>Te recomiendo encarecidamente alguno de estos plugins para crear estilos CSS para tu blog WordPress y que <span>no toques directamente el código del tema</span> (normalmente el fichero style.css que viene entre los ficheros del tema) como hace mucha gente alegremente una vez que aprenden un poco de esto.</p><p>La razón es que, primero, con cada actualización del tema se macharían tus cambios y, segundo, que tu personalización la pierdes también en el momento que cambies de tema. Con los plugins evitas estos problemas.</p><div class="wppm-banner"><p>Si necesitas un <span>hosting</span> para tu web o tu blog, ¡actúa!</p><div><ul><li><span>Raiola Networks</span>: con un <a href="https://www.ciudadano2cero.com/go/raiola" _mce_href="https://www.ciudadano2cero.com/go/raiola" target="_blank">20% de descuento aquí</a></li><li><span>Webempresa</span>: con un <a href="https://www.ciudadano2cero.com/go/webempresa" _mce_href="https://www.ciudadano2cero.com/go/webempresa" target="_blank">25% de descuento aquí</a></li><li><span>SiteGround</span>: con un <a href="https://www.ciudadano2cero.com/go/siteground" _mce_href="https://www.ciudadano2cero.com/go/siteground" target="_blank">60% de descuento aquí</a></li></ul></div></div><h3><span>CSS en WordPress.com</span></h3><p>En <a href="https://www.ciudadano2cero.com/go/wpcom/" _mce_href="https://www.ciudadano2cero.com/go/wpcom/" target="_blank">WordPress.com</a>, la plataforma gratuita que no requiere hosting propio, por desgracia, una de sus limitaciones es que, por defecto, <span>no puedes trabajar directamente con estilos CSS</span>.</p><p>Para poder hacer esto tienes que pagar por una mejora llamada <span><a href="http://store.wordpress.com/premium-upgrades/custom-design/" _mce_href="http://store.wordpress.com/premium-upgrades/custom-design/" target="_blank">Custom Design</a></span> la cual te permite personalizar fuentes y crear estilos CSS propios.</p><h2><span>Referencias para profundizar más</span></h2><p>Espero que este post te haya permitido atisbar el potencial que tienen los estilos CSS. Si te ha llamado la atención el tema y quieres aprender a fondo a usar estilos CSS, te recomiendo los siguientes recursos:</p><ul><li><span><a href="http://librosweb.es/css/" _mce_href="http://librosweb.es/css/" target="_blank">Introducción a CSS</a></span>: Un magnífico libro online y gratuito de librosweb.es, totalmente recomendable para principiantes. Aunque ya tiene unos años me sigue pareciendo muy bueno para empezar y llegar de conocimiento medio que ya permite hacer cosas muy serias.</li><li><span><a href="http://librosweb.es/css_avanzado/" _mce_href="http://librosweb.es/css_avanzado/" target="_blank">CSS avanzado</a></span>: La versión avanzada del libro anterior.</li><li><span><a href="http://css-tricks.com/" _mce_href="http://css-tricks.com/" target="_blank">CSS Tricks</a></span>: Un blog genial (en inglés) sobre trucos y todo tipo de virguerías en CSS. Ya es para lectores de nivel avanzado.</li><li><span><a href="http://reference.sitepoint.com/css" _mce_href="http://reference.sitepoint.com/css" target="_blank">Referencia de CSS de Sitepoint</a></span>: Mi sitio preferido para consultar y buscar propiedades y cómo utilizarlas.</li><li><span><a href="http://www.csszengarden.com/" _mce_href="http://www.csszengarden.com/" target="_blank">CSS Zen Garden</a></span>: el famosísimo sitio de demostración de las posibilidades de CSS que cuenta con muchísimo diseños para dar ideas, algunos son espectaculares.</li><li><span><a href="http://www.w3.org/Style/CSS/" _mce_href="http://www.w3.org/Style/CSS/" target="_blank">La página de la W3C sobre CSS</a></span>: La página oficial de CSS, es decir, del organismo de normalización responsable del estándar.</li></ul><p><br /></p><p>Autor: <a href="https://www.ciudadano2cero.com/aprender-css-basico-desde-cero/" _mce_href="https://www.ciudadano2cero.com/aprender-css-basico-desde-cero/">https://www.ciudadano2cero.com/aprender-css-basico-desde-cero/</a></p>

0 comentarios