Formato a texto con CSS
Aplicar color al texto con CSS
|
1 2 3 4 |
h1 { color: #369; } p { color: black; } a, span { color: #B1251E; } div { color: rgb(71, 98, 176); } |
Asignar la familia de la fuente al texto con CSS
|
1 2 3 4 5 |
font-family: Arial, Helvetica, sans-serif; font-family: "Times New Roman", Times, serif; font-family: "Courier New", Courier, monospace; font-family: Georgia, "Times New Roman", Times, serif; font-family: Verdana, Arial, Helvetica, sans-serif; |
Definir el tamaño del texto con CSS
La propiedad font-size permite tamaños absolutos, relativos y porcentajes
|
1 |
h1 { font-size: 2.5em; } |
Asignar el grosor al texto con CSS (Negritas)
La propiedad font-weight acepta los valores: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit
|
1 2 3 4 5 6 7 8 9 |
#especial em { font-weight: bold; } #especial strong { font-weight: normal; background-color: #FFFF66; padding: 2px; } |
Aplicar estilo al texto con CSS (Cursivas)
Para indicar cursiva se utiliza font-style con el valor italic.
|
1 2 3 4 5 6 |
#especial { font-weight: normal; font-style: italic; background-color:#FFFF66; padding: 2px; } |
Para convertir el texto en letra versal (mayúsculas pequeñas) se usa la propiedad font-variant con el valor small-caps
|
1 2 3 |
#especial { font-variant: small-caps; } |
Shorthand para la fuente con CSS
El orden en el que se deben indicar las propiedades del texto es el siguiente:
- En primer lugar y de forma opcional se indican el font-style, font-variant y font-weight en cualquier orden.
- A continuación, se indica obligatoriamente el valor de font-size seguido opcionalmente por el valor de line-height.
- Por último, se indica obligatoriamente el tipo de letra a utilizar.
|
1 2 3 4 5 6 7 8 9 |
font: 76%/140% Verdana,Arial,Helvetica,sans-serif; font: normal 24px/26px "Century Gothic","Trebuchet MS",Arial,Helvetica,sans-serif; font: normal .94em "Trebuchet MS",Arial,Helvetica,sans-serif; font: bold 1em "Trebuchet MS",Arial,Sans-Serif; font: normal 0.9em "Lucida Grande", Verdana, Arial, Helvetica, sans-serif; font: normal 1.2em/1em helvetica, arial, sans-serif; font: 11px verdana, sans-serif; font: normal 1.4em/1.6em "helvetica", arial, sans-serif; font: bold 14px georgia, times, serif; |
¿Te gustó este artículo?
Si te gustó este artículo, te ha servido o aprendiste algo nuevo; compártelo en tus redes sociales o invítame un cafe.
