Cómo puede usar CSS: consejos y trucos de diseño web para principiantes

Incluso puedes aprender a usar CSS para diseñar tus páginas web con estos consejos de CSS para principiantes.

No necesitas saber nada sobre código de computadora. Todo lo que necesita saber es cómo copiar y pegar.

Pero primero, ¿qué es CSS?

Las hojas de estilo en cascada (CSS) son un código de lenguaje de hojas de estilo que los desarrolladores de temas utilizan para describir y cambiar la presentación o el aspecto de un documento HTML.

¿Qué hace CSS?

En términos simples, el archivo CSS hace que las páginas HTML se vean bien.

No importa qué plataforma de blogs esté utilizando, puede cambiar sus propiedades CSS para que su blog se vea aún mejor.

No importa qué plataforma de blogs utilices.

Tendrá una opción en la configuración de su tema para CSS personalizado o CSS adicional .

Es posible que nunca hayas mirado esta opción.

O, si es así, puede pensar que es demasiado difícil aprender a codificar.

Pero es súper fácil.

No sé nada sobre desarrollo web o sintaxis CSS, pero puedo cambiar un atributo de estilo en segundos.

Todo lo que necesita hacer es usar las herramientas de desarrollo de su navegador web Chrome o Firefox y aprender algunos trucos y consejos simples de CSS.

Veamos lo fácil que es.

¿Por qué querrías aprender a editar el CSS de tu blog?

Probablemente tengas muchas configuraciones en el tema de tu blog.

Pero hay muchos elementos más pequeños que pueden faltar.

Incluso en temas premium para WordPress, algunas opciones no están disponibles en las opciones estándar.

Es por eso que puede ayudar a que su CSS funcione mejor haciendo sus propias ediciones y cambios.

Al cambiar una hoja de estilo externa, puede hacer referencia a todas sus páginas HTML.

Si realiza un cambio en sus encabezados HTML en una página, cambiará la etiqueta HTML en todas sus páginas.

La referencia se llama pseudo-elemento.

Significa que si cambia el aspecto de su encabezado H2, cambiará todos los encabezados H2 en su sitio.

Pero no necesita aprender todo acerca de estas complicaciones.

Todo lo que necesita saber es que funciona y que puede diseñar su blog exactamente como quiere que se vea sin saber nada sobre codificación.

Comencemos con algunos consejos fáciles de CSS para principiantes.

Cómo cambiar fácilmente tu CSS en línea

El primer paso es abrir tu blog en Firefox, Chrome o Microsoft Edge.

En los ejemplos a continuación, he usado Firefox. Lo encuentro un poco más fácil de usar que Chrome.

Pero ambos funcionan de manera similar.

Abre tu blog en una nueva pestaña o ventana. Puede navegar a la página que desea cambiar.

Ahora abra Developer Tools, Inspector, desde el menú Herramientas en Firefox o el menú Ver en Chrome.

Haga clic en Inspector para abrir el panel de herramientas.

Puede seleccionar cualquier elemento de estilo en línea en su página usando la flecha de selección en la parte superior izquierda del panel de herramientas.

Mueva el cursor por la página para seleccionar un elemento. O puede hacer clic en elementos individuales de la lista.

Verá cada elemento que seleccione resaltado en azul en la vista del navegador de su página web.

Ahora está listo para realizar cambios en la apariencia de su página.

Usando el selector de CSS

En mi ejemplo, voy a cambiar el aspecto del elemento de título H2.

Puede optar por cambiar el elemento H1, el texto del cuerpo o la leyenda de una imagen.

Quiero comenzar cambiando el tamaño de fuente. Todo lo que necesita hacer es hacer clic en el tamaño de fuente de la etiqueta de estilo y cambiar el número.

Cambié el tamaño de 33px a 56px. Puede ver que el tamaño del encabezado ahora es más grande.

