CSS Text Styling- CSS Course

Styling Text with CSS

With the basic elements already learned, we now focus on text styling, one of the most common tasks in CSS.

Basic Elements in Text and Font Styling

We already know that the text inside an element is displayed within the element's content box. Text starts at the top-left of the content area (or top-right in RTL layouts) and flows until it reaches the allocated space, then moves down to the next line, and continues until all the text fits inside the box.

Thus, text behaves like a series of inline elements, placed on adjacent lines that are only broken by using a line-break element – <br>.

The properties used to style text are divided into two main categories:

• Font styles – includes properties that specify the font applied to the text and its characteristics,
• Text layout styles – includes properties that affect character spacing, line height, text alignment, and more.

Fonts

With the help of an example, we will see in action some of the properties applicable to fonts.

Color

The color property defines the color of the content of the selected element (usually text).

  p {
    color: red;
  }

This rule will make the paragraph text red.

Font Families

To set a specific font, we use the font-family property. This allows specifying a font or a list of fonts, applied only if they are available on the visitor's computer. Otherwise, the browser will apply a default font.

  p {
    font-family: Arial;
  }

Web Safe Fonts

There is a limited number of fonts generally available across most systems, so these can be used safely.

The list of safe fonts is updated as operating systems evolve, and you can find it online.

• Arial (Helvetica) – sans-serif
• Courier New (Courier) – monospace
• Georgia – serif
• Times New Roman (Times) – serif
• Trebuchet MS – sans-serif
• Verdana – sans-serif

CSS Font Stack maintains a list of web safe fonts.

Default Fonts

CSS defines five generic font names:

• serif – fonts with small decorative strokes at the ends of characters,
• sans-serif – fonts without serifs,
• monospace – each character has the same width, usually used for code display,
• cursive – fonts that imitate handwriting,
• fantasy – decorative fonts.

These font types are very generic, and the font generated when used depends greatly on the browser and operating system.

Font Stacks

Because the availability of a specific font is uncertain, it is recommended to use a comma-separated list of fonts from which the browser will choose the available one:

  p {
    font-family: "Trebuchet MS", Verdana, sans-serif;
  }

The list starts with the first targeted font, and if it is not available, the browser moves to the second font, then the third, and so on. The list ends with a generic font, so the browser will select any available sans-serif font on the system.

Font Size

The most common units used for text sizing are:

• px
• em
• rem

A good approach for text sizing is to set the document's font size (html) to 10px, making subsequent calculations simpler and grouping sizes easier to manage.

Font Style

Used to enable or disable italic text, with the following values:

• normal – sets the text to normal style,
• italic – sets the text to the italic version of the font; if the font does not support italic, applies oblique,
• oblique – simulates italic by slanting the normal version.

Font Weight

Sets how thick the text will appear.

• normal, bold – normal font and bold font,
• lighter, bolder – adjusts the current element's weight one step lighter or one step bolder,
• 100–900 – numeric weight values for finer control.

Text-transform

Allows transforming text as follows:

• none – no transformation,
• uppercase – transforms all letters to uppercase,
• lowercase – opposite of uppercase,
• capitalize – capitalizes the first letter of each word,
• full-width – renders all characters in a fixed-width space, similar to a monospace font.

Text Decorations – text-decoration

Enables or disables text decorations. It is often used to remove the default underline from links.

• none – disables existing decorations,
• underline – underlines the text,
• overline – draws a line above the text,
• line-through – strikes through the text.

text-decoration can accept multiple values simultaneously and is a shorthand for text-decoration-line, text-decoration-style, and text-decoration-color. You can use combinations to create interesting effects.

Text with Shadow Effects – Text drop shadows

You can apply shadow effects to text using the text-shadow property:

text-shadow: 3px 4px 5px red;

The first value represents the horizontal offset (left/right) of the shadow relative to the text.

The second value represents the vertical offset (up/down).

The third value represents the blur radius. The color can be any valid CSS color.

Text Layout

Text Alignment

The text-align property is used to control how text is aligned within its content box.

• left – aligns text to the left,
• right – aligns text to the right,
• center – centers the text,
• justify – spreads the text by adjusting word spacing so all lines have equal width.

Line Height

This property defines the height of each line of text. Any unit can be used, or a unitless value acting as a multiplier, which is often the best choice. The font size is multiplied to obtain the line height. Typically, line height ranges between 1.5–2 (double spacing).

line-height: 1.5;

Letter and Word Spacing

These are used less frequently, mainly to improve readability of dense fonts, allowing you to set spacing between letters and/or words.

p::first-line {
  letter-spacing: 2px;
  word-spacing: 4px;
}

The properties studied so far are among the most commonly used, but there are many other properties you can occasionally use:

Font Styling:

• font-variant: – toggles between small and normal caps,
• font-kerning: – enables/disables letter spacing,
• font-feature-settings: – enables/disables various OpenType font features,
• font-variant-alternates: – controls font alternates,
• font-variant-caps: – controls alternative glyphs for uppercase,
• font-variant-east-asian: – controls East Asian glyphs,
• font-variant-ligatures: – controls ligatures and contextual forms,
• font-variant-numeric: – controls glyphs for numbers and fractions,
• font-variant-position: – controls small glyphs like superscript/subscript,
• font-size-adjust: – sets font size based on lowercase height,
• font-stretch: – selects condensed or expanded font face,
• text-underline-position: – position of text underline,
• text-rendering: – gives hints to the browser rendering engine.

Text Alignment:

• text-indent: – horizontal space before the first line,
• text-overflow: – how overflowed content is signaled,
• white-space: – how white space is handled,
• word-break: – line breaks on text overflow,
• direction: – text direction: rtl or ltr,
• hyphens: – automatic hyphenation,
• line-break: – line breaking rules for Asian languages,
• text-align-last: – alignment of the last line,
• text-orientation: – orientation of characters in vertical mode,
• word-wrap: – line breaks in inline elements,
• writing-mode: – writing direction: horizontal or vertical.

Font Shorthand

Many font properties can be written in a single line, in a specific order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family.

Of all the properties above, only font-size and font-family are required when using the shorthand form.

The font-size and line-height properties must be separated by a slash (/).

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

font: 400 15px/1.4 "Open Sans", sans-serif;

font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;

Handling Text Direction

In recent years, CSS has evolved to better support different content directions, including right-to-left and top-to-bottom (as in Japanese writing).

These different directions are called writing modes.

A writing mode in CSS refers to the flow of text – horizontal or vertical. The writing-mode property allows us to change the writing mode.

You don't need to change writing mode only for a specific language. You can also use it creatively to create more interesting layouts for users.

h6 {
  writing-mode: vertical-rl;
}

There are three possible values:

• horizontal-tb: – text flows from top to bottom,
• vertical-rl: – text flows from right to left,
• vertical-lr: – text flows from left to right.

In practice, the writing-mode property sets the block's display direction, which affects text flow. Changing the writing mode also changes the display orientation from block to inline or vice versa.

🧠 Final Quiz – CSS Text Styling