Esta presentación resume las principales propiedades para dar formato a un documento HTML a través de CSS3.

1. FORMATO DEL TEXTO
Yahaira Fernández

2. Color del texto
El color se expresa con la propiedad color. El valor que puede tomar
esta propiedad se puede expresar de varias formas:
1.Un número hexadecimal. Por
ejemplo color: #0000FF;,o color: 0x800080;.
2.Tres números entre 0 y 255. Por ejemplo color: rgb(0, 0,
255);.
3.Tres números entre 0 y 100. Por ejemplo color: rgb(10%, 20%,
75%);.
4.Un nombre. Algunos colores se pueden expresar con su nombre en
inglés. Por ejemplo color: green; o color: DarkGreen;.
Link generadores de paletas de color online para diseño web:
https://es.shopify.com/blog/62615749-14-generadores-de-paletas-de-color-
online-para-diseno-web

3. Fuente
Podemos elegir la fuente (o tipo de letra) a través del atributo font-
family. Podemos indicar cualquier fuente que queramos, teniendo en cuenta
que si incluye espacios, debe de ir entre comillas dobles. Por ejemplo font-
family: arial; o font-family: "Times New Roman";.
Pero hemos de tener en cuenta que puede que quien vea la página no tenga
instalada la fuente que queramos. Para evitar esto, existen cinco fuentes genéricas
que sí se mostrarán en cualquier equipo: serif, sans-serif, cursive,
fantasy, monospace. Esto no quiere decir que sólo debamos de utilizar estas
cinco. El valor de font-family pueden ser varias fuentes, separadas por comas. El
navegador elegirá, comenzando por la derecha, la primera disponible, por lo que
es conveniente terminar por una genérica.
Por ejemplo, font-family:Georgia, "Times New Roman", Times,
serif;.

4. Tamaño
El tamaño se regula a través de la propiedad font-size. Podemos
utilizar cualquiera de las unidades de tamaño, pero lo más frecuente es
utilizar px (pixels), o porcentajes % o em, estas dos últimas son tamaños
relativos al tamaño de la fuente del elemento que está por
encima. 100% o 1em, sería el mismo tamaño, mientras
que 200% o 2em sería el doble y 50% o 0.5em sería la mitad.
Si utilizamos valores relativos, facilitamos que se pueda cambiar de
tamaño todo el texto de la página de forma más coherente. Así los
discapacitados visuales podrán utilizar el comando para cambiar el
tamaño de texto que tienen los navegadores. http://usalo.es/152/botones-
para-cambiar-el-tamano-de-letra/

5. Inclinación
Podemos aumentar el grosor de la fuente, lo que equivaldría a ponerla en
negrita, utilizando font-weight. Puede tomar los siguientes valores:
•normal. El texto no se muestra en negrita.
•bold. El texto se muestra en negrita.

6. Decoración
Con la propiedad text-decoration podemos hacer que el texto
muestre, por ejemplo, los distintos tipos de subrayado, con los
siguientes valores:
•none, el texto se muestra sin ningún tipo de decoración.
•underline, el texto aparece subrayado.
•overline, el texto aparece sobrerrayado.
•line-through, el texto aparece tachado.
•blink, el texto parpadea. (No funciona en Internet Explorer, en Firefox
3, si).

7. Fondo
Otro aspecto que podemos personalizar es el fondo, con la
propiedad background.
background-color nos permite establecer el color de
fondo del elemento. Por ejemplo, background-
color: green;.
También podemos utilizar una imagen, con la
propiedad background: url(graficos/fondo.pn
g);. En url() introducimos la dirección de la imagen que
queremos utilizar.

8. Fondo
Si utilizamos una imagen podemos configurar otras
propiedades:
background-repeat, determina si el fondo se repite.
Puede tomar los valores no-repeat si no queremos que
se repita, repeat-x para que se repita en
horizontal, repeat-y para que lo haga en vertical
o repeat para que llene todo el fondo, que es el valor que
toma si no le indicamos otra cosa.
Si no se repite la imagen de fondo, podemos posicionarla
con background-position. Podemos darle los valores
de los cuatros lados (top, right, bottom y left),
combinarlos para colocarla en las esquinas, por ejemplo top
left, o centrarla con el valor center. También podemos
introducir medidas, donde el primer valor se refiere a la
posición horizontal y el segundo al vertical, por
ejemplo background-position: 50% 50%;.

9. Imagen de Fondo
Para colocar una imagen de fondo en un elemento se utiliza
la propiedad background-image.
body {
background-image: url("imagen.jpg");
}

10. Alineación del texto
Text-align: Establece la alineación del contenido de un elemento de bloque.
Uno y sólo uno de los siguientes valores:
Left: alinear a la izquierda.
Right: alinear a la derecha.
Center: alinear en el centro.
Justify: alinear justificado.
Ejemplo:
H1
{
text-align: center;
}

11. Páginas importantes:
Página para practicar códigos de página web:
https://www.w3schools.com/
Página que define los estándar de todo lo relacionado con el
diseño de página web:
https://www.w3.org/

12. Ejercicio: En el documento html sobre la honestidad.
Darle formato al texto.
Crear un archivo con extensión .css
llamado: honestidad.css.
Luego insertar en el documento html, después de la etiqueta title:

13. Sitios Web consultados:
• https://www.aulaclic.es/paginas-
web/t_3_3.htm
• https://www.aulaclic.es/paginas-
web/t_3_6.htm
• http://librosweb.es/referencia/css/backgroun
d-image.html
• http://librosweb.es/referencia/css/text-
align.html

14. ¿PREGUNTAS?