This lesson discusses how to customize the texts using CSS. Typographic properties in CSS can be divided into two groups:
Font properties control the appearance of the font itself, such as the size, weight, and more.
font-family: Specifies the font family to be used for the text.font-size: Defines the size of the font.font-weight: Controls the thickness or boldness of the font.font-style: Determines the style of the font, such asnormal,italic, oroblique.font-variant: Allows you to set small-caps or normal text. Small-caps display lowercase letters as smaller versions of uppercase letters.
Text properties control how the text is displayed, such as text decoration (underline, strike-through...), upper/lowercase, and so on.
text-decoration: Adds decorative effects to text, such asunderline,overline,line-through, ornoneto remove decorations.text-shadow: Adds a shadow effect to text, enhancing its visual appeal.text-transform: Controls the capitalization of text, allowing you to change text to uppercase, lowercase, or capitalize the first letter of each word.
We'll start with the font properties.
Changing font size
Most fonts comes in various styles, weights, and sizes.
The font properties allow you to specify which variant you wish to use. For instance, you can change the font size using the font-size property:
1p {
2 font-size: 16px;
3}When defining font size, the unit px (pixels) is commonly used, but there are some relative units available that offer more flexibility and scalability.
The most commonly used ones are em and rem. These units are relative to other font sizes, making them ideal for creating responsive designs. For instance, em is relative to the font size of the parent element:
1<body>
2 <p class="p1">
3 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Fugiat,
4 reprehenderit?
5 </p>
6 <div>
7 <p class="p2">
8 Lorem ipsum dolor, sit amet consectetur adipisicing elit. Illum, libero.
9 </p>
10 </div>
11</body>1div {
2 font-size: 10px;
3}
4
5p {
6 font-size: 2em;
7}In this example, we have two <p> elements, p1 and p2, and their font sizes are defined to be twice the size of their parents (2em).
p1's parent is <body>, whose font size is not defined in this case. When not defined, the font size will be set to 16px by default, which means p1 will be 32px.
The parent of p2 is <div>, whose font size is defined as 10px, which makes p2 to be 20px.
rem, on the other hand, is relative to the root element. This will give you a consistent reference across the entire HTML document, making it the most popular method for defining font size.
Font weight
You can also define the font weight, the thickness of the strokes, using the font-weight property. The accepted values include lighter, normal, bold, bolder.
1p {
2 font-weight: bold;
3}
Alternatively, you can use numeric values 100, 200, and up to 900, with 100 being the lightest and 900 being the boldest. However, you should know that many fonts do not have this many variants. You must ensure the fonts you are using have the variants you need.
1p {
2 font-weight: 800;
3}
Font style
The font-style is used to define italic text. It can be either normal, italic, or oblique. oblique is similar to italic but less supported, so it is rarely used.
1p {
2 font-style: italic;
3}
The reason that oblique exists is that, if the browser supports it, it allows you to define an angle, which specifies precisely how much you want the letters to tilt.
Font variant
Lastly, the font-variant property defines whether or not the text should be displayed in small-caps form, where all lowercase letters are converted to uppercase, but smaller.
1p {
2 font-variant: small-caps;
3}
Text decoration
Next, let's talk about text properties. We'll start with text decorations, which defines decorative lines you can add to the text. For example, by setting the text-decoration-line property to underline, you can add an underline like this:
1<p>Lorem ipsum dolor sit amet consectetur.</p>1p {
2 text-decoration-line: underline;
3}Other possible values include overline, which is a line displayed over the text.
1p {
2 text-decoration-line: overline;
3}Or line-through, which is a line displayed across the text.
1p {
2 text-decoration-line: line-through;
3}The text-decoration-line property also allows you to specify multiple decoration lines by separating them with spaces:
1p {
2 text-decoration-line: underline overline;
3}After setting the decoration line, you can further customize it by defining a color using the text-decoration-color property.
1p {
2 text-decoration-line: underline;
3 text-decoration-color: red;
4}Or customize its thickness using the text-decoration-thickness property.
1p {
2 text-decoration-line: underline;
3 text-decoration-color: red;
4 text-decoration-thickness: 5px;
5}Or use the text-decoration-style property to define a style, such as dotted, wavy, and so on.
1p {
2 text-decoration-line: underline;
3 text-decoration-color: red;
4 text-decoration-style: wavy;
5}When the text-decoration-line is set to underline, you can customize the line's offset using text-underline-offset.
1p {
2 text-decoration-line: underline;
3 text-underline-offset: 4px;
4}This seems like a lot of work for just a decorative line. Luckily, CSS offers a shortcut property, text-decoration, which allows you to define the type, style, thickness, and color simultaneously. It follows the syntax shown below:
1text-decoration: <text-decoration-line> <text-decoration-style>
2 <text-decoration-color> <text-decoration-thickness>;1p {
2 text-decoration: underline wavy red 2px;
3}However, please note that the text-decoration shorthand with multiple values is not yet supported with Safari. You must use the individual properties discussed above if your webpage needs to be compatible with the browser.
Text shadow
You can also add shadows to the text for more creative effects using the text-shadow property.
text-shadow accepts a list of values with the following syntax:
1text-shadow: <offset-x> <offset-y> <blur-radius> <color>;Text transform
Lastly, the text-transform property allows you to transform the texts into uppercase, lowercase, or capitalize the first letter of each word.