INTRODUCCIÓN A LAS CSS.

PROFESOR: VENCEDOR:
INFORMÁTICA

Anaco, agosto de 2024

INTRODUCCIÓN A LAS CSS

 El diseño de una página o sitio web necesita un lenguaje común para que los

navegadores puedan interpretarlo y mostrarlo a las personas de la forma correcta. Pero

también lo requieren para que otros diseñadores hagan las modificaciones necesarias para

su optimización. Uno de estos lenguajes es el CSS, un gran aliado del HTML que

transforma la experiencia de tus visitantes.

¿Qué es CSS?

CSS son las siglas en inglés para «hojas de estilo en cascada» (Cascading Style

Sheets). Básicamente, es un lenguaje que maneja el diseño y presentación de las páginas

web, es decir, cómo lucen cuando un usuario las visita. Funciona junto con el lenguaje

HTML que se encarga del contenido básico de los sitios. Se les denomina hojas de estilo

«en cascada» porque puedes tener varias y una de ellas con las propiedades heredadas (o

«en cascada») de otras.

Para muchas personas, una simple plantilla de blog es suficiente. Aun así, cuando

quieras personalizar la apariencia de un sitio, necesitarás implementar CSS que, en

conjunto con un buen CMS, te ayudará a potenciar el alcance de tu contenido.

¿Para qué sirve CSS?

Con CSS, puedes crear reglas para decirle a tu sitio web cómo quieres mostrar la

información y guardar los comandos para elementos de estilo (como fuentes, colores,

tamaños, etc.) separados de los que configuran el contenido.

Además, puedes crear formatos específicos útiles para comunicar tus ideas y

producir experiencias más agradables, en el aspecto visual, para los usuarios del sitio web.
¿Cómo funciona CSS?

CSS funciona como complemento a la información que forma parte de un sitio web.

Mientras que el código en HTML incluye todos los datos, el código en CSS se encarga de

darles formato y presentarlos visualmente a través de un navegador.

Al acceder a un sitio web, el navegador debe rastrear la información contenida en el

HTML y traducirla a un DOM (o modelo de objetos del documento). Estos objetos deberán

ser conjuntados con los bloques de código correspondientes en CSS para que el estilo

elegido sea aplicado a ellos y aparezcan en el formato asignado en el ordenador.

Según sean los selectores que hayas utilizado en tu CSS, se aplicarán diferentes

propiedades a cada bloque de información en HTML. Al usarlos, podrás modificar, con

facilidad, el estilo de un conjunto definido de bloques y mantener la imagen de tu marca en

todo tu contenido.

Ventajas y desventajas de usar CSS

Ventajas de usar CSS

 Separación de la estructura y la presentación: permite separar el contenido

HTML de su presentación visual. Es decir, te permite mantener el código HTML

limpio y estructurado, mientras que el estilo se define en un archivo CSS separado.

Este orden mejora la legibilidad del código y facilita el mantenimiento, así como la

actualización de los estilos.

 Consistencia y mantenibilidad: Al utilizar CSS, puedes aplicar estilos de manera

consistente a un sitio o aplicación web. Los estilos se definen una vez y se aplican a
 múltiples elementos en las páginas, lo que favorece la renovación de la apariencia

visual de todo el proyecto.

 Eficiencia en el rendimiento: permite cargar estilos externos en un archivo

separado. Con esto, el navegador almacenará en caché los estilos y los aplicará a

todas las páginas del sitio, lo que mejora el rendimiento al reducir la cantidad de

datos que deben transferirse entre el servidor y el cliente.

 Flexibilidad y control: Asimismo, ofrece una amplia gama de propiedades y

selectores con los que tendrás un control preciso sobre el estilo de los elementos

HTML. Podrás modificar, de forma sencilla, los colores, fuentes, márgenes,

tamaños, diseños, etc. Gracias a estas características, podrás personalizar y adaptar a

varios dispositivos y tamaños de pantalla tu sitio web.

