Con sistemas de gestión de contenido como WordPress, hoy es increíblemente fácil de construir sitios web. Ni siquiera tienes que aprender a programar. Simplemente instale un tema de WordPress y personalice el sitio web hasta que se rinda. Desconocido para muchas personas, los desarrolladores escriben muchos código HTML, CSS, PHP y JavaScript para crear su tarea favorita de WordPress. Esto es lo que significa HTML, CSS, PHP y JavaScript:
HTML, que es el acortamiento del lenguaje de marcado de hipertexto, ofrece la estructura de una página web. Define todos los elementos que ves en una página, ya sean títulos, párrafos, menús, etc. Es el lenguaje de marcado estándar y ofrece los elementos básicos para las páginas web.
CSS es la abreviatura de las hojas de estilo punzante. CSS es el lenguaje que usan los diseñadores web para estilizar una página web. Controla los colores, los estilos de las fuentes, los fondos, las dimensiones de las columnas, la capacidad de reacción y todos los demás estilos de una página web. Sin CSS, las páginas web serían aburridas y difíciles de leer.
PHP es un acrónimo recursivo para el preprocesador de hipertexto. PHP es un lenguaje de script que se realiza en el servidor. Se utiliza para desarrollar sitios web estáticos, sitios web dinámicos y aplicaciones web. Todos los sitios web de WordPress se basan muy en PHP para compilar contenido dinámico extraído de una base de datos. Un buen ejemplo de PHP en acción es un sitio web de comercio electrónico que se ejecuta en WooCommerce.
JavaScript, a menudo acortado como JS, es un lenguaje de script para el cliente y el servidor, que lo ayuda a hacer las páginas web interactivas.
En la publicación de hoy, nos centraremos en CSS. Para aprovechar al máximo esta guía, es importante comprender un poco de HTML. Esto se debe a que, como dije anteriormente, CSS se usa para estilizar HTML. Para la mayoría de la guía, usaré el siguiente documento HTML:

</ablo)

Este es un título

Este es un párrafo.
Este es otro párrafo.

Sin CSS, el documento HTML anterior se ve así en un navegador:
No es hermosa, pero la plantilla anterior nos permitirá probar cómo funciona CSS. Siéntase libre de copiar el código falso anterior para fines experimentales. Sin otras preguntas, vamos a trabajar porque hay mucho que cubrir.

¿Qué es CSS?
Entonces, ¿qué es CSS? Las hojas de estilo en cascada (CSS) es un lenguaje de estilización (que no debe confundirse con un lenguaje de marcado, como HTML o un lenguaje de script, como PHP), que permite a los diseñadores y desarrolladores de la web controlar una web de apariencia de página. Según el popular sitio de desarrollo web de W3Schools.com, “CSS se utiliza para definir estilos para sus páginas web, incluidas las variaciones de diseño, apariencia y visualización para diferentes dispositivos y dimensiones de pantalla”. Es un lenguaje importante para aprender si tiene la intención de desarrollar sitios web desde cero o hundirse debajo del capó para hacer personalizaciones de estilo en su sitio de WordPress. Con algunos trucos CSS, puede cambiar el aspecto de su sitio web en múltiples dispositivos.

Pero eso no es todo. CSS ha mejorado significativamente con el tiempo y ahora le permite agregar interactividad e incluso crear animaciones, como los ejemplos disponibles en el sitio web animate.style. Chris Coyier también ha creado muchas animaciones CSS interesantes en CSS-trks.com, sin CSS, las páginas web serían un ojo. Por ejemplo, así es como se ve una sección de nuestra página inicial: todo limpio, hermoso y hermoso, ¿verdad? Así es como se ve la misma sección sin CSS:
Oh, Dios, no es una hermosa vista de ver. Y es por eso que, damas y caballeros, es por eso que CSS es importante. Cuando se trata de páginas web, la presentación lo es todo.

