CSS Text Formatting
In CSS, there are some text formatting properties that can be used to format text and style text.
Here are come commonly used properties for text styling and formatting:
Fonts
- Use the font-family property to set a different font for a text. CSS defines five generic names for fonts: serif, sans-serif, monospace, cursive, and fantasy. For example font-family: monospace;
- You can also use the font name if it’s a web safe font or if it’s defined in the @font-face and uploaded to the server. For example font-family: Arial; (If you’re interested, you can explore more on the @font-face and how to use google fonts.)
- If the font is not defined or is not available, it will just use whatever the browser default font is.
- The value of the font-family property can also be a comma-separated list. This is called a font stack. Since we can't guarantee the availability of the fonts we want to use, it’s always a good idea to use font stack so that the browser has multiple fonts it can choose from. You can put a generic font name at the end of the font stack. For example font-family: Helvetica, Arial, sans-serif;
Sizing
- Use the font-size property to change the size of the text. It can take values measured in units like px, em, rem.
- If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (1em). An <h1> element has a size of 2em set by default, so it will have a final size of 32px.
Styling
- Use font-style to turn italic on or off. It can take values of normal, italic and oblique (oblique is similar to italic, but less recommended).
- Use font-weight to set how bold the text should be. This can have different values based on what custom fonts you’re using. The most common values are normal and bold. You can also use numeric boldness values (100-900) to provide finer control. In numeric boldness values, 400 equals normal and 700 equals bold.
- Use text-transform to specify uppercase and lowercase letters. Available values are:
- none: no transformation.
- uppercase: transforms ALL TEXT TO CAPITALS.
- lowercase: transforms all text to lower case.
- capitalize: transforms all words to Have The First Letter Capitalized.
- full-width: transforms all glyphs to be written inside a fixed-width square, similar to a monospace font.
- Use text-decoration to set text decorations on fonts.
- Available values are: none, underline, overline, line-through.
- You can specify the style of the text decoration using text-decoration-line, text-decoration-color, text-decoration-style, and text-decoration-thickness property.
- The text-decoration property can accept multiple values at once to add multiple decorations simultaneously, or to combine those decoration styles in a line. For example:
- text-decoration: underline overline;
- text-decoration: red wavy line-through;
Spacing
- Use the line-height property to is used to specify the space between lines. Most of the time, it takes a decimal number, which defines how much the font-size should get multiplied. For example, line-height: 1.5; returns a value of 24px when using default font size (16px).
- The letter-spacing and word-spacing properties allow you to set the spacing between letters and words in your text. Similar to font-size, it can also take values in those units.
Layout
- Use text-align property to set the horizontal alignment of a text. Available values are: left, right, center, justify.
- Use text-indent property to specify the indentation of a text. This can take a value measured in most of the units like px, em, rem, %.
- Use width property to define the with of a text block. This can take a value measured in most of the units like px, em, rem, %, vw, vh.
Colors
- The color property can change the text color.
- The background-color property can change the color of the background. The color will be applied on the area that this element is occupying.
- There is another property called background-image. Instead adding a colored background, we can use an image as its background. This is not commonly used in text but you can try it on block elements like <body>, <div>, etc.
- Use the text-shadow property to apply drop shadows to a text. It can have a set of at most 4 values: offset-x, offset-y, blur-radius, color. It also accept a comma-separated list of values. Some valid patten can be:
- text-shadow: 1px 1px 2px pink; (offset-x, offset-y, blur-radius, color)
- text-shadow: 5px 5px blue; (offset-x, offset-y, color)
- text-shadow: 1px 1px 2px pink, 5px 5px 10px blue; (will apply two shadows at once)