CSS
Hojas de Estilo
Ramiro Estigarribia Canese

¿Qué es CSS?
➔ Es una tecnología que nos permite controlar la
apariencia de una página web.
➔ Permite especificar estilos como el tamaño,
fuentes, color, así como el lugar donde disponer
texto e imágenes en la página.
➔ Podemos asociar las reglas de estilo directamente
en el código HTML o en un archivo independiente
con extensión .css

Diferentesformas de
incluir CSS3 en HTML5
1. Estilo inline: Combinar código CSS con HTML (no
recomendado).
2. En la cabecera de la página: Será interpretada por
el navegador, estando en el mismo archivo.
3. Separación real de nuestro código HTML y CSS3:
La etiqueta link sirve para informar que tenemos un
código CSS3 en un fichero externo.

1.Estilo inline
Es la forma más fácil pero menos recomendada.
Sedefine con la propiedad style.
El problema es que el código se repite muchas veces,
en lugar de hacer asignaciones genéricas.

Este mensaje es de color rojo sobre fondo amarillo.

Lista de nombres de colores:
http://www.w3schools.com/html/html_colornames.asp

2. Estilos en la cabecera
de la página (header)
Podemos definir estilos que se aplican alas distintas
marcas HTML de la página.

Primero

Segundo

Muchos estilos

rojo

verde

azul

Propiedades de fuentes.
Contamos con una serie de propiedades:
● font-family
● font-size
● font-style
●font-weight
● font-variant
Las fuentes más populares son:
● Arial
● Tahoma
● Courier
● Times New Roman
● Georgia
● Verdana
● Impact

Propiedades de fuentes.

Primero

Segundo

Varias marcas HTML
con una misma regla CSS.

Primero

Segundo

Tercero

Varias reglas para una
misma marca HTML.

Primero

Segundo

Propiedades relacionadas al
texto. text-align
Puede tomar estos valores: left right center justify

h1 {
color:red;
text-align:left;
text-decoration:underline; }
h2 {
color:red;
text-align:center;
text-decoration:underline; }

Primero

Segundo

Herencia
Cuando se establece CSS en un elemento, sus
descendientes heredan de forma automática.
Las etiquetas y , definen el comienzo
y el final del cuerpo de una página.

Primero

Texto de Prueba

Segundo

Herencia: Prioridad
Cuando existen 2 definiciones iguales, tiene prioridad la
más específica.

Primero

Texto de Prueba

3. CSS en archivo externo.
➔ La ventaja fundamental es que podemosaplicar las
mismas reglas a varias las páginas un sitio web.
➔ Veremos que esto será muy provechoso cuando
necesitemos hacer cambios.
➔ Al programador le resulta más ordenado tener lo
referente a HTML en un archivo y CSS aparte.

3. CSS en archivo externo.
Archivo: 3.html

Estilo en archivo externo.

Un archivo separado.

Archivo: estilo.css
body {
background-color:
yellow;
color:blue;
font-family:arial;
}

Clases
En muchas situaciones una regla de estilo puede ser
utilizada muchas marcas HTML.
En esos casos conviene crear un estilo que se pueda
aplicar a varias marcas de HTML.
Para conocer la sintaxis de clases veamos un ejemplo:

Clases
Archivo: 3.html