2. Contenidos
Introducción a las hojas de estilo
◦ Anatomía de una regla.
◦ Anatomía de una declaración
◦ Reglas y Selectores
◦ Enlace de la hoja de estilo al documento
Selectores de CSS
Edwin Mamani Lopez 2
3. Introducción: ¿Qué es CSS?
CSS es un lenguaje de hojas de estilos creado
para controlar el aspecto o presentación de
documentos electrónicos definidos con
HTML y XHTML.
Al crear una página web, se utiliza el
lenguaje HTML/XHTML para marcar los
contenidos, el lenguaje CSS para definir el
aspecto de cada elemento:
color, tamaño, separación
horizontal, vertical, posición...
Edwin Mamani Lopez 3
4. Anatomía de una regla
Una regla consta de dos partes:
◦ Selector.- Es el enlace entre el documento
HTML y el estilo.
◦ Declaración.- Especifica qué efecto tendrá (es
decir, el estilo).
Regla CSS
Declaración
h1 { color : silver; }
Selector Propiedad valor
Edwin Mamani Lopez 4
5. Anatomía de una declaración
Una declaración tiene dos partes:
◦ Propiedad.- Cualidad o característica que algún
elemento HTML/XHTML posee.
◦ Valor.- Es la especificación de la propiedad.
Regla CSS
Declaración
h1 { color : silver; }
Selector Propiedad valor
Edwin Mamani Lopez 5
6. Definición de términos
Cada uno de los estilos que
• Regla componen una hoja de estilos
CSS.
• Selector Indica el(los) elemento(s) HTML
a los que se aplica la regla CSS.
• Declaración Específica los estilos que se
aplican a los elementos (HTML).
• Propiedad Permite modificar el aspecto de
una característica del elemento.
Indica el nuevo valor de la
• Valor característica modificada en el
elemento.
Edwin Mamani Lopez 6
7. Reglas y hojas de estilo
Una regla define algún aspecto del estilo de
uno o varios elementos
h1 { color: navy; }
Una hoja de estilo es un conjunto de reglas
que se aplican a un documento
HTML/XHTML.
Edwin Mamani Lopez 7
8. Agrupando reglas y selectores
Una de las metas de CSS era la brevedad
◦ Facilita escribir la hoja de estilo “a mano”
◦ Reduce el tiempo de carga
Por ejemplo, sean las siguientes reglas:
h1 { font-weight: bold; }
h2 { font-weight: bold; }
h3 { font-weight: bold; }
Como las declaraciones son idénticas, se
pueden agrupar:
h1, h2, h3 { font-weight: bold; }
Edwin Mamani Lopez 8
9. Agrupando reglas y selectores
Un selector puede tener más de una
declaración:
h1 {font-weight: bold;}
h1 {color: green;}
Podemos agrupar las declaraciones en una
lista separada por puntos y comas:
h1 {font-weight: bold;
color: green;
}
Edwin Mamani Lopez 9
10. Incluir CSS en HTML/XHTML
Una de las principales características de CSS
es su flexibilidad y las diferentes opciones
que ofrece para realizar una misma tarea.
En el mismo documento HTML. Elemento <style>
Definir CSS en un archivo externo. Elemento <link>
Incluir CSS en los elementos HTML. Atributo style
Edwin Mamani Lopez 10
11. Incluir CSS en el mismo documento
HTML/XHTML
Los estilos se definen en la cabecera del
documento (sólo dentro de la sección
<head>) y se emplea el elemento <style>.
<style> type="text/css"
p {color:black;
font family:Verdana;
}
</style>
Edwin Mamani Lopez 11
12. Definir CSS en un archivo externo
En este caso, todos los estilos se incluyen
en un archivo de tipo CSS que las páginas
HTML enlazan mediante la etiqueta <link>.
Un archivo CSS no es más que un archivo
simple de texto cuya extensión es .css
Se puede crear todos los archivos CSS que
sean necesarios y cada página HTML puede
enlazar tantos archivos CSS como requiera.
Edwin Mamani Lopez 12
13. El archivo CSS se enlaza mediante la
etiqueta <link>
<html>
<head>
<title>Ejemplo de estilos CSS en un
archivo externo</title>
<link rel="stylesheet" type="text/css"
href="/css/estilos.css" media="screen" />
</head>
<body>
<p>Un párrafo de texto.</p>
</body>
</html>
Edwin Mamani Lopez 13
14. Cuatro atributos, cuando se enlaza un
archivo CSS
rel: indica el tipo de relación que tiene el
recurso enlazado. Para los archivos CSS,
siempre se utiliza el valor stylesheet.
type: Indica el tipo de recurso enlazado, su
valor siempre es: text/css
href: Indica la URL del archivo CSS que
contiene los estilos (relativa o absoluta).
media: Indica el medio en el que se van a
aplicar los estilos del archivo CSS.
Edwin Mamani Lopez 14
15. Ventajas de las hojas de estilo
externas
Reutilización
◦ Poner toda la información de estilo en un sitio permite
que sea referenciada por muchos documentos
◦ Facilita mantener un sitio Web grande consistentemente
Información de estilo corporativa
Rendimiento
◦ Una vez que se descarga la hoja de estilo la primera
vez, el browser ya la guarda en caché
Selección por parte del usuario
◦ Un documento puede enlazar a varias hojas de estilo;
idealmente, el usuario podría seleccionar una de ellas
Edwin Mamani Lopez 15
16. Incluir CSS en los elementos HTML
Este método se considera como el "peor y
el menos utilizado«.
Esta forma de incluir CSS directamente en
los elementos HTML, solamente se utiliza
en determinadas situaciones en las que se
debe incluir un estilo muy específico para
un solo elemento concreto.
<p style="color:black;">Un texto</p>
Edwin Mamani Lopez 16
17. Desventajas del atributo style
No se puede reutilizar el estilo aplicado a
un elemento (habría que repetirlo en todos
los sitios)
Si luego se cambia el estilo, hay que buscar
todos los atributos style y cambiar su valor
Suele ser mejor emplear identificadores (id)
Sólo tendría sentido para algo muy
concreto y que no queramos cambiar la
hoja de estilo sólo para eso
Edwin Mamani Lopez 17
