‘Unidad 2:’ {

Diseño de
Aplicaciones Web

}
1 CONTENIDOS DE LA CLASE {
2
3 CSS HOJAS DE ESTILO EN CASCADA
4
5
6
Introducción a CSS y su función en el Diseño Web
7
8
9
10 Selección de elementos y aplicaciones de estilos
11
12
13
14 }
Argentina Programa 4.0
 UNIDAD 2 - Diseño de Aplicaciones Web

1
2
‘CSS Hojas de Estilo en Cascada’ {
3
4
5
6
7 [1. Introducción a ‘CSS’ y su
8 función en el ‘diseño web’]
9
10
11
12
13
14 }
Argentina Programa 4.0
CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 ¿Qué es CSS? {
2
3
4
< CSS (Cascading Style Sheets) es un lenguaje
5
de diseño utilizado en conjunto con HTML para
6
7
crear páginas web atractivas y visualmente
8
agradables. CSS se utiliza para aplicar
9 estilos, colores, formatos, diseños y otros
10 aspectos visuales a los elementos HTML en una
11 página web.>
12
13
14 }

Argentina Programa 4.0

CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 ¿Por qué es importante utilizar CSS en el diseño web? {

2
3
< Es importante utilizar CSS en el diseño web porque permite La
4 separación de los estilos y el contenido. En lugar de aplicar
5 estilos directamente en el HTML (como se hacía antes), los
estilos se aplican a través de una hoja de estilo CSS externa.
6
Esto significa que puedes cambiar el estilo de todo el sitio web
7 simplemente modificando la hoja de estilo, sin tener que cambiar
8 el contenido HTML, lo que permite una mayor flexibilidad y
facilidad de mantenimiento en el diseño de la página.
9
Además, los estilos CSS se pueden aplicar a múltiples elementos
10 HTML al mismo tiempo, lo que ahorra tiempo y esfuerzo en la
11 creación y mantenimiento de sitios web.
Esto mejora la accesibilidad y la eficiencia de la página web. >
12
13
14 }

Argentina Programa 4.0

 UNIDAD 2 - Diseño de Aplicaciones Web

1
2
‘CSS Hojas de Estilo en Cascada’ {
3
4
5
6
7 [2. Selección de ‘elementos’ y
8 aplicaciones de ‘estilos’]
9
10
11
12
13
14 }
Argentina Programa 4.0
CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 ¿Qué son los selectores en CSS? {

2
3 < En CSS, los selectores son patrones que se utilizan para
4 seleccionar elementos HTML específicos a los que se aplicarán
los estilos definidos en una regla CSS.
5
CSS funciona mediante la selección de elementos HTML y la
6 aplicación de estilos específicos a ellos. Los estilos se
7 definen en reglas que se aplican a ciertos selectores, que
8 pueden ser etiquetas HTML basadas en su tipo, clases, posición
en la estructura del documen, IDs o atributos, entre otros
9
criterios. Los estilos pueden ser aplicados directamente a un
10 elemento, a un grupo de elementos, o a todos los elementos de
11 un tipo específico en una página web. >
12
13 }
14

Argentina Programa 4.0

CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 Selectores en CSS {
2
3
4
5
6
7
8
9
10
11
12
13 }
14

Argentina Programa 4.0

CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 Tipos de selectores {
2
3
Selector de tipo {
4
5 < selecciona todos los elementos HTML que tienen el mismo tipo,
como "p" para párrafos. >
6
7 }
8
Selector de ID {
9
< selecciona un elemento HTML específico basado en su atributo
10 "id". El selector de ID se define utilizando el símbolo "#"
11 seguido del valor del atributo "id". >

12
}
13 }
14

Argentina Programa 4.0

CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 Tipos de selectores {
2
3
Selector de clase {
4
5 < selecciona elementos HTML específicos que tienen una clase en
común. El selector de clase se define utilizando el símbolo "."
6 seguido del nombre de la clase. >

7 }
8
Selector de atributo {
9
< selecciona elementos HTML basados en el valor de uno de sus
10 atributos. Por ejemplo, puede seleccionar todos los elementos con
11 un atributo "href" que contenga cierto valor. >

12
}
13 }
14

Argentina Programa 4.0

CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 Tipos de selectores {
2
3
Selector descendiente {
4
5 < selecciona un elemento HTML dentro de otro elemento HTML. Por
ejemplo, puede seleccionar todos los elementos "p" dentro de un
6 elemento "div". >

7 }
8
Selector de pseudoclase {
9
< selecciona elementos HTML basados en un estado o acción
10 específica, como "hover" (cuando el usuario pasa el mouse sobre
el elemento) o "visited" (cuando el usuario ha visitado un
11 enlace). >
12
}
13 }
14

Argentina Programa 4.0

CSS Hojas de Estilo en Cascada UNIDAD 2 - Diseño de Aplicaciones Web

1 ¿Cómo se aplica un estilo en línea a un elemento HTML? {

2
3 < El estilo en línea es una forma de aplicar
4
estilos directamente a un elemento HTML,
5
6
utilizando el atributo style. Este atributo se
7 puede utilizar en cualquier elemento HTML que
8 admita atributos, como párrafos, encabezados,
9 imágenes, enlaces y otros. >
10
11
12
13 }
14

Argentina Programa 4.0