### [Cómo agregar estilos CSS personalizados para WPForms](https://wpforms.com/developers/how-to-add-custom-css-styles-for-wpforms/)
**Publicado:** 9 de octubre de 2019
**Autor:** Equipo Editorial
**Extracto:** Este tutorial te mostrará cómo agregar CSS a tu sitio para personalizar la apariencia de tus formularios y campos de WPForms.
**Contenido:**
¿Te gustaría agregar estilos CSS personalizados a tu sitio? Este tutorial te ofrecerá múltiples opciones sobre cómo agregar estos fragmentos a tu sitio con instrucciones paso a paso para cada forma opcional que elijas para agregar tu CSS.
Con esta útil guía, podrás elegir fácilmente la forma en que deseas agregar los fragmentos a tu sitio. Una vez que hayas seleccionado tu método de implementación, ¡puedes comenzar a explorar la documentación para desarrolladores para elegir qué fragmentos de CSS te gustaría empezar a agregar a tu sitio!
Para ver la gran cantidad de fragmentos disponibles, [explora nuestra documentación para desarrolladores](https://wpforms.com/developers/ "Documentación para desarrolladores de WPForms").
Consulta nuestro videotutorial para una vista más práctica de cómo lograr agregar fragmentos de CSS personalizados a tu sitio.
## Opciones de implementación
CSS es una herramienta poderosa para estilizar tu sitio, así como tus formularios. Hay 3 enfoques principales para agregar CSS personalizado a tu sitio.
#### Usando el plugin WPCode (recomendado)
Usar el plugin WPCode es súper rápido y fácil para agregar fragmentos de CSS a tu sitio.
Una de las muchas razones por las que recomendamos encarecidamente usar este plugin para agregar fragmentos personalizados a tu sitio es que tiene una verificación incorporada antes de guardar tu fragmento. Si se omite un punto y coma o se agrega un corchete adicional, el fragmento no se guardará. Esto evita que ocurran problemas en tu sitio debido a un fragmento de CSS copiado y pegado incorrectamente. Y sí, incluso con la versión gratuita, recibirás esta auditoría adicional antes de que tu fragmento se active.
Para obtener más información sobre este plugin, [consulta el sitio para obtener más información, incluida la documentación dedicada](https://wpcode.com/ "Encabezados y pies de página - Fragmentos de código de WPCode").
Una vez instalado el plugin, navega al menú **Fragmentos de código** desde el menú del lado izquierdo en tu panel de WordPress y selecciona **+ Agregar fragmento**. Luego, simplemente haz clic en **Agregar tu código personalizado (Nuevo fragmento)**, y luego haz clic en el botón azul **Usar fragmento** para crear un nuevo fragmento de CSS.
Cuando aparezca tu nueva pantalla de fragmento, asígnale un nombre que tenga sentido para ti, para que tú y los administradores de tu sitio comprendan su propósito. En el menú desplegable **Tipo de código**, selecciona **CSS**, ya que solo agregaremos CSS a este fragmento.
En la sección **Vista previa del código**, agrega tu CSS. Aquí tienes un ejemplo para usar con el propósito de esta documentación.
```
/* escribe tu código CSS aquí */
ul#wpforms-999-field_27 li label,
ul#wpforms-999-field_26 li label {
padding: 10px;
transition: all ease 0.3s;
background: linear-gradient(to right, #e27730 50%, #cd631d 50%);
background-size: 200% 100%;
background-position: left bottom;
color: white;
}
ul#wpforms-999-field_27 li.wpforms-selected label,
ul#wpforms-999-field_27 li label:hover,
ul#wpforms-999-field_26 li.wpforms-selected label,
ul#wpforms-999-field_26 li label:hover {
cursor: pointer;
border-radius: 2px;
background-position: right top;
}
ul#wpforms-999-field_27 li input,
ul#wpforms-999-field_26 li input {
display: none;
}
ul#wpforms-999-field_27 li,
ul#wpforms-999-field_26 li {
float: left;
width: auto;
display: inline-block;
padding: 10px 10px 10px 0!important;
}
```
A continuación, verás la sección **Inserción**. Como vamos a agregar CSS, seleccionaremos **Inserción automática** para el **Método de inserción** y **Encabezado de todo el sitio** para la **Ubicación**.
Una vez que hayas agregado tu fragmento, haz clic en **Guardar fragmento**. Esto guardará el fragmento, pero no lo activará automáticamente. Una vez que lo hayas guardado inicialmente, notarás que el estado del fragmento se establece en **Inactivo** por defecto. Simplemente cambia el interruptor de **Inactivo** a **Activo** y haz clic en **Actualizar** para establecer el fragmento como **Activo**.
#### Usando CSS Hero
Si prefieres no tocar ningún código, WPForms tiene un tutorial completo sobre cómo usar CSS Hero. Para obtener más información, [sigue este tutorial](https://wpforms.com/docs/how-to-style-wpforms-without-knowing-any-code/ "Cómo personalizar WPForms con CSS Hero (sin HTML ni CSS)").
#### Creando un tema hijo
Los temas hijos se recomiendan para un desarrollo más avanzado. Puedes averiguar cómo crear un tema hijo [siguiendo este tutorial](http://www.wpbeginner.com/wp-themes/how-to-create-a-wordpress-child-theme-video/ "Cómo crear un tema hijo de WordPress (Video)
").
En cada tema hijo está el archivo **style.css** requerido, en este archivo es donde agregarías tu CSS personalizado.
#### Usando el personalizador de WordPress
Desde la versión 4.5 de WordPress, WordPress nos ha proporcionado una herramienta integrada para agregar cualquier estilo CSS personalizado a tu tema o a cualquier plugin que tengas instalado, lo que lo convierte en una opción popular para agregar tu CSS.
Para obtener más información sobre el personalizador de WordPress, [consulta su documentación](http://www.wpbeginner.com/plugins/how-to-easily-add-custom-css-to-your-wordpress-site/ "Cómo agregar fácilmente CSS personalizado a tu sitio de WordPress").
Puedes encontrar el personalizador de WordPress navegando a **Apariencia** » **Personalizar** » **CSS adicional**.
Solo recuerda que después de agregar tu CSS, haz clic en el botón **Publicar** para guardar tus cambios. Mientras el tema permanezca activo, se aplicará tu CSS personalizado.
Si desactivas tu tema, tu CSS personalizado se eliminará, ya que cualquier CSS personalizado agregado aquí está asociado al tema en sí.
## Notas
Al agregar cualquier tipo de código personalizado a tu sitio, es importante asegurarte de proteger tu código. Por lo tanto, sin importar el enfoque que elijas, siempre es una buena idea [hacer una copia de seguridad de tu sitio primero](http://www.wpbeginner.com/plugins/7-best-wordpress-backup-plugins-compared-pros-and-cons/ "7 mejores plugins de copia de seguridad de WordPress comparados"). De esa manera, tendrás acceso a versiones anteriores de los archivos del sitio y la base de datos si es necesario.
## Enlaces adicionales
Para obtener información adicional sobre CSS personalizado para WPForms, consulta estos enlaces de referencia:
- [Documentación de estilo para WPForms](https://wpforms.com/categories/docs/styling/ "Documentación de estilo para WPForms")
- [Una lista completa de documentación para estilizar WPForms usando CSS](https://wpforms.com/developers/tags/css/ "Una lista completa de documentación para estilizar WPForms usando CSS")
## Preguntas frecuentes
#### P: ¿Cómo me ayuda esto a agregar CSS personalizado para WPForms?
**R:** Este tutorial no es específicamente para CSS personalizado de WPForms, sino para **cualquier** CSS personalizado que desees agregar a tu sitio.
Simplemente encuentra qué opción de las anteriores te resulta más fácil para agregar cualquier fragmento de código, incluidos los fragmentos de código de WPForms mencionados en las secciones [Tutoriales](https://wpforms.com/developers/categories/tutorials/ "Tutoriales") y [Fragmentos](https://wpforms.com/developers/categories/snippets/ "Fragmentos").
**Categorías:** Primeros pasos
**Etiquetas:** CSS
---