CSS básico que todo usuario de WordPress necesita saber

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 crea la página web (como p {} dirigida a   <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 clase CSS se identifica con el 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 simple H1. 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 diferencias menores. Se indican con un  # delante del selector y se nombran para una sola instancia 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, están seleccionando elementos individuales ellos mismos.

Otros selectores

Ya 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 se pueden aplicar cuando se pasa el mouse sobre un enlace. O un selector de atributos que solo se enfocará en 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 para hacerlo 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í mismo no es negociable.

Además, entre el estilo CSS real y el valor, coloca dos puntos regulares  (:) . Una vez más, el espacio aquí no importa en absoluto . Puede tener espacios en un lado, en ambos o en 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 tu código es importante no solo para que vuelvas al CSS más tarde, sino también para los desarrolladores posteriores. En general, los comentarios CSS se utilizan para indicar qué 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.

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 que se usa con más frecuencia, pero también es uno de los elementos que más se usa mal y en exceso.

Verá,  !important declara que cualquier línea en la que se encuentre anulará cualquier otro estilo para ese selector. En cualquier parte de la hoja de estilo. Entonces, si quisiera 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.

5. pantalla: ninguna;

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

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:

6. visibilidad: oculta;

Muy brevemente, también puede usar la  visibilidad: oculto; CSS para eliminar un elemento de la pantalla. Tenga en cuenta que hay una diferencia entre esto y display:none; en tu código.

La  pantalla;ninguno; el código eliminará completamente el elemento de la página. El navegador no renderizará el elemento en absoluto, ya que se ha eliminado por completo. Con visibilidad: oculto; el elemento aún se procesa y se carga en la página, pero es invisible. Para todos los intentos 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 quisiera que se mostrara. Como un píxel de seguimiento u otras piezas que interactuarían con los otros elementos en la pantalla.

7. Margen y relleno

Los márgenes y el relleno son malentendidos por los recién llegados a CSS. Parecen iguales al principio, pero una vez que profundices, 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 luego empuja el elemento hacia la parte inferior. Un margen negativo hace lo contrario. Un margen superior negativo hará subir el elemento, por ejemplo.

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

Cuando lo use como código, puede usar el  margen predeterminado: 15px; o  relleno: 1vw; para un espaciado uniforme alrededor del selector. O puede usar el  margen superior, el margen izquierdo, el margen derecho  o el margen inferior para afectar solo a ese lado y tener diferentes niveles para cada uno. Relleno, también, con  relleno izquierdo,  y así sucesivamente.

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 maneras.

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

La segunda forma es usando una palabra de color predefinida. Los colores básicos como  el azul ,  el negro y  el rojo están predefinidos y puede usarlos sin tener que recordar ningún código hexadecimal. Pero si los tonos primarios no son lo que necesita, los códigos hexadecimales son la mejor opción.

Uso de los códigos de color

En cuanto al uso real de los códigos de color, hay varias formas. Para cualquier texto que deba cambiarse, simplemente use  color:#ffffff; y cualquier texto dentro de ese selector cambiará. Puede hacer lo mismo para encabezados de título como H1 y H2 con  color .

Cambiar cosas como  background-color:red; o fondo: verde;  de un elemento son igual de fáciles. Agregue un valor de color. También puedes usar  color:#000; valores para selectores como a:hover que cambiará el color de un enlace cuando se desplace sobre él. O incluso  borde: azul; para poner un borde de color alrededor de cualquier elemento que desee.

Resumiendo 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 solo está aprendiendo CSS y cómo manipular un sitio web a través del código, internalizar estos conceptos básicos particulares lo hará sentir cómodo leyendo y ajustando el código, incluso si nunca antes ha abierto un editor de código.

¿Cuál es el CSS básico que usa con frecuencia en sus sitios?

Imagen destacada del artículo por darkwark / shutterstock.com