Desventajas de usar CSS

 Curva de aprendizaje: puede tener una curva de aprendizaje empinada, en

particular, para los principiantes. Entender, por completo, todas las propiedades,

selectores y conceptos avanzados puede llevar tiempo y práctica.

 Compatibilidad entre navegadores: Aunque los estándares de CSS son de los más

aceptados, algunos navegadores podrían interpretar y renderizar los estilos de

manera diferente. Esto puede resultar en inconsistencias visuales y requerir pruebas

o ajustes adicionales para garantizar la compatibilidad entre plataformas.

 Especificidad y herencia: utiliza reglas de especificidad y herencia para determinar

qué estilos se aplican a los elementos. En ocasiones, el orden de las reglas y la

jerarquía pueden generar resultados inesperados. Esto requiere una comprensión

 cuidadosa de cómo funcionan estas reglas para evitar conflictos y problemas de

estilo.

 Limitaciones en la maquetación: Aunque CSS ofrece una amplia gama de

propiedades para el diseño y la maquetación, puede presentar limitaciones en ciertos

casos más complejos. Algunos diseños específicos pueden requerir soluciones

adicionales o el uso de técnicas más avanzadas para lograr el resultado deseado.

¿Cómo seleccionar elementos HTML?

Para seleccionar elementos HTML en JavaScript, puedes utilizar diferentes

métodos:

1. getElementById(id): Este método busca un elemento HTML con el id especificado

y devuelve un solo elemento. Por ejemplo:

javascript
const elemento = document.getElementById("miElemento");

2. querySelectorAll(selector): Este método realiza una búsqueda de elementos en el

DOM y devuelve una lista de elementos que coinciden con el selector especificado.

Puedes utilizar selectores CSS para seleccionar elementos de diferentes formas. Por

ejemplo:

javascript
const elementos = document.querySelectorAll(".clase");
const elementos2 = document.querySelectorAll('[name="nombre"]');
const elementos3 = document.querySelectorAll("div");

Estos son solo algunos ejemplos de cómo seleccionar elementos HTML

Propiedades básicas CSS

Aquí hay algunas propiedades básicas:

1. Color: Esta propiedad se utiliza para establecer el color del texto. Puedes

especificar el color utilizando nombres de color, códigos hexadecimales o valores

RGB. Por ejemplo:

Css
color: red;
color: #00ff00;
color: rgb(255, 0, 0);

2. Font-size: Esta propiedad se utiliza para establecer el tamaño de la fuente del texto.

Puedes especificar el tamaño utilizando unidades de medida como píxeles (px),

puntos (pt) o porcentajes (%). Por ejemplo:

Css
font-size: 16px;
font-size: 12pt;
font-size: 80%;

3. Color de fondo: Esta propiedad se utiliza para establecer el color de fondo de un

elemento. Puedes especificar el color de la misma manera que con la propiedad

color. Por ejemplo:

Css
background-color: blue;
background-color: #ff0000;
background-color: rgb(0, 255, 0);

4. Margen: Esta propiedad se utiliza para establecer los márgenes alrededor de un

elemento. Puede especificar los márgenes de forma individual (margen superior,

margen derecho, margen inferior, margen izquierdo) o utilizar la propiedad margen

abreviada para establecer todos los márgenes a la vez. Por ejemplo:

 Css
margin: 10px;
margin-top: 5px;
margin-right: 10px;
margin-bottom: 15px;
margin-left: 20px;

5. Padding: Esta propiedad se utiliza para establecer el espacio de relleno dentro de

un elemento. Al igual que con los márgenes, puedes especificar el espacio de

relleno de forma individual (padding-top, padding-right, padding-bottom, padding-

left) o utilizar la propiedad abreviada padding para establecer todos los espacios de

relleno a la vez. Por ejemplo:

Css
padding: 10px;
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;

Estas son solo algunas de las propiedades básicas de CSS. Hay muchas más

