✍️ Sesión de Autoaprendizaje · Semana 2

Conociendo lo que es CSS

¡Bienvenidos!

¿Qué es CSS?

CSS significa Cascading Style Sheets (Hojas de Estilo en Cascada). Es un lenguaje de diseño utilizado para controlar el aspecto o presentación de documentos HTML y XML. CSS describe cómo los elementos HTML deben ser mostrados en la pantalla, en papel o en otros medios.

Al utilizar CSS, los desarrolladores pueden separar el contenido de un documento HTML de su presentación. Esto significa que pueden cambiar el diseño de un sitio web simplemente modificando un archivo CSS sin tener que alterar el contenido HTML. CSS permite definir estilos para elementos individuales, como tamaños de fuente, colores, márgenes, espaciado, y mucho más. También permite la creación de diseños complejos y responsivos, adaptados a diferentes tamaños de pantalla y dispositivos.

Introducción

🎯 Objetivo de la sesión

Al finalizar esta sesión, identificarás los conocimientos de los diferentes tipos de estilos CSS que se utilizan en el desarrollo de un sitio web.

Reflexión

💡 Preguntas de reflexión

  1. ¿Sabías que CSS permite definir la apariencia y el estilo visual de una página web, incluyendo el diseño, los colores, las fuentes, el espaciado y otros aspectos estéticos? Esto asegura una presentación coherente y atractiva del contenido para los usuarios.
  2. ¿Sabías que CSS separa el contenido estructural (HTML) de la presentación visual, lo que facilita la gestión y mantenimiento del código? Esta separación mejora la accesibilidad, la mantenibilidad y la escalabilidad del sitio web.

Tema 1 · Aplicación de Estilos CSS a páginas Web

Existen diferentes tipos de CSS que se utilizan en el desarrollo web para aplicar estilos a páginas HTML. Estos tipos de CSS pueden clasificarse en función de cómo se aplican y gestionan los estilos en un proyecto. Los principales tipos de CSS son:

Tema 2 · CSS Externo

El CSS externo se almacena en archivos separados con extensión .css. Estos archivos contienen todas las reglas de estilo y se enlazan al documento HTML utilizando la etiqueta <link> en la sección <head> del HTML. Este es el método más comúnmente utilizado y es ideal para mantener un estilo consistente en todo un sitio web.

Ejemplo

<link rel="stylesheet" type="text/css" href="estilos.css">

👉 Pregunta de reflexión: ¿Sabías que el uso de CSS externo facilita la colaboración en equipos de desarrollo web? Al tener un archivo CSS compartido, los desarrolladores pueden trabajar de manera colaborativa en el diseño visual del sitio web, lo que mejora la eficiencia y la coherencia en el proceso de desarrollo.

Tema 3 · CSS Interno

El CSS interno se escribe dentro del propio documento HTML, dentro de la etiqueta <style> en la sección <head> del documento. Este método es útil cuando se necesita aplicar estilos específicos solo a una página HTML en particular.

Ejemplo

<style> /* Estilos CSS internos */ </style>

👉 Pregunta de reflexión: ¿Sabías que el CSS interno puede ser útil para pequeños proyectos o páginas web simples donde no se requiere una gran cantidad de estilos? Al definir los estilos directamente dentro del documento HTML, se elimina la necesidad de crear y enlazar un archivo CSS externo, lo que puede agilizar el proceso de desarrollo.

Tema 4 · CSS en Línea

El CSS en línea se aplica directamente a elementos HTML utilizando el atributo style dentro de la etiqueta del elemento. Este método es útil cuando se necesita aplicar estilos únicos a un elemento específico.

Ejemplo

<p style="color: blue; font-size: 16px;">Texto con estilo CSS en línea</p>

👉 Pregunta de reflexión: ¿Sabías que el CSS en línea puede ser útil cuando se necesita aplicar estilos rápidamente a un elemento específico en una página web sin tener que crear un archivo CSS externo o interno? Esto puede ser especialmente útil en situaciones donde se necesitan cambios rápidos o se está prototipando una página web.

Tema 5 · CSS Importado

El CSS importado permite incluir un archivo CSS dentro de otro archivo CSS utilizando la regla @import. Sin embargo, este método no se recomienda debido a que puede ralentizar la carga de la página, especialmente si se utilizan múltiples archivos CSS importados.

