Nombre de producto

descripción del producto fantástico verde

esto es un párrafo hermoso

este es otro párrafo genial

este párrafo ya no está dentro de la sección con id grande

este es otro párrafo que ya no está en la sección o bloque grande

Este es un párrafo con tipo de letra cursive

Este es un párrafo con tipo de letra georgia

Este es un párrafo con tipo de letra fantasy

Este es un párrafo con tipo de letra new times roman

Este es un párrafo con tipo de letra monospace

Párrafo con respaldos de tipografia, en caso no pueda cargar el preferido

La propiedad font-family puede tomar cualquier familia tipográfica, a continuación describimos algunas genéricas. initial.- Señala que tipo de letra debe ser el establecido por defecto en el navegador. inherit.- El tipo de letra debe ser heredado de su elemento padre. serif.- Fuente genérica con serif como, por ejemplo, el tipo de fuente Times. sans-serif.- Fuente genérica sin serif como, por ejemplo, el tipo de fuente Arial. monospace.- estilo de fuente genérica Monospace, como por ejemplo Courier. cursive.- Estilo de fuente genérica cursiva, como por ejemplo Script. ------------------------------------------------ Ejemplo de código para establecer tamaño de letra con palabra clave como valor:

Texto con tamaño de letra pequeño

Texto con tamaño de letra mediano

Texto con tamaño de letra grande

Texto con tamaño de letra muy grande

-------------------------------------- 1px equivale a 16em, por lo tanto podemos emplear la fórmula de conversión: em=px/16 Aplicando la conversión podemos afirmar que 32px equivalen a 2em, si empleamos cualquiera de ellos en los valores para la dimensión de letra, producirán el mismo resultado.

Título de la página

Sutítulo de la página

Texto tamaño de letra 8

Texto tamaño de letra 10

Texto tamaño de letra 15

Texto tamaño de letra 23

Texto tamaño de letra 40

------------------------------ Valores para font-style CSS normal.- el texto se muestra normal, sin efectos. italic.- el texto se muestra en cursiva. oblique.- texto en oblicua, es parecido a italic. A continuación veamos un ejemplo en el que además veremos las diferencias de resultados de cada uno de los distintos valores posibles:

Este es un texto con es estilo de fuente normal

Texto con estilo de fuente cursiva

Texto con estilo oblicuo, similar a italic

Texto con etiqueta i produce lo mismo que italic --------------------------------------------- Valores de font-weight ligther.- este valor produce un texto ligero o delgado. normal.- Normal define el grosor de texto por defecto, sin modificar el grosor. bold.- establece texto grueso o en negrita. bolder.- produce un texto bastante grueso. los valores numéricos pueden ir de 100 a 900, siendo 100 el texto más delgado y 900 el más grueso; también cabe mencionar que 400 produce el mismo resultado que el valor normal y 600 produce el mismo resultado que el valor bold. Ejemplos de font-weight en CSS

Texto con peso lighter

Texto con peso normal

Texto con peso bold

Texto con peso en bolder

testo con peso 100

testo con peso 300

testo con peso 500

testo con peso 700

testo con peso 900

Texto con variante normal

Texto con variante small caps

Texto de color rojo

Texto de color azul

Texto de color verde

Texto de color amarillo

Este es un parrafor alineado a la izquierda, mediante la propiedad y text-align de CSS.

Este párrafo será alineado a la derecha y lo verás claramente por que es muy diferente al anterior.

Texto alineado al centro con CSS

Este hermoso texto será justificado con CSS, de tal manera que todas las lineas de este párrafo se encuentre con margenes iguales. En ocasiones es necesario o quizá para darle un toque estético cautivador, un estilo que necesita varias lineas de texto para poder ser aprecidado en toda su plenitud; ahora que tenemos varias lienas de floro, puedes deleitar tus ojos con este justificado de texto.

texto arriba texto al medio texto abajo

1 Elemento en baseline ejemplo

2 Elemento en sub ejemplo.

3 Elemento en super ejemplo.

4 Elemento con número -30px ejemplo..

este es un texto dentro de un contenedor div con nombre main y será alineado al medio verticamente

Este es un texto sin decoración.

Texto con decoración heredado.

Texto con decoracion encimma.

Texto con decoración al medio.

Texto con decoración debajo.

Este es un texto en el que aplicaremos la propiedad text-indent que sirve para aplicar un espacio al principio de la primera linea de este párrafo. Notaras que la primera linea de este texto se encuentra a una distancia de 70px desde el borde y ello se debe a que el valor de esta propiedad es de 70px.

Título de tercer nivel

Título con tres sombras de colores

texto sin transformación CSS

texto con transformación capitalize en CSS

texto con transformación uppercase en CSS

texto con transformación lowercase en CSS

Texto con espaciado normal en CSS

Texto con espaciado de 4px positivo

Texto con espaciado de -2px negativo

Texto con espaciado de palabras normal

texto con espaciado de palbras en 8px positivo

texto con espaciado de palabras negativo con -2px

ESTILO NORMAL Ejemplo de párrafo posee espacios como este y otro además otro para que veas la diferencia
y sabes, a este párrafo le colocaremos un estilo de espacios NORMAL con CSS y veamos que sucede en los resultados.


ESTILO PRE Ejemplo de párrafo posee espacios como este y otro además otro para que veas la diferencia
y sabes, a este párrafo le colocaremos un estilo de espacios PRE con CSS y veamos que sucede en los resultados.


ESTILO NOWRAP Ejemplo de párrafo posee espacios como este y otro además otro para que veas la diferencia
y sabes, a este párrafo le colocaremos un estilo de espacios NOWRAP con CSS y veamos que sucede en los resultados.


ESTILO PRE-WRAP Ejemplo de párrafo posee espacios como este y otro además otro para que veas la diferencia
y sabes, a este párrafo le colocaremos un estilo de espacios PRE-WRAP con CSS y veamos que sucede en los resultados.

Título de ejemplo con CSS

Título de ejemplo sin CSS

Texto de ejemplo final para demostracion con CSS

Texto de ejemplo final para demostracion sin CSS