Text and Typography in CSS
Selectors in CSS
* {
font-family: "Helvetica";
}
div {
font-family: "Helvetica", monospace;
}
Selectors in CSS
Selectors in CSS
p {
color: red;
}
p:hover {
color: white;
background-color: black;
}
p::selection {
color: blue;
background-color: yellow;
}
Selectors in CSS
p {
line-height: normal;
letter-spacing: 0.2em;
word-spacing: 0;
}
Selectors in CSS
/* capitalize the first character
* of every word; */
.capitalize {
text-transform: capitalize;
}
/* capitalize the entire text*/
.uppercase {
text-transform: uppercase;
}
/* lower the entire text */
.lowercase {
text-transform: lowercase;
}
Selectors in CSS
.b {
text-decoration-line: line-through;
text-decoration-color: slateblue;
}
/* shorthand for text-decoration-line
* and text-decoration-color */
.c {
text-decoration: overline lime;
}
/* adds all 3 lines on the same text */
.d {
text-decoration-line:
underline overline line-through;
text-decoration-color: aqua;
}
Selectors in CSS
p {
text-indent: 3em;
}
Takes either a length (for example, 10px
, 2em
) or a percentage of the containing block’s width.
Selectors in CSS
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-start {
text-align: start;
}
To align text inside the container.
Different than indenting.
Selectors in CSS
.to-clip {
text-overflow: clip;
}
.to-ellipsis {
text-overflow: ellipsis;
}
To handle text larger than container.
Selectors in CSS
.normal {
word-break: normal;
}
.break-all {
word-break: break-all;
}
To handle text larger than container, but at a word level.
Selectors in CSS
.break-all {
writing-mode: vertical-rl;
text-orientation: mixed; /* upright */
}
Selectors in CSS
.a {
text-shadow: 0 1px 2px #0005;
}
.c {
color: lightyellow;
text-shadow: 1px 1px blue,
2px 2px 0 cyan,
-1px -1px 0 red,
-2px -2px 0 yellow;
}
.b {
color: #feff;
text-shadow: 1px 1px 2px #f01c,
1px -1px 2px #f0cc,
-1px 1px 2px #f0fc,
-1px -1px 2px #f0fc,
0 0 16px #f0fa,
0 0 64px #f0fd;
}
text-shadow: takes 4 args,
(x-offset, y-offset, blur-radius, color),
can apply multiple shadows with comma