COLORES, FONDOS Y
FUENTES CON CSS
Color
Background-color
Background-image
font-family
font-size
font-style
font-weight
COLORES, FONDOS Y FUENTES
Color de texto [color]
La propiedad color describe el color de los
[Link]:
h1 {color: #ff0000;}
p {color:blue;}
Los colores se pueden introducir como valores
hexadecimales, como en el ejemplo anterior:
#ff0000; o se pueden usar los nombres de los
colores: "red" (rojo).
COLORES, FONDOS Y FUENTES
Color de fondo [background-color]
La propiedad background-color describe el color
de fondo de los elementos.
También se pueden aplicar colores de fondo a
otros elementos, entre ellos, a los
encabezados y al texto. En el ejemplo que
sigue se aplicarán diferentes colores a los
elementos <body> y <h1>. Ejemplo:
body {background-color: #FFCC66;}
h1 {background-color: #FC9804;}
COLORES, FONDOS Y FUENTES
Imágenes de fondo
[background-image]
La propiedad CSS background-image se
usa para insertar una imagen de fondo.
Para insertar la imagen de la mariposa
como imagen de fondo de una página
web, aplica sencillamente la propiedad
background-image al elemento
<body> y especifica la localización de
la imagen. Ejemplo:
body {background-image: url([Link]);}
body {background-image: url
([Link]
COLORES, FONDOS Y FUENTES
Familia de fuentes [font-family]
La propiedad font-family se usa para establecer
el tipo de fuentes que se usarán para mostrar
un elemento determinado o una página web.
Ejemplo:
h1 {font-family: arial;}
h2 {font-family: verdana;}
COLORES, FONDOS Y FUENTES
Estilo de la fuente [font-style]
La propiedad font-style define si la fuente
aparece en cursiva. El valor es italic Ejemplo:
h1 {font-style: italic;}
h2 {font-style: italic;}
COLORES, FONDOS Y FUENTES
Peso de la fuente [font-weight]
La propiedad font-weight determina si la fuente
aparece en negrita. El valor es bold. Ejemplo:
p {font-weight: bold;}
li {font-weight: bold;}
COLORES, FONDOS Y FUENTES
Tamaño de la fuente [font-size]
El tamaño de la fuente se establece por medio
de la propiedad font-size. La unidad de
medida para indicar el tamaño está en
pixeles. Ejemplo:
h1 {font-size: 30px;}
h2 {font-size: 12px;}
h3 {font-size: 18px;}
p {font-size: 10px;}
