Lenpro p6 1951165

lOMoAR cPSD| 26575140
6.1 - Practica 6
css
LAB. LENGUAJES DE PROGRAMACION Y LAB ENE-
JUN 24
-
P. E. o Semestre
Nombre Matrícula Carrera
Cepeda Cavazos Daniela Mayerlin 1951165 IAS 3ER
Ing. JOSE LUIS TORRES GARZA
Semestre: Enero-junio 2024

San Nicolás de los Garza, Nuevo León
lOMoAR cPSD| 26
Introducción
Cascading Style Sheets (CSS): Transformando la Web con Estilo
En el mundo de la programación web, el diseño y la presentación son tan cruciales

como la funcionalidad misma de una página. Aquí es donde entra en juego CSS, un
lenguaje de estilo que ha revolucionado la forma en que se construyen y se
presentan los sitios web. En esta introducción, exploraremos qué es CSS, su
importancia en el desarrollo web y cómo ha evolucionado para satisfacer las
demandas de una Internet en constante cambio.
¿Qué es CSS?
Cascading Style Sheets, comúnmente abreviado como CSS, es un lenguaje de

diseño utilizado para definir el aspecto y el formato de un documento HTML. Surgió
en la década de 1990 como una respuesta a la necesidad de separar el contenido
de la presentación en la web. Antes de CSS, los desarrolladores web tenían que
incluir estilos directamente en el HTML, lo que generaba código poco manejable y
dificultaba la actualización y la consistencia visual.
Con CSS, los diseñadores y desarrolladores pueden crear reglas que describen
cómo deben presentarse los elementos HTML. Estas reglas pueden aplicarse a uno
o varios elementos, lo que brinda un alto grado de control sobre la apariencia de una
página web. CSS se basa en un modelo de caja que define cómo se renderizan y se
muestran los elementos HTML, lo que permite ajustar el tamaño, la posición, los
márgenes, el color y otros atributos visuales.
Importancia en el Desarrollo Web
La importancia de CSS en el desarrollo web no puede subestimarse. No solo

permite una mayor flexibilidad y control sobre el diseño de una página, sino que
también promueve la consistencia y la accesibilidad. Con CSS, los diseñadores
pueden crear diseños atractivos y adaptables que funcionan en una variedad de
dispositivos y tamaños de pantalla, desde computadoras de escritorio hasta
teléfonos inteligentes y tabletas.
Además, CSS facilita la separación de preocupaciones en el desarrollo web, lo que

significa que el contenido y el diseño se mantienen independientes entre sí. Esto
simplifica el proceso de mantenimiento y actualización de un sitio web, ya que los
cambios en el diseño pueden implementarse sin afectar el contenido subyacente.
También mejora la capacidad de indexación de los motores de búsqueda al
proporcionar una estructura clara y semántica para el contenido.
Evolución de CSS
Desde su introducción inicial, CSS ha experimentado numerosas actualizaciones y

mejoras para adaptarse a las necesidades cambiantes de la web moderna.
CSS3, lanzado en módulos individuales en lugar de como una especificación única,

ha ampliado enormemente las capacidades de CSS. Introduce características como
sombras, gradientes, animaciones, transformaciones y fuentes personalizadas, que
antes requerían soluciones basadas en imágenes o scripts complejos. Esto ha
permitido a los diseñadores crear experiencias web más ricas y dinámicas sin
comprometer la accesibilidad o el rendimiento.
Además, CSS3 ha abrazado el concepto de diseño web adaptable (responsive web

design), que se centra en crear sitios web que se ajusten y se vean bien en una
amplia gama de dispositivos y tamaños de pantalla. Los medios de consulta (media
queries) en CSS3 permiten a los diseñadores adaptar el diseño de una página
según las características del dispositivo del usuario, como el ancho de la pantalla y
la orientación.
Desalloro
Programar, codificar y
agregar CSS a una
página web involucra
una serie de pasos y
técnicas. Aquí hay una
descripción general de
cómo se realiza:
1. Escribir el HTML: El
primer paso para crear
una página web es
escribir el código HTML
que define la estructura
y el contenido de la
página. Esto incluye
etiquetas para
encabezados, párrafos,
imágenes, enlaces y
otros elementos que
forman parte del
contenido de la página.
Por ejemplo:
2. Crear un archivo CSS: Después de

escribir el HTML, se crea un archivo CSS
separado que contiene las reglas de estilo
para la página. Estas reglas de estilo
especifican cómo se verán los elementos
HTML en la página, incluyendo
propiedades como color, tamaño, fuente,
margen, etc.
Por ejemplo (archivo styles.css):
3. Vincular el archivo CSS al HTML: Para

que los estilos definidos en el archivo CSS
se apliquen al HTML, es necesario
vincular el archivo CSS al documento
HTML. Esto se hace utilizando la etiqueta
<link> dentro del elemento <head> del
documento HTML.
4. Visualización en el navegador: Una vez que el HTML y el CSS están escritos y

vinculados correctamente, se puede abrir el archivo HTML en un navegador web
para ver cómo se ve y se comporta la página. El navegador aplicará los estilos CSS
al HTML y mostrará la página web con el diseño y el formato especificados.
Este proceso de programación, codificación y colocación de CSS en una página web

