01. Propiedades comunes de CSS

Color de texto

Hola mundo

<h3 style="color: #2c96ff;">Hola mundo</h3>

Color de fondo

rgb(44, 150, 255)

#2c96ff

rgba(242, 132, 92, 0.5)

<p style="background-color:rgb(255, 100, 100);">...</p>
<p style="background-color:#ff2c2c;">...</p>
<p style="background-color:rgba(255, 44, 44, 0.5);">...</p>

Hola mundo

Hola mundo

Hola mundo

Hola mundo

h3.todo { border: 1px solid black; }
h3.abajo { border-bottom: 2px solid red; }
h3.redondo { border: 2px solid black; border-radius: 15px; }
h3.izq { border-left: 5px solid blue }

Alineación texto

h2 (centro)

h3 (izquierda)

h4 (derecha)

h2 { text-align: center; }
h3 { text-align: left; }
h4 { text-align: right; }

Text decoration

texto con underline

texto con line-through

texto con overline

h2 { text-decoration: underline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: overline; }

Text indent

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta sed corrupti ab, deserunt eaque delectus quo perferendis, exercitationem aperiam iusto fuga quia possimus maiores. Itaque necessitatibus iste officia, explicabo excepturi.

p { text-indent: 50px; }

Letter spacing

texto con letter spacing positivo

texto con letter spacing negativo

h3 { letter-spacing: 5px; } h3 { letter-spacing: -2px; }

Line height

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet maiores reprehenderit, inventore debitis alias accusamus quibusdam sed, quas exercitationem, eos unde illo earum aliquam iste, culpa facere laboriosam nam dolorem?

p { line-height: 3rem; }

Letra capital

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet maiores reprehenderit, inventore debitis alias accusamus quibusdam sed.

.letra-capital::first-letter { font-size: 3em; color: #1B3440; }

Font Family

Párrafo usando fuente Times New Roman

Párrafo usando fuente Arial

p.serif { font-family: "Times New Roman", Times, serif; }
p.sansserif { font-family: Arial, Helvetica, sans-serif; }

font style

Párrafo usando estilo itálica

p.italic { font-style: italic; }

Font size

Aquí un H1

Aquí un H2

Aquí un párrafo.

h1 { font-size: 2.5em; /* 40px/16px 1em */ }
h2 { font-size: 1.875em; /* 30px */ }
p { font-size: 0.875em; /* 14px */ }

Font weight

Párrafo usando negrita

p { font-weight: bold; }

Margin auto

La propiedad de margin auto se usa para centrar horizontalmente un elemento dentro de su contenedor.
El elemento ocupará el ancho especificado y el espacio restante se dividirá equitativamente entre los márgenes izquierdo y derecho

div { width:300px; margin: auto; border: 1px solid red; }

algo de texto

más texto

.estilo-linea { height: 11px; background-color: #416dff; border: 3px solid black; width: 50% }

Generador de degradados online;