CSS

CSS.01 El lenguaje CSS

Contenidos
CSS
HTML ➜ contenido, CSS ➜ aspecto
Sintaxis
CSS.01 El lenguaje CSS
Conectar CSS con HTML

19 Sep 2022 c7b1a64

Contenidos
HTML ➜ contenido, CSS ➜ aspecto
HTML➜contenido
Sintaxis
CSS➜aspecto
Conectar CSS con HTML

19 Sep 2022 c7b1a64

¿Qué es CSS?
Cascading Style Sheets
HTML➜contenido
Define el aspecto y posicionamiento de los elementos
HTML en la página
CSS➜aspecto
Correctamente usado nos ahorra una enorme cantidad
de trabajo y proporciona consistencia visual al diseño

1
¿Quépresentación
CSS: es CSS? y aspecto
Con HTML Style
Cascading hemos Sheets
estructurado el contenido
Define el aspecto y posicionamiento de los elementos
HTMLCSS
Con en la
vamos
página
a darle el
aspecto y la presentación
Correctamente usado nos ahorra una enorme cantidad
que deseamos
de trabajo y proporciona consistencia visual al diseño

1
2
CSS: presentación
Contenido / Presentación
y aspecto
Con HTML hemos
estructurado el contenido
Con CSS vamos a darle el
aspecto y la presentación
que deseamos

2
3
Contenido
SOLO cambia
/ Presentación
el CSS

3
4
SOLO
Dos lenguajes
cambia el
diferentes
CSS y separados

4
5
Dos lenguajes diferentes y separados

Sintaxis

5
Sintaxis: las reglas
Selector: a que elementos
HTML afecta la regla
Sintaxis
Propiedad: lo que
cambia
Valor: a que valor se
cambia

6
Sintaxis:
Reglas y comentarios
las reglas
Selector: a que elementos
HTML afecta la regla
Propiedad: lo que
cambia
Valor: a que valor se
cambia

6
7
Reglas y comentarios
Selectores simples
De clase .nombre-clase
De identificador #id
Universal *
De elemento nombre-
elemento

De grupo ,

7
8
Selectores combinados
simples
De clase .nombre-clase
Descendiente espacio

>
De identificador
Hijo #id

Universal *siguiente +
Hermano
~ nombre-
De elemento
Hermano
elemento

De grupo ,

8
9
Selectores
PG tutorialcombinados
de W3C Schools 1
Descendiente espacio
Objetivos
Conocer el material sobre HTML/CSS del W3C Schools
Hijo >
Usar los ejemplos “Try It Yourself” de CSS y hacer los ejercicios
Hermano siguiente +
Desarrollo
Hermano ~
Abrimos https://www.w3schools.com/css/
Leemos CSS HOME (menú de la izquierda) y vamos haciendo los
“Try it Yourself”
Repetimos para CSS Selectors hacemos los “Try it Yourself” y
luego los 4 ejercicios que hay al final
10
9
PG tutorial
EC.CSS Auto-Evaluación
de W3C Schools
Sintaxis
1 CSS
Objetivos
Evaluar nuestro
Conocer el material
gradosobre
de comprensión
HTML/CSS del deW3C
la sintaxis
Schools
CSS, en
especial
Usar los de los selectores
ejemplos “Try It Yourself” de CSS y hacer los ejercicios
Desarrollo:
Desarrollo en la plataforma
Entrega:
Abrimosen la plataforma
https://www.w3schools.com/css/
Leemos CSS HOME (menú de la izquierda) y vamos haciendo los
“Try it Yourself”
Repetimos para CSS Selectors hacemos los “Try it Yourself” y
luego los 4 ejercicios que hay al final
10
11
EC.CSS Auto-Evaluación Sintaxis CSS
Objetivos
Evaluar nuestro grado de comprensión de la sintaxis CSS, en
Conectar CSS con HTML
especial de los selectores
Desarrollo: en la plataforma
Entrega: en la plataforma

11
Conectando HTML y CSS
Modos de introducir CSS
en HTML
Conectar CSS con HTML
1) Hoja de estilos externa
2) Elemento <style>
3) Atributo style
Lo recomendable es usar
siempre la 1a opción

