Cualquiera que tenga un sitio de WordPress, en algún momento, se encontrará con una situación en la que necesitará alterar parte del código. 

Eso no quiere decir que se espere que sea un desarrollador web, escribiendo JavaScript y PHP como un profesional. Lo más probable es que tengas que jugar con HTML y CSS básico, los fundamentos de cualquier página web, WordPress o no.

1. Selectores, clases e ID

En CSS, la base de todo es un selector . En pocas palabras, es una abreviatura que le dice al código a qué apuntar. Puede orientar todos los párrafos individuales del sitio con una p {} . (Cualquier código que se aplique al selector se coloca entre llaves). En muchos casos, estos selectores de elementos se alinearán con las etiquetas HTML con las que se crea la página web (como p {} segmentación <p> o h2 {} y < h2> ).

Después de eso, tienes clases . Estos son tipos específicos de selectores que usted (o su propio tema / WP) define. Si desea orientar solo los encabezados H1 para las publicaciones, es posible que tenga .post-title {}. Un selector de clases de CSS se indica con un punto / punto delante del propio selector. Estos se utilizan para apuntar a elementos de todo el sitio, pero no a los elementos fundamentales, como un H1 simple. Tenga en cuenta que los selectores base no tienen un punto u otro indicador, lo que significa que son el HTML base.

Los ID en CSS funcionan exactamente igual que una clase. Excepto por dos pequeñas diferencias. Se indican con un # delante del selector y se nombran para una instancia única y específica (o un número limitado de instancias) de un elemento que necesita un estilo especializado. Como # email-subscribe-about-page {} o # email-subscribe-after-post {}. Estos ID indican que en lugar de apuntar a un tipo específico de elemento, ellos mismos seleccionan elementos individuales.

p { 

  color: red;

} 

.class { 

 color: white;

} 

#id { 

 color: blue;

}

Otros selectores

Dado que estamos discutiendo los conceptos básicos de CSS, no vamos a sumergirnos en los selectores más complejos, pero existen. También puede apuntar a lo que se denominan pseudoclases que solo pueden aplicarse cuando se coloca el cursor sobre un enlace. O un selector de atributos que solo apuntará a elementos que tengan un parámetro particular adjunto. Además, puede habilitar el CSS para que sea relativo a la posición de un elemento usando p :: after e img :: before.

Estos pueden ser increíblemente avanzados y complejos de hacer bien, por lo que para aprender los conceptos básicos, no es algo de lo que deba preocuparse. Sin embargo, queríamos que supiera que hay formas mucho más específicas de interactuar con el documento.

2. Dos puntos y punto y coma

Mencionamos anteriormente que todo el código CSS está entre llaves. Sin embargo, dentro de esas llaves, cada línea de personalización debe terminar con un punto y coma (;) . Eso le indica al navegador que el estilo en particular está completo. El espaciado no importa con CSS excepto por la legibilidad, pero el punto y coma en sí no es negociable.

Además, entre el estilo CSS real y el valor, coloca dos puntos regulares (:) . Nuevamente, el espaciado aquí no importa en absoluto . Puede tener espacios en un lado, en ambos o ninguno, y el CSS aún se procesará.

Tenga en cuenta que si bien puede dejar estos espacios, generalmente se acepta que no debe hacerlo. Sin embargo, con la mayoría de los sitios web y temas que ofrecen minificación de CSS , todos los espacios se eliminan independientemente.

3. Comentarios CSS

Si necesita incluir documentación en el código CSS, puede hacerlo con comentarios. Los comentarios CSS se abren y cierran con los símbolos / * y * / . Comentar su código es importante no solo para que vuelva al CSS más adelante, sino también para los desarrolladores posteriores. En general, los comentarios CSS se utilizan para indicar lo que hace un fragmento en particular.

Puede ver arriba que el código solo dice lo que hace el siguiente fragmento. Es muy importante seguir haciendo esto, ya que su archivo CSS puede complicarse mucho con el tiempo.

 /* This is what a CSS Comment Looks Like */ 

img { display:none;}

4.! Importante

Es difícil exagerar lo importante que puede ser la etiqueta ! Important para CSS. Juego de palabras intencionado. Es uno de los elementos de CSS más utilizados , pero también es uno de los elementos más mal utilizados y abusados.

Verá ,! Important declara que sea cual sea la línea en la que se encuentre, anulará cualquier otro estilo para ese selector. En cualquier lugar de la hoja de estilo. Entonces, si desea asegurarse de que un elemento en particular siempre tenga un color en particular, usaría ! Important para hacerlo. Asegúrese de tener en cuenta que toda la etiqueta ! Important va entre el valor y el punto y coma, no después.

#author-name { color:red!important;} 

#author-name { color:blue;}

5. pantalla: ninguna;