Ejemplo

@import url("otro-archivo.css");

👉 Pregunta de reflexión: ¿Sabías que aunque el CSS importado puede ayudar a organizar y modularizar los estilos, también puede afectar el rendimiento de la página web si se utiliza en exceso? Cada declaración @import genera una solicitud HTTP adicional, lo que puede aumentar el tiempo de carga de la página.

Tema 6 · Resumen de Tipos de CSS

Estos son los principales tipos de CSS utilizados en el desarrollo web. Cada uno tiene sus propias ventajas y desventajas, y la elección del método adecuado dependerá de los requisitos específicos del proyecto y de las preferencias del desarrollador.

👉 Pregunta de reflexión: ¿Por qué se indica que HTML no es un lenguaje de programación?

📝 Ejercicio práctico

Realiza un informe indicando cuáles son las ventajas y desventajas de cada uno de los tipos de CSS.

Tema 7 · Selectores CSS

Los selectores CSS son patrones que se utilizan para seleccionar y aplicar estilos a elementos HTML específicos. Aquí te presentamos algunos tipos de selectores CSS comunes:

Selector de Elemento

Selecciona todos los elementos de un tipo específico.

p { /* Estilos para todos los elementos <p> */ }

Selector de Clase

Selecciona elementos que tienen un atributo de clase específico.

.mi-clase { /* Estilos para elementos con la clase "mi-clase" */ }

Selector de ID

Selecciona un elemento con un atributo de ID específico.

#mi-id { /* Estilos para el elemento con el ID "mi-id" */ }

Selector Universal

Selecciona todos los elementos en un documento.

* { /* Estilos para todos los elementos */ }

Selector de Clase Anidado

Selecciona elementos que son descendientes de un elemento con una clase específica.

.contenedor .elemento { /* Estilos para elementos con la clase "elemento" dentro de "contenedor" */ }

Tema 8 · Cierre

Estos son solo algunos ejemplos de selectores CSS. Hay muchos más selectores disponibles que permiten una selección más específica y detallada de elementos HTML para aplicar estilos. La comprensión y el uso adecuado de los selectores CSS son fundamentales para crear hojas de estilo efectivas y bien estructuradas.

👉 Ejercicio práctico: Realiza un informe indicando cuáles son las ventajas y desventajas de los selectores CSS.

🎉 ¡Eso es todo por hoy!

Esperamos que este contenido te haya proporcionado una perspectiva más amplia y detallada sobre los diferentes tipos de CSS y cuándo es conveniente utilizarlos.

¡Hasta la próxima!

Resumen y Ejemplos Prácticos

Aquí tienes un repaso rápido de todo lo que vimos hoy, con ejemplos listos para usar en clase:

📌 Los 4 tipos de CSS

  • Externo: El más usado. Estilos en un archivo .css separado, enlazado con <link>. Ideal para sitios completos.
  • Interno: Estilos dentro de <style> en el <head>. Útil para una sola página.
  • En línea: Estilos dentro del atributo style="" del elemento. Para cambios rápidos y específicos.
  • Importado: Usa @import dentro de un CSS para cargar otro CSS. No recomendado por rendimiento.

💻 Ejemplo: CSS Externo

En tu archivo index.html:

<link rel="stylesheet" href="estilos.css">

En tu archivo estilos.css:

body { background-color: black; color: white; }

💻 Ejemplo: CSS Interno

<style>

  h1 { color: blue; font-size: 32px; }

</style>

💻 Ejemplo: CSS en Línea

<p style="color: red; font-weight: bold;">Hola mundo</p>

🎯 Los 5 selectores más importantes

  • p { } — selector de elemento, aplica a todos los <p>
  • .mi-clase { } — selector de clase, aplica a elementos con class="mi-clase"
  • #mi-id { } — selector de ID, aplica a un elemento único con id="mi-id"
  • * { } — selector universal, aplica a absolutamente todo
  • .contenedor .elemento { } — selector anidado, aplica solo a .elemento dentro de .contenedor

💡 Truco para la actividad: Si te preguntan cuál tipo de CSS usar, recuerda: externo para proyectos grandes, interno para una sola página, en línea para un elemento específico rápido. El importado casi nunca se recomienda.