4. Definición
• CSS o Cascading Style Sheets es un lenguaje de
hojas de estilo que sirve para describir la forma en
que se dibuja un documento escrito en lenguaje
markup (HTML, XHTML, XML, ect) .
• Se compone de reglas que se aplican en orden de
prioridad.
5. Historia
• EL objetivo del HTML es entregar indicaciones sobre
el contenido.
• Sin embargo, la versión HTML 3.2 introdujo la
posibilidad de agregar estilos visuales a la
presentación del contenido (bgcolor, center, font,
align, width...).
• Esto generó soluciones de diseño pero problemas
de mantención.
6. Historia
• 1994: Primera propuesta de
Håkon Wium Lie
• Trabajabó con Tim Berners Lee en
CERN
• 1996: En W3C, junto a Bert Bos
desarrollan la primera
recomendación: CSS1
7. Sintaxis
• Una regla de CSS consiste en un Selector y un
bloque de Declaración.
• La Declaración consta de Propiedades y sus
respectivos Valores, separados por punto y coma.
p { color : red ; }
Selector Declaración
Propiedad Valor
8. Selectores
• Se aplican estilos sobre elementos
ocupando estos 3 tipos de selectores:
– element
– id
– class
9. element Selector
• Se puede seleccionar por el nombre del elemento.
• Todos los elementos indicados recibirán las mismas reglas.
a{
color: #FF000;
text-decoration: none;
}
<a href=“http://google.com/”>Link</a>
HTML
CSS
Bienvenidos
¡Hola!
Link
Navegador
10. id Selector
• El selector id usa dicho atributo de un elemento HTML para
asignar reglas.
• Deben ser únicos dentro de una página.
• Se escriben con un gato (hash) #.
#ejemplo1{
font-family: “Impact”, Sans-serif;
color: brown;
}
<p id=“ejemplo1”>¡Hola!</p>
HTML
Bienvenidos
¡Hola!
Link
Navegador
CSS
11. class Selector
• El selector class usa dicho atributo de un elemento HTML para
asignar reglas.
• Puede haber más de uno en cada página.
• Se escriben con un punto . .
.ejemplo2{
text-align: right;
font-style: italic;
}
<h1 class=“ejemplo2”>Bienvenidos</h1>
HTML
Bienvenidos
¡Hola!
Link
Navegador
CSS
12. Ejemplos Propiedades
Básicos
• background-color
• border
• display
• float
• width
• height
• text-align
• text-decoration
Nuevos en CSS3
• background-size
• opacity
• border-radius
• text-shadow
• animation
• transition
Ver todos en WebPlatform
13. Orden en cascada
Las reglas en una hoja de estilos se
aplicarán según dos criterios:
– El orden en el aparecen en la hoja.
– Según su valor de especificidad.
14. Orden de aparición
Las últimas reglas reemplazarán las primeras.
Todos los párrafos del HTML serán amarillos.
p{
color: red;
}
p{
color: yellow;
}
15. Especificidad
El valor de especificidad es en “cascada”:
Inline “Style”
id
class
element
#caja p {
color: red;
}
p {
color: yellow;
}
El párrafo con id #caja tendrá letras rojas.
16. Especificidad
No es necesario sobre-especificar:
html body div#caja p{
color: red;
}
Sólo es necesario con lo mínimo que cumpla:
#caja p{
color: red;
}
17. Inserción
Hay 4 fuentes de estilos en un HTML,
donde la última tiene mayor prioridad:
1. Predeterminadas en el navegador
2. Archivo CSS externo
3. Reglas CSS internas
4. Inline “styles”
18. Predeterminadas en el navegador
• Cada navegador interpreta los elementos del HTML
y le aplica estilos predeterminados para ordenar y
jerarquizar el contenido visualmente.
<!DOCTYPE html>
<html>
<head>
<title>Página HTML</title>
</head>
<body>
<h1>Bienvenidos</h1>
<p>¡Hola!</p>
<a href=“http://www.google.com”>Google</a>
</body>
</html>
Bienvenidos
¡Hola!
Google
HTML Navegador
19. Archivo CSS externo
• Se puede crear una hoja de estilos con cualquier
editor de texto.
• Se debe guardar con la extensión .css .
• Se inserta un elemento <link> dentro de la sección
head .
• Se especifica su ubicación con el valor del atributo
href.
<head>
<link rel="stylesheet" type="text/css" href=”css/mystyle.css">
</head>
20. Reglas CSS internas
• Se pueden insertar las reglas en el HTML.
• Se escriben dentro de un elemento <style> que a su
vez está dentro de la sección head.
<head>
<style>
a{
color: #FF000;
text-decoration: none;
}
</style>
</head>
21. Inline “styles”
• Aunque no se recomienda, se puede
aplicar estilos a un elemento
ocupando su atributo “Style”.
<p style=“text-align: left;”>Hello World!</p>