Alumno: Carlos Manuel Hernandez Lara

Grupo: SCO8SA116

Carrera: Lic. Sistemas Computacionales

Materia: Diseño de Interfaces Web

Fecha de entrega: 18/03/2023

 Universidad Mexicana
UNIMEX

Índice

Introducción .......................................................... 2
¿Qué es CSS? ....................................................... 3
¿Cómo funciona CSS? ....................................... 3
Sintaxis del CSS ................................................... 3
Módulos CSS ........................................................ 4
Especificaciones CSS .......................................... 5
Estilos CSS interno, Externo e Inline .............. 6
Ventajas de usar CSS ......................................... 6
Desventajas de usar CSS .................................. 7
Conclusión ............................................................ 8
Bibliografía ........................................................... 9

CARLOS MANUEL HERNANDEZ LARA 1

 Universidad Mexicana
UNIMEX

Introducción
CSS es un lenguaje que nos permite realizar páginas Web atractivas y
más interactivas para el usuario.

CSS o como se le conoce las hojas de estilo en cascada permiten el

desarrollo de páginas web atractivas.

Antes de empezar a usar CSS debemos tener en cuenta que los requisitos
principales es tener conocimientos básicos de informática, conocimientos en el
manejo de archivos y lo más importante tener nociones de HTML ya que este
siempre será el esqueleto de las páginas.

Debemos saber que CSS posee una gran compatibilidad con

navegadores.

CSS fue desarrollado por World Wide Web Consortium en el año 1996,
por alguna razón muy sencilla. HTML no está diseñado para tener etiquetas que
ayuden a formatear la página.

Por tanto, CSS fue desarrollado por World Wide Web Consortium para
resolver este problema.

De esta forma podemos hacer que nuestras Aplicaciones Web sean más
atractivas visualmente e incluso más cómodas al momento de navegar por
dichas páginas.

CARLOS MANUEL HERNANDEZ LARA 2

 Universidad Mexicana
UNIMEX

¿Qué es CSS?
El CSS es lo que se llama un lenguaje de hojas de estilo en cascada y se
utiliza para estilizar elementos escritos en un lenguaje de marcado como HTML.
Separa el contenido de la representación visual del sitio.
CSS fue desarrollado por W3C en 1996 por una razón muy sencilla. HTML
no fue diseñado para tener etiquetas que ayuden a formatear la página. Está hecho
solo para escribir el marcado para el sitio.
Se incluyeron etiquetas como <font> en HTML versión 3.2, y esto les causó
muchos problemas a los desarrolladores. Dado que los sitios web tenían diferentes
fuentes, fondos de colores y estilos, el proceso de reescribir el código fue largo,
doloroso y costoso. Por lo tanto, CSS fue creado por W3C para resolver este
problema.
La relación entre HTML y CSS es muy fuerte. Dado que HTML es un lenguaje
de marcado y CSS enfatiza el estilo, van de la mano.
CSS no es técnicamente una necesidad, pero no querrás tener un sitio que
solo tenga HTML, ya que se vería completamente desnudo.

¿Cómo funciona CSS?

CSS utiliza una sintaxis simple basada en el inglés con un conjunto de reglas
que la gobiernan. Como mencionamos anteriormente, HTML no fue hecho con la
intención de utilizar elementos de estilo, sino solo para el marcado de la página. Fue
creado simplemente para describir el contenido. Por ejemplo: <p>Esto es un
párrafo.</p>.
Pero ¿cómo le aplicas un estilo al párrafo? La estructura de sintaxis CSS es
bastante simple. Cuenta con un selector y un bloque de declaración. Primero
seleccionas un elemento y luego declaras lo que quieres hacer con él. Bastante
sencillo, ¿verdad?
Sin embargo, hay reglas que debes recordar. Las reglas de la estructura son
bastante simples, así que no te preocupes.
El selector apunta al elemento HTML que deseas estilizar. El bloque de
declaración contiene una o más declaraciones separadas por punto y coma.
Cada declaración incluye un nombre de propiedad CSS y un valor, separados
por dos puntos. Una declaración CSS siempre termina con un punto y coma, y los
bloques de declaración están rodeados por llaves.

Sintaxis del CSS

El CSS es un lenguaje basado en reglas: cada usuario define las reglas que
especifican los grupos de estilos que van a aplicarse a elementos particulares o
CARLOS MANUEL HERNANDEZ LARA 3
 Universidad Mexicana
UNIMEX
grupos de elementos de la página web. Por ejemplo: «Quiero que el encabezado
principal de mi página se muestre en letras grandes de color rojo».
El código siguiente muestra una regla CSS muy simple que proporcionaría el
estilo descrito en el párrafo anterior:
h1 {
color: red;
font-size: 5em;
}

La regla se abre con un selector. Este selecciona el elemento HTML que