12
Conectando
Multiples HTML,
HTMLpero
y CSS
solo un CSS
Modos de introducir CSS
en HTML
1) Hoja de estilos externa
2) Elemento <style>
3) Atributo style
Lo recomendable es usar
siempre la 1a opción

12
13
Multiples
1) Hoja deHTML,
estilospero
externa
solo un CSS

13
14
1) Hoja de estilos externa

14
15
1) Hoja de estilos externa

Los mismos estilos aplican

a todo el sitio web
La opción más organizada
y más fácil de mantener

15
16
1) Etiqueta
2) style externa
Hoja de estilos
El CSS está dentro de un
Los mismosstyle
elemento estilos aplican
a todo el sitio web
El elemento style debe ir
La opción más organizada
dentro del elemento head
y más fácil de mantener
Solo afecta a ese
documento HTML

16
17
2) Etiqueta <style>
style
El CSS
Con style
está lo
dentro de un
mas habitual
elemento
es style la
que se rompa
consistencia: aspecto
El elemento style debe ir
casero y poco profesional
dentro del elemento head
Solo afecta a ese
documento HTML

17
18
 Etiqueta style
2) Atributo
3) <style>
Con style lo mas habitual
es que se rompa la
consistencia: aspecto
casero y poco profesional

El CSS esta dentro del atributo style de un elemento y

solo afecta a ese elemento 18
19
3) Atributo style
Difícil de mantener
Aspecto inconsistente
Aun peor: evitarlo siempre
que sea posible

El CSS esta dentro del atributo style de un elemento y

solo afecta a ese elemento 19
20
PG tutorial style
3) Atributo de W3C Schools 2
Objetivos
Difícil de mantener
Seguir usando el material sobre HTML/CSS del W3C Schools
Aspecto inconsistente
Usar los ejemplos “Try It Yourself” de CSS y hacer los ejercicios
Aun peor: evitarlo siempre
Desarrollo
que sea posible
Abrimos https://www.w3schools.com/css/
Leemos CSS How To (menú de la izquierda) y vamos haciendo
los “Try it Yourself” y luego los 4 ejercicios que hay al final

20
21
PG tutorial de W3C Schools 2
Prioridad
Si usamos múltiples
Objetivos
mecanismos,
Seguir usandoseel aplican la HTML/CSS del W3C Schools
material sobre
siguiente
Usar los prioridad deIt Yourself” de CSS y hacer los ejercicios
ejemplos “Try
menor a mayor:
Desarrollo
externa
Abrimos https://www.w3schools.com/css/
<style>
Leemos CSS How To (menú de la izquierda) y vamos haciendo
style
los “Try it Yourself” y luego los 4 ejercicios que hay al final

21
22
Prioridad
Si hay
usamos
masmúltiples
de una regla que afecte al mismo elemento
mecanismos,
se aplican reglasse aplican
de prioridad:
la
siguiente prioridad
orden: la deprioridad
última tiene
menor a mayor:la más específica tiene prioridad, por ejemplo h2
especificidad:
es más específico que *, y div h2 es más específico que h2,
externa
h2#rojo es más específico que h2
<style>
forzar: la palabra clave !important tiene la máxima prioridad
style

22
23
Prioridad
Prioridades: ejemplo
Si hay mas de una regla que afecte al mismo elemento
se aplican reglas de prioridad:
orden: la última tiene prioridad
especificidad: la más específica tiene prioridad, por ejemplo h2
es más específico que *, y div h2 es más específico que h2,
h2#rojo es más específico que h2
forzar: la palabra clave !important tiene la máxima prioridad

23
24
Prioridades:
EC.CSS-1 conectar
ejemplo
HTML y CSS
Objetivo
Practicar el uso de los 3 métodos de añadir CSS a el HTML
Desarrollo: en la plataforma
Entrega: en la plataforma

24
25
EC.CSS-1 conectar HTML y CSS
Quizlet
Objetivo
Practicar el uso de los 3 métodos de añadir CSS a el HTML
Desarrollo: en la plataforma
Entrega: en la plataforma

25
26
Quizlet
¿Preguntas?

26