10 sencillos consejos para aprender CSS para WordPress

Aprender CSS puede ser abrumador, especialmente cuando no sabes por dónde empezar y qué términos buscar cuando te quedas atascado.

Dado que CSS es un lenguaje de estilo y no un lenguaje de programación completo como Javascript o PHP, en realidad es bastante simple de aprender, especialmente si tiene algún conocimiento de HTML en su haber (que supongo que tiene para los propósitos de esta publicación).

En nuestra encuesta de blog, un número abrumador de ustedes mencionó que quería mejorar su juego y familiarizarse más con CSS y es por eso que recientemente publicamos una lista de más de 150 recursos para aprender CSS, que debería ayudarlo a comenzar, especialmente en conjunto con esta publicación.

Hoy, les mostraré el flujo de trabajo y los consejos que me ayudaron a aprender CSS cuando comencé hace muchos años. Comience con el consejo uno y avance hacia abajo en la lista hasta el dominio de CSS.

Continúe leyendo, o avance usando estos enlaces:

• Construcción básica
• Practique con selectores y propiedades simples
• Memoriza el modelo de caja
• Aprender haciendo
• Organizar contenido por ancho y alto
• Flotadores y Posicionamiento
• CSS avanzado
• Replicar un sitio con CSS
• preprocesadores
• Marcos

1. Construcción básica

Lo primero es lo primero: para aprender a escribir su propio CSS, necesita saber cómo formatearlo correctamente. En realidad, hay dos formas correctas de hacer esto, pero una de ellas te ayuda a mantenerte más organizado.

Dado que es común que HTML sea el primer idioma que las personas aprenden cuando quieren trabajar con sitios de WordPress, es útil aprender la sintaxis de CSS escribiéndola primero de manera similar a HTML.

Aquí está la estructura básica que toma CSS:

Es bastante simple cuando no hay muchos estilos que desea implementar para un elemento en su sitio, pero cuando comienza a familiarizarse con CSS, necesitará mucho más de un estilo para un elemento y ahí es donde un una estructura como esta puede ensuciarse rápidamente.

Es por eso que existe una forma más eficiente y organizada de escribir tu CSS:

Ahora puede comenzar a profundizar en los términos que se utilizan en este ejemplo. Cada uno de estos términos son los componentes básicos de CSS: clase, ID, selector, propiedad y valor. Las propiedades y los valores también forman lo que se llama una declaración.

Este es un excelente punto de partida para aprender a escribir su propio CSS y una vez que comience, puede preguntarse dónde debe escribir todo esto dentro de sus archivos de WordPress.

En su instalación de WordPress, cualquier archivo que vea que termine en .css es un archivo CSS, como probablemente ya haya adivinado. El archivo principal que debe buscar es su hoja de estilo y está etiquetada como style.css . Aquí es donde se mantiene la mayor parte o todo el diseño de su tema en términos de colores, fuentes, imágenes básicas y posiblemente parte del diseño de su tema.

También puede notar un archivo en un tema prefabricado llamado custom.css y aquí es donde generalmente les gustaría que hiciera cambios en el tema. Cuando realice cambios en este archivo, debería sobrescribir los estilos existentes en la hoja de estilo del tema.

Si agrega complementos a su tema, también pueden venir con archivos CSS en su carpeta y se usan para diseñar la apariencia del complemento.

2. Practica con selectores y propiedades simples

El siguiente paso es aprender sobre selectores y propiedades básicos y cómo funcionan en un tema. Selectores como h1 , h2 y h3 para encabezados y p para texto de párrafo, por ejemplo, así como propiedades como font-family y background-color .

Hay una manera fácil de practicar estas nuevas habilidades y ver los cambios que está realizando, sin tener que iniciar su propio blog de WordPress. W3Schools tiene mucha información sobre CSS, así como ejemplos en vivo en los que puede cambiar su código y, con solo presionar un botón, puede ver instantáneamente los cambios que realizó.

Cuando vea un ejemplo, simplemente haga clic en el botón Pruébelo usted mismo y se abrirá una ventana donde podrá probar algunos CSS básicos.