es fundamental para crear sitios web atractivos y funcionales. Con práctica y
experiencia, los desarrolladores pueden crear diseños web impresionantes
utilizando HTML y CSS.
Identificar si una página web utiliza CSS es bastante sencillo y puede hacerse de
varias maneras:
Inspeccionar el código fuente: Puedes hacer clic derecho en cualquier parte de la

página web y seleccionar "Inspeccionar" o "Ver código fuente" en la mayoría de los
navegadores web. Una vez en la herramienta de inspección, busca la etiqueta <link>
dentro del elemento <head> del documento HTML. Si encuentras una línea similar a
<link rel="stylesheet" href="styles.css"> (donde styles.css es el nombre del archivo
CSS), eso indica que la página está utilizando CSS.
Buscar archivos CSS: Puedes buscar explícitamente archivos CSS vinculados en la

página web. Para hacer esto, intenta encontrar enlaces a archivos CSS en el código
fuente de la página. Estos enlaces pueden estar dentro de la etiqueta <head> o
pueden estar incrustados directamente en línea en la página HTML (aunque esto es
menos común).
Observar cambios visuales: Si una página web tiene estilos aplicados a los
elementos HTML, es una indicación clara de que está utilizando CSS. Los estilos
pueden incluir colores, fuentes, márgenes, espaciado, diseño de caja, etc. Si ves
que los elementos tienen algún tipo de diseño visual, es muy probable que se estén
aplicando a través de CSS.
Usar herramientas de desarrollo del navegador: Los navegadores modernos están

equipados con herramientas de desarrollo que te permiten inspeccionar el DOM
(Modelo de Objetos del Documento) y ver los estilos aplicados a cada elemento.
Puedes abrir las herramientas de desarrollo presionando F12 o haciendo clic
derecho en cualquier parte de la página y seleccionando "Inspeccionar" en la
mayoría de los navegadores. Dentro de estas herramientas, puedes ver qué reglas
CSS están aplicadas a cada elemento y desde qué archivo se están cargando esas
reglas.
En resumen, si una página web tiene estilos visuales aplicados a los elementos
HTML, está utilizando CSS de alguna forma. Puedes confirmar esto inspeccionando
el código fuente, buscando archivos CSS vinculados, o utilizando las herramientas
de desarrollo del navegador para explorar los estilos aplicados.
Conclusión y referencias bibliográficas
En conclusión, el uso de CSS en el desarrollo web es esencial para crear páginas

visualmente atractivas, bien diseñadas y consistentes. CSS permite separar la
estructura del contenido HTML de su presentación visual, lo que facilita la creación
de diseños flexibles y adaptables a diferentes dispositivos y tamaños de pantalla.
Además, el CSS ha evolucionado constantemente a lo largo de los años,
incorporando nuevas características y capacidades que han permitido a los
diseñadores y desarrolladores web crear experiencias más ricas e interactivas para
los usuarios. Al identificar si una página web utiliza CSS, ya sea a través de la
inspección del código fuente, la búsqueda de archivos CSS vinculados o el uso de
herramientas de desarrollo del navegador, podemos comprender mejor cómo se ha
estilizado y diseñado la página, lo que a su vez nos ayuda a apreciar la importancia
del CSS en el desarrollo web moderno.
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS
https://blog.hubspot.es/website/que-es-css
https://www.hostinger.mx/tutoriales/que-es-css
https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&
id=707:ies-css-un-lenguaje-de-programacion-ipara-que-sirve-diferencias-entre-html-
css-php-asp-cu01004d&catid=75&Itemid=203

Lenpro p6 1951165

Cargado por

Copyright:

Formatos disponibles

Lenpro p6 1951165

Cargado por

Información del documento

Descripción original:

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Lenpro p6 1951165

Cargado por

Copyright:

Formatos disponibles

lOMoAR cPSD| 26575140

Cepeda Cavazos Daniela Mayerlin 1951165 IAS 3ER

Ing. JOSE LUIS TORRES GARZA

Semestre: Enero-junio 2024

Cascading Style Sheets (CSS): Transformando la Web con Estilo

En el mundo de la programación web, el diseño y la presentación son tan cruciales

Cascading Style Sheets, comúnmente abreviado como CSS, es un lenguaje de

Importancia en el Desarrollo Web

La importancia de CSS en el desarrollo web no puede subestimarse. No solo

Además, CSS facilita la separación de preocupaciones en el desarrollo web, lo que

Desde su introducción inicial, CSS ha experimentado numerosas actualizaciones y

CSS3, lanzado en módulos individuales en lugar de como una especificación única,

Además, CSS3 ha abrazado el concepto de diseño web adaptable (responsive web

2. Crear un archivo CSS: Después de

Por ejemplo (archivo styles.css):

3. Vincular el archivo CSS al HTML: Para

4. Visualización en el navegador: Una vez que el HTML y el CSS están escritos y

Este proceso de programación, codificación y colocación de CSS en una página web

Inspeccionar el código fuente: Puedes hacer clic derecho en cualquier parte de la

Buscar archivos CSS: Puedes buscar explícitamente archivos CSS vinculados en la

Usar herramientas de desarrollo del navegador: Los navegadores modernos están

Conclusión y referencias bibliográficas

En conclusión, el uso de CSS en el desarrollo web es esencial para crear páginas

También podría gustarte