vamos a diseñar. En este caso, diseñaremos encabezados de nivel uno (<h1>).
Luego tenemos un conjunto de llaves { }. Entre estas habrá una o más
declaraciones, que tomarán la forma de pares de propiedad y valor. Cada par
especifica cada una de las propiedades de los elementos seleccionados y el valor
que queremos dar a esa propiedad.
Antes de los dos puntos, tenemos la propiedad; y después, el valor. Las
propiedades CSS admiten diferentes valores, dependiendo de qué propiedad se
esté especificando. En el ejemplo anterior, tenemos la propiedad color, que puede
tomar varios valores de color. También tenemos la propiedad de font-size, que
puede tomar varias unidades de tamaño como valor.
Una hoja de estilo CSS contendrá muchas de estas reglas, escritas una tras
otra.
h1 {
color: red;
font-size: 5em;
}

p{
color: black;
}

Algunos valores se aprenden rápidamente, mientras que otros deberán

buscarse. Las páginas de propiedades individuales que hay en el proyecto MDN
proporcionan una forma rápida de buscar propiedades y sus valores en caso de
olvidarlos o desear saber qué más se puede usar como valor.

Módulos CSS
Como hay tantas cosas que se podrían diseñar usando CSS, el lenguaje se
divide en módulos. Verás referencias a estos módulos a medida que explores en

CARLOS MANUEL HERNANDEZ LARA 4

 Universidad Mexicana
UNIMEX
MDN y observarás que muchas de las páginas de documentación están
organizadas en torno a un módulo en particular. Por ejemplo, puedes echar un
vistazo a la referencia MDN del módulo Fondos y bordes para averiguar cuál es su
propósito, qué otras propiedades y características diferentes contiene. También
encontrarás enlaces a la especificación CSS que define la tecnología.
En esta fase, no debes preocuparte demasiado sobre cómo se estructura el
CSS, sin embargo, puede facilitarte la búsqueda de información si, por ejemplo,
sabes que es probable que cierta propiedad se encuentre entre otras similares y,
por lo tanto, en la misma especificación.
Volvamos al módulo de Fondos y bordes para un ejemplo específico: puedes
pensar que tiene lógica que las propiedades background-color y border-color se
definan en este módulo. Y llevas toda la razón.

Especificaciones CSS
Todas las tecnologías de estándares web se definen en extensos
documentos denominados especificaciones, publicados por organizaciones de
estándares que definen con precisión cómo se supone que deben comportarse esas
tecnologías.
El caso de CSS no es diferente: lo desarrolla un grupo del W3C llamado CSS
Working Group. Este grupo está compuesto por representantes de proveedores de
navegadores y otras compañías interesadas en CSS. También hay otras personas,
conocidas como expertos invitados, que actúan como voces independientes y no
están vinculados a ninguna organización.
El CSS Working Group desarrolla o especifica características nuevas del
CSS. Algunas veces lo hacen porque un navegador en particular está interesado en
alguna capacidad, otras porque los diseñadores y desarrolladores web piden una
característica, y otras porque el grupo ha identificado un requisito. El CSS está en
desarrollo constante y todos los días presenta nuevas características disponibles.
Sin embargo, un elemento clave sobre el CSS es que toda la comunidad se esfuerza
mucho en no cambiar nunca nada que pueda perjudicar los sitios web antiguos. ¡Un
sitio web creado en el año 2000, que utiliza el poco CSS disponible que había en
ese momento, aún debería poder utilizarse hoy en día!
Como recién llegado al CSS, es probable que encuentres las
especificaciones abrumadoras: están destinadas a que los ingenieros las utilicen
para implementar soporte de sus características en los agentes de usuario en que
trabajan, no para que lo lean los desarrolladores web para comprender el CSS.
Muchos desarrolladores experimentados preferirán consultar la documentación
disponible en MDN u otros tutoriales. Sin embargo, vale la pena saber que existen
y comprender la relación que hay entre el CSS que estás utilizando, el soporte del
navegador y las especificaciones.
CARLOS MANUEL HERNANDEZ LARA 5
 Universidad Mexicana
UNIMEX

Estilos CSS interno, Externo e Inline

El estilo Interno. Los estilos CSS hechos de esta manera se cargan cada
vez que se actualiza un sitio web, lo que puede aumentar el tiempo de carga.
Además, no podrás usar el mismo estilo CSS en varias páginas, ya que está
contenido en una sola página. Sin embargo, esto también tiene sus beneficios.
Tener todo en una página facilita compartir la plantilla para una vista previa.
El método Externo podría ser el más conveniente. Todo se hace
externamente en un archivo .css. Esto significa que puedes hacer todo el estilizado
en un archivo separado y aplicar el CSS a cualquier página que quieras. El
estilo Externo también puede mejorar los tiempos de carga.
Por último, hablemos del estilo Inline de CSS. Inline trabaja con elementos
específicos que tienen la etiqueta <style>. Cada componente tiene que ser
estilizado, por lo que podría no ser la mejor forma, ni la más rápida para manejar
CSS. Pero puede ser útil, por ejemplo, si quieres cambiar un solo elemento, tener
una vista previa rápida de los cambios o tal vez no tengas acceso a los archivos
CSS.