No te preocupes. No has cambiado tu página de blog en vivo. Lo que ve en el panel de su navegador es solo una vista previa de sus cambios.

Puedes jugar todo lo que quieras con cualquier elemento HTML.

Todo lo que ve en el panel del navegador es solo una vista previa de cómo se verán sus cambios en una regla CSS.

Ahora quiero cambiar el color del texto.

Si hace clic en el punto de color entre la etiqueta de color y el número, abre el selector de color.

Ahora simplemente elige el color que quieres usar.

Es simple cambiar el color de su atributo HTML. Aquí he cambiado de negro a azul.

Se ve bien, pero la altura de la línea podría ser mejor. lo cambiaré

La configuración actual es 1.2, que es demasiado espacio entre líneas. Quiero las líneas más juntas.

Entonces, lo cambiaré a 1.0.

Eso se ve mucho mejor.

He realizado tres cambios en el aspecto de mi rumbo H2 en el modo de vista previa. He cambiado el tamaño de fuente, el color y el interlineado.

Ahora es el momento de agregar estos cambios a mi sitio en vivo.

Cómo obtener el código para su sitio

Debe copiar las líneas de código que ha modificado.

Selecciona y copia todo el código. Asegúrese de copiar todas las líneas, incluido el último paréntesis.

Ahora pégalo en un editor de texto. Puede usar el Bloc de notas en una PC o el Editor de texto en una Mac.

El otro cambio que hicimos fue en el color. Necesitamos copiar esta línea también.

Solo necesita copiar la línea para el color.

Puede ver que el elemento H2 está en negrita en la imagen de arriba. Significa que es el mismo pseudo-elemento que nuestro primer código. Así que puedes usarlos juntos.

Copia la línea.

Ahora agregue la línea a su editor de texto.

Es posible que deba agregar o eliminar algunos espacios para que su línea de color tenga la misma sangría.

Ahora está listo para agregar estos tres cambios a su sitio en vivo.

Agrega el código a tu sitio

Vaya a sus opciones de tema y seleccione sus opciones de CSS.

En los temas de WordPress, está en el Personalizador de temas y se llama CSS adicional o CSS personalizado.

Se llamará algo similar en otras plataformas de blogs.

Ahora copie todo el código de su editor de texto y péguelo en su pestaña de Personalizador.

Tan pronto como pegue el código, su vista previa le mostrará los cambios que ha realizado.

Haz clic en publicar y lo habrás hecho.

Aquí hay una comparación de antes y después de mis cambios.

Puedes hacer mucho más

Mis consejos de CSS para principiantes La introducción paso a paso para editar su estilo HTML CSS es solo el comienzo.

Puedes hacer mucho más si quieres experimentar y tratar de cambiar otros elementos.

Es fácil agregar bordes o sombras a las imágenes, mover el texto hacia la izquierda o hacia la derecha o cambiar el tamaño del ancho del texto del cuerpo.

Puede mover los márgenes o reducir o aumentar el relleno y modificar la alineación.

Hay cientos de opciones que puede elegir para editar.

Recuerde que cuando esté trabajando en las Herramientas para desarrolladores, no afectará su sitio.

Cualquier cambio que realice es una vista previa y solo visual dentro de esa ventana del navegador.

No importa lo que intentes, o si funciona o no.

Piense en ello como un patio de recreo para que aprenda cuánto más puede hacer para diseñar su sitio web o blog.

Sé curioso y te divertirás aprendiendo esta nueva habilidad con estos consejos sobre CSS para principiantes.

Un gran consejo extra con las herramientas para desarrolladores

Ahora que tiene abierto el marco de Herramientas de desarrollador, hay una cosa muy buena que puede hacer.

Puede probar la velocidad de su sitio.

Todo lo que necesita hacer es hacer clic en la pestaña Red.

Luego haga clic en CTRL + R.

Verá el tiempo de velocidad de su página completamente cargada en rojo en la línea en la parte inferior marcada con la flecha.