propiedades disponibles que te permiten personalizar la apariencia de tus elementos HTML.

El diseño de páginas web con CSS (Cascading Style Sheets):

es una herramienta esencial que permite crear sitios web modernos y eficientess,

desde los más simples hasta los más complejos. Algunos de los tipos de diseños más

comunes son:

1. Diseño Responsivo

 Adaptación a diferentes dispositivos: Las páginas se ajustan automáticamente a

diferentes tamaños de pantalla (móviles, tablets, desktops).

  Experiencia de usuario óptima: El contenido se reorganiza y se escala para

ofrecer la mejor visualización en cualquier dispositivo.

 Media queries: Permiten aplicar estilos específicos según el ancho de la pantalla.

2. Diseño Basado en Grid (Grilla)

 Estructura sólida: Crea una estructura en forma de cuadrícula para organizar los

elementos de la página.

 Flexibilidad: Permite distribuir los elementos de forma equitativa o desigual dentro

de la cuadrícula.

 Complejidad: Ideal para diseños más complejos y sofisticados.

3. Diseño Basado en Flexbox

 Flexibilidad: Ofrece una manera flexible de organizar los elementos en una sola

dirección (fila o columna).

 Responsividad: Permite crear diseños que se adapten fácilmente a diferentes

tamaños de pantalla.

 Sencillez: Ideal para diseños más simples y rápidos de implementar.

4. Diseño Modular

 Componentes reutilizables: Divide la página en componentes (módulos)

independientes.

 Mantenimiento: Facilita la creación de diseños consistentes y la actualización de

componentes.

 Escalabilidad: Permite construir páginas más grandes y complejas de forma

organizada.
5. Diseño Material Design

 Estética de Google: Sigue las pautas de diseño de Google para crear interfaces

intuitivas y visualmente atractivas.

 Elementos interactivos: Utiliza sombras, animaciones y transiciones para crear

efectos visuales interesantes.

 Experiencia de usuario fluida: Prioriza la facilidad de uso y la accesibilidad.

Otros Tipos

 Diseño Minimalista: Enfatiza la simplicidad y la funcionalidad.

 Diseño Plano: Utiliza colores planos y evita los gradientes y las texturas.

 Diseño Parallax: Crea un efecto de profundidad al mover los elementos de la

página a diferentes velocidades.

Colores y Tipografía en CSS: La Paleta y la Voz de tu Diseño

Los colores y la tipografía son elementos fundamentales en el diseño web, y CSS

nos brinda las herramientas para definirlos y personalizarlos a nuestro gusto. Estos dos

aspectos no solo influyen en la estética de una página web, sino que también juegan un

papel crucial en la experiencia del usuario.

Colores en CSS

CSS nos permite establecer los colores de diferentes elementos de una página web,

como el fondo, el texto, los bordes, etc. Existen diversas formas de especificar un color:

 Nombres de colores: Son palabras clave que representan colores conocidos, como

red, blue, green, etc.

  Hexadecimal: Un código de seis dígitos que indica la intensidad de los colores rojo,

verde y azul (RGB), por ejemplo, #FF0000 para el rojo.

 RGB: Especifica un color combinando los valores de rojo, verde y azul en un rango

del 0 al 255, por ejemplo, rgb(255, 0, 0) para el rojo.

 RGBA: Similar a RGB, pero añade un cuarto canal para la transparencia, por

ejemplo, rgba(255, 0, 0, 0.5) para un rojo semitransparente.

 HSL: Define un color en función de su tono, saturación y luminosidad, por ejemplo,

hsl(0, 100%, 50%) para el rojo.

 HSLA: Similar a HSL, pero añade un cuarto canal para la transparencia.

Ejemplo:

CSS

body {
background-color: #f0f0f0; /* Fondo gris claro */
}
h1 {
color: rgb(0, 128, 0); /* Verde */
}
Usa el código con precaución.

Tipografía en CSS

La tipografía se refiere a la elección de las fuentes, tamaños, estilos y espaciado del texto.