Este fragmento de CSS en particular es uno de los más importantes que deben aprender los recién llegados. Todo lo que hace es hacer que cualquier elemento al que apuntes simplemente desaparezca. Por ejemplo, si necesita que una página no tenga un menú de encabezado, por ejemplo, simplemente debe poner este código en:

Hacer esto con una clase que aparece en casi todas las páginas puede eliminarla por completo del sitio. Por lo tanto, debe tener cuidado con lo que aplica esto.

Puede usar esto en publicaciones o páginas específicas de WordPress para eliminar elementos individuales, como los metadatos, de la publicación en sí. En Divi, puede personalizar el módulo de blog individual para que no tenga el extracto de la publicación usando este código:

 .home-page-blog 

.post-content { display:none;}

6. visibilidad: oculta;

Muy brevemente, también puede utilizar la visibilidad: oculta; CSS para eliminar un elemento de la pantalla. Tenga en cuenta que hay una diferencia entre esto y la pantalla: ninguna; en su código.

La pantalla, ninguna; El código eliminará completamente el elemento de la página. El navegador no representará el elemento en absoluto, ya que se ha eliminado por completo. Con visibilidad: oculta; el elemento aún se representa y se carga en la página, pero es invisible. Para todos los efectos funcionales, todavía está allí. El usuario simplemente no puede verlo.

Por lo tanto, generalmente solo usaría esto si necesitara la función para algo, pero no quería que se mostrara. Como un píxel de seguimiento u otras piezas que interactuarían con los demás elementos de la pantalla.

 #code-module { visibility:hidden; } 

7. Margen y relleno

Los recién llegados a CSS no entienden bien los márgenes y el relleno. Parecen iguales al principio, pero una vez que investigues, verás que son completamente diferentes.

El margen es el espacio alrededor de un elemento. Es invisible y transparente, e incluso puede ser negativo. Tener un margen izquierdo más grande empujará el elemento hacia la derecha. Un margen superior más grande empuja el elemento hacia la parte inferior. Un margen negativo hace lo contrario. Un margen superior negativo levantará el elemento, por ejemplo.

El relleno , entonces, amortigua el tamaño del elemento. El relleno a la izquierda extenderá el fondo del elemento hacia la izquierda. Básicamente está aumentando su masa física. Como agregar un segundo suéter en un día frío. Obtienes más acolchado en tu cuerpo. Eres más grueso de lo que eras antes. Así es como funciona el relleno en CSS también, y por eso no puede tener relleno negativo .

Cuando lo usa como código, puede usar el margen predeterminado : 15px; o acolchado: 1vw; para un espaciado uniforme alrededor del selector. O puede usar margin-top, margin-left, margin-right o margin-bottom para afectar solo ese lado y tener diferentes niveles para cada uno. Padding, también, con padding-left, y así sucesivamente.

h2 { margin-bottom:25px; padding-left:15vh;}

8. Elementos para colorear

Cambiar el color de varios elementos es una de esas cosas que puede comenzar a modificar desde el primer día que inicia un sitio. En CSS, puede definir un color de dos formas.

La forma principal es usar su código hexadecimal de 6 dígitos: #ffffff para blanco o # 000000 para negro, como ejemplos. Puede definir cualquier color RGB con un código hexadecimal, y si no los conoce, no se preocupe. Existen muchos sitios web y herramientas para ayudar con eso.

La segunda forma es usar una palabra de color predefinida. Colores básicos como el azul y el negro y el rojo están predefinidos y se pueden utilizar sin tener que recordar los códigos hexadecimales. Pero si los tonos primarios no son lo que necesita, los códigos hexadecimales son la mejor opción.

Usando los códigos de color

En términos de utilizar realmente los códigos de color, hay varias formas. Para cualquier texto que necesite ser cambiado, simplemente use color: #ffffff; y cualquier texto dentro de ese selector cambiará. Puede hacer lo mismo para títulos de título como H1 y H2 con color .

p { color:white; background-color:#000;}

h3 { background:green; border: #110011;}

Cambiar cosas como color de fondo: rojo; o fondo: verde; de un elemento son igual de fáciles. Agrega un valor de color. También puede utilizar color: # 000; valores para selectores como a: hover que cambiarán el color de un enlace cuando se coloque sobre él. O incluso borde: azul; para poner un borde de color alrededor de cualquier elemento que desee.

Conclusión de los conceptos básicos de CSS

CSS puede ser abrumador. Y puede hacer mucho más que intercambiar colores y mostrar / ocultar elementos. Sin embargo, si recién está aprendiendo CSS y cómo manipular un sitio web a través del código, internalizar estos conceptos básicos en particular lo hará sentir cómodo leyendo y ajustando el código incluso si nunca antes ha abierto un editor de código.