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; }
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
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
Generador de degradados online;
AngryTools