01. Propiedades comunes de CSS

Colores

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>

Borde

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 }

Texto

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; }

Fuentes

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; }

Web safe fonts (w3school)
Google fonts

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; }

Margen

Margin auto

Este div está centrado horizontalmente gracias a 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; }

Estilo Hr

algo de texto


más texto

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

Degradados

Aquí un fondo con degradado

Generador de degradados online;

AngryTools
Aquí un fondo con degradado animado