3. Memoriza el modelo de caja

Soy partidario de hacer referencia a las piezas de información más comunes en lugar de memorizarlas todas. Tal vez sea porque encuentro que mi memoria me falta la mayor parte del tiempo, pero preferiría decir que es porque hay tantas referencias maravillosas en línea.

Puede buscar fácilmente selectores y propiedades que no conoce en un santiamén. Todo lo que necesita es una simple consulta a su motor de búsqueda favorito, como Google o Bing, y toda la información que necesita está a solo un clic de allí.

Afortunadamente, no es difícil de aprender y, con toda honestidad, si puedo memorizarlo, tampoco deberías tener problemas con él. En esencia, incluye un área de contenido, relleno, borde y margen.

4. Aprende haciendo

Una vez que comience a familiarizarse con CSS, es una gran idea ponerlo en práctica eligiendo un tema que tenga un diseño completamente básico y cambiando su estilo editando su hoja de estilo.

Es importante comprender cómo los cambios simples pueden afectar un tema drásticamente a veces y otras veces no tanto. En última instancia, practicar tanto como pueda lo ayudará a ver visualmente los cambios que realiza y conectar sus acciones de escritura de código con el resultado final.

En el esquema más amplio de las cosas, una vez que pueda conectar los puntos, no solo puede escribir CSS rápidamente, sino que también debería poder solucionar problemas en el futuro, lo que se convierte en una tarea crítica para el diseño y desarrollo web.

Aquí hay algunos temas excelentes para practicar que puede instalar en su sitio de WordPress de forma gratuita. No todos son representaciones perfectas de cómo debe verse y funcionar necesariamente un tema, pero todos son excelentes puntos de partida para aprender cómo puede cambiar un tema con CSS simple.

espectro blanco

El tema White Spektrum es un tema simple con un diseño común que incluye el área de contenido principal, la barra lateral, el encabezado y el pie de página.

Aparte de un toque de color cuando se trata de fuentes y enlaces, es un tema sencillo y sencillo con el que trabajar.

Fundador

Una vez que comience a comprender realmente CSS, el tema Founder es excelente para echar un vistazo debajo del capó y echar un vistazo a su hoja de estilo, ya que es un poco más complejo que los otros temas enumerados hasta ahora. Es receptivo, accesible y listo para traducir, incluye un icono de hamburguesa para pantallas móviles, así como muchos otros detalles de diseño CSS que son excelentes para estudiar.

Incluso con estos temas minimalistas anteriores, es posible que aún te sientas un poco abrumado con la cantidad de cosas que aún no reconoces y eso está bien. A medida que marque cada sección de esta publicación, todo debería comenzar a unirse un poco más.

5. Organice el contenido por ancho y alto

Una vez que haya instalado uno de estos temas, también puede comenzar a cambiar el diseño ingresando diferentes longitudes y anchos de áreas de contenido y selectores.

Es un precursor del siguiente paso y lo familiariza con las diferentes áreas de diseño en un tema de WordPress.

6. Flotadores y Posicionamiento

Aquí es donde CSS tiende a complicarse un poco, ya que puede crear un diseño únicamente con CSS y, en particular, con flotadores y posicionamiento. El problema es que estas propiedades no están diseñadas para crear diseños completos y existe un borrador para actualizar los diseños CSS.

Por ahora, esta es una forma común en que muchas personas obtienen su diseño correctamente . Es una gran idea observar los temas que ya existen, incluida la lista anterior, y ver cómo difieren con el uso de flotantes y posiciones.

7. CSS avanzado

En este punto, realmente estás empezando a familiarizarte con CSS, pero hay mucho más por descubrir:

• Pseudoclases : se utilizan para definir un estado específico de un elemento, como al pasar el mouse por encima y colocar imágenes en un lugar específico relevante para otros elementos.
• Selectores complejos : puede ser aún más específico con el estilo utilizando selectores más avanzados.
• Animaciones CSS3 : crea un desvanecimiento, un pop u otras transiciones cuando pasas el mouse sobre las imágenes y los botones.
• Capacidad de respuesta con consultas de medios CSS3 : una de las formas más fáciles de crear un tema receptivo es mediante consultas de medios.
• Transforma : controla el tamaño y la forma de las áreas de contenido seleccionadas.
• Reglas at : se utilizan para importar cosas como fuentes y hojas de estilo en su tema.
• Gradientes : agregue un degradado a su tema sin necesidad de usar una imagen.

