--- title: "Tutoriales sobre los DIVS o capas" description: "El otro día un amigo me preguntó cómo cambiar el estilo de un formulario de contacto para que aparecieran varios elementos en columnas. Era un formulario del plugin de contacto de WordPress..." url: https://indaga.net/tutoriales-sobre-los-divs-o-capas/ date: 2019-05-06 modified: 2022-03-09 author: "Directorio Indaga" image: https://indaga.net/wp-content/uploads/2019/05/CSS.png categories: ["CSS", "Recursos y Utilidades"] tags: ["capas", "css", "divs", "html", "tutoriales css"] type: post lang: es --- # Tutoriales sobre los DIVS o capas [![](https://indaga.net/wp-content/uploads/2019/05/CSS.png)](https://indaga.net/wp-content/uploads/2019/05/CSS.png) El otro día un amigo me preguntó cómo cambiar el **estilo de un formulario de contacto** para que aparecieran varios elementos en columnas. Era un formulario del **plugin de contacto** de **WordPress Contact Form 7**, el cual ya tiene su propia hoja de estilo.  El caso es que, para no tener que modificar el estilo del plugin, y no perder así los cambios realizados en el archivo style.css del plugin (***Editor de plugins – Contact Form 7 – style.css***, si no recuerdo mal), puedes ‘maquetar’ el formulario que hayas creado, **utilizando estilos dentro de cada uno de los elementos**, sin necesidad de crear una clase (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo siguiente sirve), de esta forma: >

Un párrafo en un div flotante a la izquierda (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve)

Y otro párrafo en un div flotante a la derecha (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve)

>
  Un párrafo en un div flotante a la izquierda (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve) Y otro párrafo en un div flotante a la derecha (es mucho mejor crear la hoja de estilo y asociar la clase al elemento, desde luego, pero lo anterior sirve) La próxima vez lo haré de forma mucho más limpia y elegante… Dejo de paso una captura de pantalla sobre el **editor de plugins de WordPress** (no recomiendo cambiar nada ahí, a no ser que sepas muy bien lo que estás haciendo y luego bloquees la actualización del plugin): [![](https://indaga.net/wp-content/uploads/2019/05/editor-2Bplugins-300x165.png)](https://indaga.net/wp-content/uploads/2019/05/editor-2Bplugins.png) Me las ví y deseé para acordarme del tema de la alineación (*float*). Más o menos me acordé, pero para que no me vuelva a pasar, además de refrescar la memoria estudiando de nuevo un poquito sobre **CSS **o ***[Cascading Style Sheets](https://es.wikipedia.org/wiki/Hoja_de_estilos_en_cascada)***, dejo algunos **tutoriales interesantes sobre los divs** (o capas). Aquí van: **TUTORIALES DIV** El primero (en inglés): > FLOATSNº 7. of HTML & CSS Is HardAn old-timey web dev tutorial (and a friendly intro to CSS layouts) > [https://internetingishard.com/html-and-css/floats/](https://internetingishard.com/html-and-css/floats/) > The div tag – HTML tutorial > [https://www.html-5-tutorial.com/div-tag.htm](https://www.html-5-tutorial.com/div-tag.htm) > Creando La Estructura HTML De Tu Página (Uso De DIVs) > [http://www.psdahtmlpasoapaso.com/blog/creando-la-estructura-html-de-tu-pagina-uso-de-divs/](http://www.psdahtmlpasoapaso.com/blog/creando-la-estructura-html-de-tu-pagina-uso-de-divs/) > Estructura con CSS > [http://es.learnlayout.com/](http://es.learnlayout.com/) > Hojas de estilo en documentos > [http://html.conclase.net/w3c/html401-es/present/styles.html](http://html.conclase.net/w3c/html401-es/present/styles.html) > La etiqueta div > [http://www.ite.educacion.es/formacion/materiales/182/cd/seis/la_etiqueta_div.html](http://www.ite.educacion.es/formacion/materiales/182/cd/seis/la_etiqueta_div.html) > Diferencia entre div y span > [https://disenowebakus.net/div-span-html.php](https://disenowebakus.net/div-span-html.php) >