CSS Fundamentos: Estructura, Presentación e Interactividad
1. CSS - 1
Profesor Jorge Llantén B.
Diseñador Gráfico Publicitario
www.j2.cl /wwwj2cl @jorgellanten jorgellantenb /jorgellanten /jorgellanten
jueves, 12 de septiembre de 13
10. HTML = CONTENIDO
“HOOOLA, LES QUIERO DECIR QUE BLA
BLA BLA”
CSS = PRESENTACIÓN
“OK, ESO VA CON TEXTO ROJO Y 2 PX DE
MARGEN”
jueves, 12 de septiembre de 13
11. HTML DICE:
“ESO ES UN TÍTULO 1”
“AHÍ TIENE QUE IR UNA IMAGEN”
“ESO ES UN PÁRRAFO”
“ESO ES UN LISTADO”
jueves, 12 de septiembre de 13
12. HTML DICE:
“ESO ES UN TÍTULO 1”
“AHÍ TIENE QUE IR UNA IMAGEN”
“ESO ES UN PÁRRAFO”
“ESO ES UN LISTADO”
<h1>
<img>
<p>
<ul>
jueves, 12 de septiembre de 13
13. CSS DICE:
“ESO VA CON ARIAL”
“ESTA PARTE VA EN NEGRITA Y BORDE ROJO”
“ESE LINK VA SUBRAYADO”
“ESA CAJA VA A LA IZQUIERDA”
jueves, 12 de septiembre de 13
16. Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
jueves, 12 de septiembre de 13
17. <p style="font-family: Arial, Helvetica, sans-serif;
font-size: 14px;color: #F00">este es un párrafo</p>
Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
jueves, 12 de septiembre de 13
18. <p style="font-family: Arial, Helvetica, sans-serif;
font-size: 14px;color: #F00">este es un párrafo</p>
Formas de agregar estilos CSS
Inline: Dentro de la misma etiqueta HTML
este es un párrafo
jueves, 12 de septiembre de 13
21. Formas de
agregar
estilos CSS
Dentro del <head>
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<style type="text/css">
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
color: #F00;
}
</style>
</head>
<body>
<p>este es un párrafo</p>
</body>
</html>
jueves, 12 de septiembre de 13
24. <!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Documento sin título</title>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<p>este es un párrafo</p>
</body>
</html>
Formas de
agregar
estilos CSS
Llamándo a un archivo CSS con los estilos
jueves, 12 de septiembre de 13
25. CSS
HTML HTML HTML HTML
Forma más óptima de trabajar estilos CSS
jueves, 12 de septiembre de 13