Estos son muchos de los elementos en los que realmente puede comenzar a ver cómo toma forma el diseño de su tema. Es el momento perfecto para empezar a poner a prueba tus habilidades.

8. Replicar un sitio con CSS

Con todo este conocimiento en su cinturón, es posible que necesite obtener un cinturón más resistente, pero lo que es más importante, puede poner en práctica sus habilidades usando un shell básico de un tema y agregando sus propios estilos CSS desde cero.

Una de las cosas más útiles que puede hacer para avanzar en su aprendizaje es practicar su conocimiento en aplicaciones del mundo real. Recomiendo tratar de encontrar un sitio que le guste y luego replicarlo lo mejor que pueda con CSS en un tema de WordPress en blanco.

Claro, es probable que no pueda obtener todo perfecto y probablemente haya muchos elementos que no podrá replicar solo con CSS, pero es una excelente manera de sentirse cómodo con CSS.

Aquí hay algunos temas de inicio geniales y gratuitos que puede usar:

• Pizarra en blanco

  

  Esto es tan básico como se pone. Solo hay HTML5 en este tema, por lo que puede agregar su CSS sin preocuparse por los estilos que chocan. Sin embargo, viene con todo lo que necesitas para comenzar a diseñar tu tema.

• HTML5 en blanco

  

  HTML5 Blank es un tema de WordPress repetitivo que incluye algo de estilo, aunque no mucho. Es un gran comienzo si no está muy interesado en comenzar su CSS desde cero.

• guiones bajos

  

  Si eres un poco aventurero y quieres probar un tema de inicio más avanzado, Underscores es una excelente opción, aunque no para los débiles de corazón, ya que viene con dos estilos de muestra de tema precargados. También incluye algunas técnicas avanzadas y codificación que lo convierten en una excelente herramienta de aprendizaje.

También está el tema Restablecer HTML5 de WordPress en GitHub. Incluye características que son un poco más avanzadas, pero eso es en última instancia lo que lo convierte en un tema de inicio valioso.

9. Preprocesadores

Una vez que conozca los entresijos de CSS, es una gran idea aprender sobre los preprocesadores y, en particular, SASS y LESS. Ambos ayudan a organizar su CSS para que sea mucho más fácil de escribir y más accesible para ediciones futuras.

Los preprocesadores hacen que su CSS sea limpio y fácil de seguir y se ha convertido rápidamente en una habilidad esencial entre los desarrolladores web. Si bien existe un debate en curso sobre cuál es el mejor, SASS tiende a ser el preprocesador más utilizado hasta la fecha.

Si desea probar SASS en el contexto de WordPress, consulte el tema Bones. Se compone principalmente de HTML5, por lo que puede intentar diseñar con la parte integrada de SASS que ya está incluida.

10. Marcos

En el desarrollo web, los marcos son una estructura para crear sitios web dinámicos. En última instancia, el objetivo de un marco es hacer que los sitios sean más rápidos sin perder funcionalidad.

Una vez que domines CSS, puedes acelerar el desarrollo de tu tema utilizando un marco.

Uno de los frameworks más populares es Twitter Bootstrap. Está creado para responder desde el primer momento y utiliza tanto SASS como LESS, así como muchos componentes CSS personalizados.

Terminando

Armado con un plan de estudios para aprender y con los consejos para ayudarlo en el camino, CSS no debería ser demasiado abrumador para que pueda manejarlo. Además, debería estar listo ahora para intentar diseñar su propio tema de WordPress.

Para obtener más recursos sobre cómo aprender CSS y WordPress, consulte algunas de nuestras otras publicaciones: Una megaguía para aprender y hacer referencia a CSS para WordPress: más de 150 recursos y De principiante a profesional de WordPress: más de 200 recursos para impulsar su carrera.

• CSS