4.1 Cómo añadir CSS

MRosero Lecciones SHIFTA

3 Oct 202415:12

Summary

TLDREn este video, se explican tres formas principales de agregar CSS a un documento HTML: CSS en línea, CSS interno y CSS externo. Se destaca la práctica de separar el contenido de los estilos para mejorar la organización y evitar errores. Aunque el CSS en línea es válido, se recomienda evitarlo debido a su tedio y riesgo de errores. El CSS interno es útil para cambios rápidos dentro de una página, pero el método más eficiente y profesional es el CSS externo, que permite unificar y gestionar estilos en un solo archivo, garantizando consistencia y facilidad de mantenimiento en proyectos reales.

Takeaways

😀 El HTML y CSS se pueden usar en plataformas como CodePen, pero en un proyecto real se deben separar y organizar adecuadamente los archivos.
😀 El CSS en línea implica añadir estilos directamente dentro de los elementos HTML usando el atributo `style`, pero se considera una mala práctica para proyectos grandes.
😀 El CSS interno se define dentro de un bloque `<style>` en el `<head>` del documento HTML, y afecta solo al archivo en el que está incluido.
😀 Aunque el CSS interno es útil para cambios rápidos o pequeños proyectos, puede generar problemas si se usa en sitios con múltiples páginas.
😀 El CSS externo es el método más eficiente, ya que permite centralizar los estilos en un solo archivo que puede ser enlazado desde varios documentos HTML.
😀 Al usar CSS en línea, los estilos afectan solo al elemento HTML específico al que se le asigna, sin afectar a otros elementos en el documento.
😀 El uso de CSS en línea puede generar un código difícil de mantener y propenso a errores si se aplica a muchos elementos.
😀 El CSS interno es adecuado para experimentación rápida o para casos específicos, pero también presenta limitaciones en sitios con varias páginas.
😀 En proyectos grandes, es fundamental separar el contenido (HTML) de la presentación (CSS), lo que facilita la edición y reduce la posibilidad de errores.
😀 Al usar CSS externo, los estilos son consistentes en todas las páginas de un sitio web y se pueden modificar en un solo archivo, lo que mejora la eficiencia y reduce errores.

Q & A

¿Qué es el CSS en línea?
-El CSS en línea se refiere a la práctica de añadir declaraciones de CSS directamente dentro de los elementos HTML utilizando el atributo 'style'. Esto afecta únicamente al elemento específico al que se le aplica.
¿Cuáles son los principales problemas del CSS en línea?
-Aunque es una manera válida de aplicar CSS, el uso de CSS en línea se considera mala práctica en general debido a que aumenta la complejidad del código, lo hace más difícil de mantener y puede generar errores si se aplica de manera inconsistente en múltiples elementos.
¿Por qué se recomienda evitar el CSS en línea en proyectos reales?
-El CSS en línea debe evitarse porque mezcla la estructura del documento HTML con la presentación (estilos), lo que hace que el código sea más difícil de mantener, reutilizar y depurar. Además, si se desea cambiar el estilo de varios elementos, tendría que hacerse uno por uno.
¿Qué es el CSS interno?
-El CSS interno se refiere a la práctica de agregar las reglas de estilo dentro de una etiqueta <style> en el documento HTML, normalmente dentro de la sección <head>. Este tipo de CSS afecta solo al documento en el que está incluido.
¿Cuándo es útil el CSS interno?
-El CSS interno es útil para cambios rápidos o experimentación en una sola página, o para proyectos pequeños donde no se requiere una separación estricta de los estilos entre diferentes páginas. Sin embargo, si el proyecto es grande, podría ser más difícil de mantener.
¿Qué problema podría generar el CSS interno en proyectos grandes?
-En proyectos grandes, el uso de CSS interno en cada página puede generar inconsistencias, ya que cada documento tendría que incluir su propio bloque de estilos. Esto puede llevar a errores, como olvidarse de agregar ciertas reglas de estilo en una página específica.
¿Qué es el CSS externo y por qué es la mejor opción?
-El CSS externo consiste en tener un archivo CSS separado que se enlaza a los documentos HTML mediante una etiqueta <link>. Esta es la mejor opción para proyectos grandes porque permite centralizar los estilos, hacer cambios en un solo archivo y garantizar consistencia a través de todo el sitio.
¿Cuáles son las ventajas del CSS externo sobre el CSS interno y en línea?
-El CSS externo permite una gestión más eficiente de los estilos, ya que solo se necesita modificar un archivo CSS para afectar a múltiples páginas. Además, mejora la organización del código, reduce la posibilidad de errores y acelera el tiempo de carga de la página al ser más fácil de caché por el navegador.
¿Cómo se enlaza un archivo CSS externo a un documento HTML?
-Para enlazar un archivo CSS externo a un documento HTML, se utiliza la etiqueta <link> dentro de la sección <head> del HTML, con el atributo 'href' apuntando a la ubicación del archivo CSS, como se muestra en el siguiente ejemplo: <link rel='stylesheet' type='text/css' href='styles.css'>.
¿Es posible usar varios archivos CSS en un mismo proyecto?
-Sí, es posible usar varios archivos CSS en un mismo proyecto. Dependiendo de cómo se estructure el proyecto, podrías tener diferentes archivos CSS para diferentes secciones o tipos de contenido, siempre asegurándote de enlazarlos correctamente en cada página HTML donde sea necesario.