INTRO A CSS

¿Cómo
hacemos para
darle estilo?
CSS Inline
Etiqueta de Estilo
entrada Inline

<h1 style=”color: red; font-size:20;”>

Algunos lenguajes de la web

</h1>

Etiqueta de
salida
Realizar parte II de:

Ejercicio
“Lenguajes en la Web”
¿Por qué no es eficiente
colocar el estilo en cada
etiqueta?
¿Me ayudan cambiando el tamaño de
letra de todos los títulos (h2) de esta
página?
CSS en el head
(embedded CSS)
Etiqueta de
entrada

<style>

h1 {
color:red;
font-size: 20px;
}
Aquí no se usan
“ ” (comillas)

</style>
Etiqueta de
salida
Realizar parte III de:
Ejercicio

“Lenguajes en la Web”
 ¿Por qué tampoco es muy
eficiente tener el estilo en el
head?
Actualiza el
estilo de 60
páginas
CSS stylesheet
externo
index.html
<h1>A mi me gusta el color azul</h1>
<h2>A mi me gusta el color rojo</h2>

<link>
stylesheet.
css
h1 {
color: blue;
}

h2 {
color: red;
}
¿Cómo conectamos el
HTML con el CSS?

<link
En rel=”stylesheet”
el head:
type=”text/css”
href=”stylesheet.css”>
Realizar parte IV de:

Ejercicio
“Lenguajes en la Web”
DOM
(Document Object Model)
¿Cómo funciona?
Documento
HTML

Elemento Elemento
HEAD BODY

Elemento Elemento Elemento Elemento Elemento

META TITLE H1 P UL

DOM es un interfaz que Elemento

STRONG
utiliza el browser para
navegar de manera
jerárquica a través del árbol
Elemento Elemento Elemento
de elementos. LI LI LI