CSS fue inventado por Hakon Wium Lie en 1994 y es mantenido por un grupo de personas del Consorcio World Wide Web (W3C) llamado CSS Working Group. pero como funciona? Para usar CSS para estilizar sus páginas, primero debe comprender la sintaxis CSS. No es complicado, así que no te preocupes. Para aclarar las cosas, aquí hay un ejemplo de CSS: Corp {

Color de fondo: azul claro;
}
H1 {
El color blanco;
Text-Align: Center;
}
pags {
Font-Family: Verdana;
Tamaño de fuente: 20 PX;
} Como se ve en el ejemplo anterior, CSS tiene varias partes.
Body, H1 y P se llaman selectores y lo ayudan a dirigir elementos específicos de un documento HTML. Por ejemplo, los selectores anteriores nos permiten apuntar a la sección del cuerpo, los títulos y los párrafos en nuestro documento HTML.
El color del fondo, el color, la alineación del texto, la familia de fuentes y el tamaño de fuente se conocen como propiedades.
Azul claro, centro, verdana y 20 px se llaman valores. Adjunte los valores de la propiedad, y el valor se transmite al elemento HTML. Del ejemplo anterior, la sección del cuerpo tendrá un fondo azul claro, los títulos estarán blancos y centrados en la página, y los párrafos usarán la fuente Verdana.
El código CSS anterior es un ejemplo básico del CSS. El complejo CSS excede la esfera de publicación de hoy, pero no se preocupe, porque agregaremos algunos recursos al final. Cómo agregar CSS a HTML Agregar CSS a documentos HTML es un problema relativamente simple. Puede agregar CSS a documentos HTML de tres maneras diferentes. CSS externo en el desarrollo web es la mejor práctica para mantener el código HTML y CSS en archivos separados. Luego puede iniciar sesión en el archivo CSS utilizando el elemento que coloca en la sección del documento HTML. Primero debe crear un archivo CSS para su código CSS. Los archivos CSS generalmente terminan con una extensión .css. El mío es style.css, que guardé en la misma carpeta con el documento HTML.
En segundo lugar, agregue el elemento a la sección del documento HTML, como se muestra a continuación:

</ablo)

Este es un título

Este es un párrafo.
Este es otro párrafo.

! Externamente es la mejor manera de implementar CSS. CSS interno Si desea agregar un estilo único a una sola página web, suponga que crea un sitio simple de una página, puede elegir usar una hoja de estilo interna.
Agregue una hoja de estilo interno dentro del elemento en la sección del documento HTML de la siguiente manera:

cuerpo {
Color de fondo: azul claro;
}
H1 {
El color blanco;
Text-Align: Center;
}
pags {
Font-Family: Verdana;
Tamaño de fuente: 20 PX;
}

</ablo)

Este es un título

Este es un párrafo.
Este es otro párrafo.

Debido a que el código CSS está en su documento HTML, a menudo conduce a páginas web más grandes, especialmente si tiene toneladas de código CSS.
CSS In Line Inline CSS se aplica directamente a un solo elemento agregando el atributo a ese elemento en particular de la siguiente manera:

</ablo)

Este es un título

Este es un párrafo.
Este es otro párrafo.

W3C Las personas no recomiendan usar el enfoque anterior para implementar CSS, ya que no crean un código “limpio”. También es redundante y consume mucho tiempo. Y, como el CSS interno, conduce a archivos HTML más grandes. Ahora sabe qué es CSS y cómo implementarlo en su sitio web. Si usa WordPress, puede acceder a su archivo CSS su tema navegando> editor temático, como se muestra a continuación:
Esto lo lleva directamente a la hoja de estilo del tema:
WordPress no recomienda el enfoque anterior, ya que puede editar y obtener una vista previa de los cambios CSS en el editor CSS Built -IN que está disponible en el cliente en vivo. Para acceder al editor de CSS Built -En, explore la apariencia> Personalización, como destacamos a continuación:
Después de eso, busque y haga clic en el CSS adicional desde la barra lateral izquierda, como se muestra a continuación.
Alternativamente, puede acceder al editor Built -In CSS haciendo clic en CSS personalizado en la parte superior del tablero del administrador de WordPress, como se muestra en la pantalla a continuación.
Si hace clic en el elemento del menú de arriba, llegará al siguiente editor CSS:

Consejo profesional:

Siempre use un tema para niños y siempre cree una copia de seguridad antes de ir a juegos con sus archivos de tema, incluida la hoja de estilo. De esta manera, puede actualizar el tema principal sin problemas y sin perder todos los cambios codificados personalizados que ha realizado. Al usar CSS, hay varias formas de usar CSS y mencionarlos durante el artículo. Probablemente no hará muchas personalizaciones directas de CSS si usa un tema o páginas de WordPress. La mayoría de los temas de WordPress y los constructores de páginas le permiten personalizar su sitio sin escribir ningún código CSS. Aquí hay algunas formas de usar CSS. El diseño receptivo de diseño web de CSS receptivo (RWD) hace que su sitio web se vea genial y funcione bien en todos los dispositivos, independientemente del tamaño de la pantalla. Con más personas que usan dispositivos de cualquier tipo para navegar por la web, no puede ignorar el valor del diseño receptivo. CSS es un ingrediente importante si crea sitios web receptivos. Si desea restaurar un sitio web antiguo para dispositivos más nuevos, CSS le brinda muchas técnicas de diseño receptivo para lograr exactamente esto. Puede usar CSS para implementar ventanas de visualización receptiva, vistas de cuadrícula, consultas de medios, imágenes y videos. Su sitio se verá bien en múltiples dispositivos, lo que estimula las tasas de participación y conversión. Styling CSS es un idioma de estilo y es perfecto para todos los estilos personalizados que necesita crear en su sitio web. Si no puede cambiar una parte determinada de su sitio.

Web Mediante el personalizador en vivo o la configuración del panel / tema, puede recurrir a CSS personalizado. CSS le permite personalizar una amplia variedad de cosas en su sitio web, incluida la tipografía (incluido el implemento de fuente web), colores de fondo, colores, imágenes, texturas, iconos, bordes, bordes, botones y prácticamente cualquier otra cosa que tenga en mente. Creación de una experiencia coherente entre los navegadores Si crea un sitio HTML + CSS desde cero, pronto o más tarde experimentará la compatibilidad del navegador cruzado. Y eso se debe a que cada navegador juega un poco de especificaciones HTML diferentes. Por lo tanto, diferentes navegadores jugarán el mismo código diferente. Así es, notará diferencias sutiles (y no tan sutiles) cuando juegue el código idéntico, por ejemplo, Mozilla Firefox y Microsoft Edge. Para eliminar estos problemas de compatibilidad entre los navegadores, puede usar un archivo CSS gratuito llamado Normalize.css por los buenos chicos de Google. Para implementar Normalize.css, simplemente agregue la siguiente línea a la sección , como hice anteriormente: y listo, CSS iniciará y resolverá problemas de compatibilidad entre el navegador. Creando animaciones de CSS en el pasado, tenía que confiar en JavaScript o Flash para crear animaciones. Pero esto ha cambiado últimamente con la introducción de animaciones y transiciones de CSS. Tenga en cuenta que la implementación de animaciones y transiciones de CSS requiere un nivel avanzado de conocimiento de CSS. Sin embargo, es fácil de aprender, siempre que haga el esfuerzo necesario.

Hay varias formas en que puede usar animaciones y transiciones en su sitio. El mejor ejemplo es la adición de la interactividad destinada a estimular la participación de los usuarios. Recursos de CSS Si desea obtener más información sobre CSS y sus aplicaciones, organizamos una lista de algunos de los mejores recursos en la web: CSS completo – W3Schols.com

CSS Building Blocks – Mozilla Developers Network

Aspectos de CSS – Red de desarrolladores de Mozilla
Aspectos de la cuadrícula CSS3
Hojas de estilo de cascada – W3.org
El CSS puede parecer una tuerca rota al principio, pero es uno de los idiomas más livianos que aprendas. No es complicado porque no es un lenguaje de programación como C # o PHP. Es solo un conjunto de reglas que agregan color y estilo a sus páginas web. Si no tuviéramos CSS, la mayoría, si no, todos los sitios se verían horribles. También sería difícil estilizar e incluso usar, porque CSS mejora no solo la aparición de un sitio web, sino también el grado de uso. Con muchos tutoriales en línea gratuitos, el aprendizaje y el control de CSS es fácil, siempre que haga el esfuerzo necesario. También tome tiempo para visitar sitios de práctica o crear un sitio de prueba. ¿Cómo se usa CSS? Por favor, háganos saber en los comentarios.