CSS nos ofrece un gran control sobre estos aspectos:

 Familias de fuentes: Especifica la fuente que se utilizará para el texto, por ejemplo,

font-family: Arial, sans-serif;.

 Tamaño de fuente: Define el tamaño del texto en píxeles, ems o porcentajes, por

ejemplo, font-size: 16px;.

  Estilo de fuente: Aplica estilos como negrita, cursiva o subrayado, por ejemplo,

font-style: italic;.

 Peso de fuente: Define la intensidad de la fuente, desde ligero a negrita, por

ejemplo, font-weight: bold;.

 Alineación del texto: Alinea el texto a la izquierda, al centro o a la derecha, por

ejemplo, text-align: center;.

Ejemplo:
CSS

p {
font-family: Georgia, serif;
font-size: 18px;
line-height: 1.5;
}
Usa el código con precaución.

Importancia de los Colores y la Tipografía en el Diseño Web

 Legibilidad: La elección de los colores y las fuentes debe garantizar que el texto

sea fácil de leer.

 Jerarquía visual: Los colores y los tamaños de fuente pueden ayudar a establecer

una jerarquía visual y guiar al usuario por la página.

 Branding: Los colores y las fuentes pueden reforzar la identidad de una marca.

 Emociones: Los colores evocan diferentes emociones y pueden influir en la

percepción del usuario.

Maquetación con CSS: Dando Forma a tus Páginas Web

Es el proceso de organizar y distribuir los elementos de una página web en una

disposición visualmente atractiva y funcional. CSS nos proporciona un control preciso

sobre el diseño y la estructura de nuestras páginas, permitiéndonos crear diseños

personalizados y adaptables.

Conceptos Clave en la Maquetación con CSS

 Caja: Todos los elementos en HTML pueden ser considerados como cajas. CSS nos

permite controlar el tamaño, el margen, el padding y el borde de estas cajas.

 Modelo de caja: Describe cómo se calcula el tamaño total de un elemento,

incluyendo el contenido, el padding, el borde y el margen.

 Posicionamiento: Permite colocar elementos en posiciones específicas dentro de la

página, ya sea de forma estática o relativa a otros elementos.

 Flexbox: Un modelo de diseño flexible que facilita la creación de diseños

responsivos y distribuciones no lineales.

 Grid: Un sistema de cuadrícula que permite organizar los elementos en filas y

columnas, ideal para diseños complejos y estructurados.

Técnicas de Maquetación con CSS

 Flujo de documento normal: Los elementos se colocan uno debajo del otro,

siguiendo el orden en que aparecen en el HTML.

 Posicionamiento absoluto: Los elementos se colocan en una posición específica en

relación con la ventana del navegador.

 Posicionamiento relativo: Los elementos se posicionan en relación a su posición

normal en el flujo del documento.

 Posicionamiento fijo: Los elementos se fijan en una posición específica en la

ventana del navegador, incluso al desplazarse.

  Flexbox: Permite crear diseños flexibles y responsivos, distribuyendo los elementos

en filas o columnas.

 Grid: Crea una estructura de cuadrícula para organizar los elementos de manera

más precisa.

Ejemplo de Maquetación con Flexbox

CSS

.container {
display: flex;
justify-content: space-between;
}
.item {
flex: 1;
padding: 10px;
}
Usa el código con precaución.

Este código crea un contenedor flex y divide su espacio entre tres elementos .item de igual

tamaño.

Herramientas y Recursos Útiles

 MDN Web Docs: La documentación oficial de Mozilla para CSS es un recurso

invaluable para aprender sobre las diferentes propiedades y técnicas.

 W3Schools: Ofrece tutoriales y ejemplos prácticos sobre CSS.

 CodePen: Una plataforma para experimentar con HTML, CSS y JavaScript en

tiempo real.

 Can I Use: Consulta la compatibilidad de las diferentes propiedades CSS en los

navegadores.