Ventajas de usar CSS

La diferencia entre un sitio web que implementa CSS y uno que no, es enorme
y definitivamente se nota.

Quizás hayas visto algún sitio web que no se puede cargar por completo y
tiene un fondo blanco con la mayor parte del texto en azul y negro. Eso
significa que la parte CSS del sitio no se cargó correctamente o no existe.

Así es como se ve un sitio con solo HTML, y creo que estarás de acuerdo
conmigo en que no luce muy bien.

Antes de CSS, todo el estilo debía incluirse en el marcado HTML. Esto

significa que había que describir por separado todos los fondos, los colores
de fuente, las alineaciones, etc.

CSS permite estilizar todo en un archivo diferente, creando el estilo allí y

después integrando el archivo CSS sobre el marcado HTML. Esto hace que
el marcado HTML sea mucho más limpio y fácil de mantener.

CSS te permite tener múltiples estilos en una página HTML, y esto hace que
las posibilidades de personalización sean casi infinitas. Hoy en día, esto se
está volviendo una necesidad más que algo básico.
CARLOS MANUEL HERNANDEZ LARA 6
 Universidad Mexicana
UNIMEX

Desventajas de usar CSS

Mayor esfuerzo. El CSS reset es un arma de doble filo: sólo nos ahorra
tiempo en el caso en que no nos interese conservar los estilos por defecto.
Sin embargo, hay estilos que sí puede interesarnos mantener, como por
ejemplo las listas de elementos. De ser así, perderemos tiempo restaurando
estilos en nuestra hoja.

Código «sucio». Si se da el caso mencionado en el primer punto, la

redefinición de estilos genera código CSS excesivo y difícil de comprender.

Problemas de usabilidad. Algunos estilos a los que habitualmente no

prestamos atención deben conservarse. Por ejemplo, quienes navegan con
teclado y sin mouse, usando la tecla Tab para desplazarse, necesitan la
propiedad CSS que remarca el enlace sobre el que están situados. La
mayoría de los desarrolladores olvida redefinir esos estilos.

Más peso. Agregar una hoja de estilos de reset agrega peso a la página,
aumentando ligeramente su tiempo de carga.

CARLOS MANUEL HERNANDEZ LARA 7

 Universidad Mexicana
UNIMEX

Conclusión
En internet podemos encontrar miles de paginas web las cuales con tan
solo entrar por poco tiempo ya se vuelve aburrido e incluso cansado a la vista.

Esto se debe a que estas paginas solo trabajan con HTML puro e incluso
PHP pero no implementan ningún tipo de diseño.

Para ello debemos de implementar a nuestros proyectos estilos y dichos

estilos se realizan con CSS las hojas de estilo.

Pero claro no solo es decir que vamos a implementar las hojas de estilos
ya que esto suena fácil pero también debemos tener idea de como hacerlo, tener
en cuenta las sin fin de posibilidades en cuanto a diseño que las hojas de estilos
nos ofrecen.

Ya que si bien en muchas páginas sí que esta implementado las Hojas de

estilos estos no están de una manera muy bonita.

Debemos de saber que CSS se puede combinar con Bootstrap para que
el diseño se vuelva más completo.

También es verdad que muchas de las características se pueden

implementar directamente en el archivo HTML pero esto solo provoca generar
código basura y simplemente repetir las mismas sintaxis una tras otra para dar
el mismo formato a nuestras etiquetas.

Para ellos debemos hacer la hoja de estilo la cual nos permitirá crear las
mismas características en una sola sintaxis y a cualquier etiqueta que
seleccionemos con el mismo identificador o clase.

CARLOS MANUEL HERNANDEZ LARA 8

 Universidad Mexicana
UNIMEX

Bibliografía
¿Qué es el CSS? - Aprende sobre desarrollo web | MDN. (2023, 9 marzo).
https://developer.mozilla.org/es/docs/Learn/CSS/First_steps/What_is_CSS

B., G. (2023, 11 enero). ¿Qué es CSS? Tutoriales Hostinger.

https://www.hostinger.mx/tutoriales/que-es-css

A. (2016, 29 octubre). Ventajas y desventajas de los CSS resets. 4R

Soluciones | Diseño, Desarrollo y Programación Web & Mobile.
https://www.4rsoluciones.com/blog/ventajas-y-desventajas-de-los-css-resets-2/

CARLOS MANUEL HERNANDEZ LARA 9