08.text_formatting.css

/* Formato de texto */

body {
	background-color: beige;
}

.text-left {
	text-align: left;
}

.text-center {
	text-align: center;
}

.text-right {
	text-align: right;
}

.text-justify {
	text-align: justify;
}

.right {
	direction: rtl;
	unicode-bidi: embed;
}

.bdo {
	direction: rtl;
	unicode-bidi: bidi-override;
}

img.a {
	vertical-align: baseline;
}

img.b {
	vertical-align: text-top;
}

img.c {
	vertical-align: text-bottom;
}

img.d {
	vertical-align: sub;
}

img.e {
	vertical-align: super;
}

.overline {
	padding-top: 20px;

	border-top: 3px dashed blue;
	/* overline */
	text-decoration: overline;

	text-decoration-color: blue;
	text-decoration-style: wavy;

	text-decoration-line: overline;
	text-decoration-thickness: 5px;
}

.line-through {
	text-decoration: line-through;
	text-decoration-style: wavy;
	text-decoration-color: blue;
}

.underline {
	text-decoration: underline;
	text-decoration-color: blue;
	/* text-decoration-style: wavy; */
	text-underline-offset: 10px;
	margin-bottom: 30px;
	text-decoration-skip-ink: auto;
}

.underline-2 {
	text-decoration: underline;
	text-decoration-color: blue;
	text-decoration-skip-ink: auto;
}

p.ex {
	text-decoration: overline underline;
	text-underline-offset: 3px;
	border-top: 2px solid blue;
	padding-top: 10px;
	text-decoration-color: blue;
	/* Ajustamos el ancho del elemento para que se ajuste el borde al contenido: */
	width: fit-content;
}

p.uppercase {
	text-transform: uppercase;
}

p.lowercase {
	text-transform: lowercase;
}

p.capitalize {
	text-transform: capitalize;
}

.indent {
	text-indent: 20px;
}

.letter-spacing {
	letter-spacing: 5px;
	text-transform: uppercase;
	font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

p.small {
	line-height: 0.9;
}

p.big {
	line-height: 2;
}

p.one {
	word-spacing: 20px;
}

p.two {
	word-spacing: -2px;
}

.nowrap {
	white-space: nowrap;
}

.shadow-1 {
	text-shadow: 1px 1px;
}

.shadow-2 {
	text-shadow: 2px 2px red;
}

.shadow-3 {
	text-shadow: 2px 2px 2px red;
}

.shadow-4 {
	color: tomato;
	text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

/* Más info: https://www.codesdope.com/blog/article/25-creative-css3-text-shadow-effects-you-cant-miss/ */