In CSS, frequency units are used to specify the pitch of a voice in aural style sheets. These style sheets are designed for screen readers and other speech-synthesis browsers to render documents audibly. The two frequency units available are Hertz (Hz) and kilohertz (kHz).
Hertz (Hz)
This unit represents the number of cycles per second. A higher value corresponds to a higher pitch. For example, 100Hz represents one hundred cycles per second.
Example 1: Setting a Basic Voice Pitch
/* Sets the average pitch of the speaking voice for the entire page */
body {
pitch: 120Hz;
}
Explanation This code sets a baseline pitch of 120Hz for the voice synthesizer reading the document's body content. This creates a moderately low-pitched voice.
Example 2: Changing Pitch for Emphasis
/* Makes emphasized text have a slightly higher pitch */
em {
pitch: 140Hz;
}
Explanation Here, the em element is styled to have a pitch of 140Hz. This makes any emphasized text stand out by being spoken at a slightly higher tone.
Example 3: Lowering Pitch for Strong Importance
/* Lowers the pitch for text marked as strong */
strong {
pitch: 100Hz;
}
Explanation This rule gives strong elements a lower pitch of 100Hz. A deeper voice is often associated with seriousness or importance in speech.
Example 4: Defining a Pitch Range
/* Sets a narrow pitch range for headings */
h1 {
pitch-range: 20Hz;
pitch: 150Hz;
}
Explanation This example uses pitch-range to control the variation in pitch. By setting a low pitch-range of 20Hz and a base pitch of 150Hz, the heading will be read in a more monotone and steady high-pitched voice.
Example 5: Pitch for Blockquotes
/* Sets a distinct, lower pitch for blockquotes */
blockquote {
pitch: 95Hz;
}
Explanation Assigning a unique, low pitch of 95Hz to the blockquote element helps to aurally distinguish quoted text from the main content, similar to how it is visually indented.
Kilohertz (kHz)
The kilohertz unit is equivalent to 1000 Hertz. It is used for specifying very high-frequency pitches, though it is less common in practical aural CSS.
Example 1: Setting a High Pitch with kHz
/* Sets a very high pitch for a specific class */
.high-note {
pitch: 0.2kHz; /* Equivalent to 200Hz */
}
Explanation This code sets the pitch for any element with the class high-note to 0.2kHz. This is the same as 200Hz and results in a very high-pitched voice.
Example 2: Pitch for Abbreviation Readouts
/* Specifies a higher pitch for acronyms and abbreviations */
abbr {
pitch: 0.18kHz; /* Equivalent to 180Hz */
}
Explanation This rule targets the abbr element, setting its pitch to 0.18kHz (180Hz). This can help signal to the listener that the text is an abbreviation.
Example 3: Distinguishing Code Snippets Aurally
/* Sets a unique pitch for preformatted text or code */
pre, code {
pitch: 0.11kHz; /* Equivalent to 110Hz */
}
Explanation By applying a pitch of 0.11kHz (110Hz), this CSS makes screen readers pronounce code blocks and inline code in a distinct, slightly lower tone.
Example 4: Using kHz for a Header
/* Defines a high pitch for a secondary heading */
h2 {
pitch: 0.16kHz; /* Equivalent to 160Hz */
}
Explanation This example sets the pitch for all h2 elements to 0.16kHz, or 160Hz. This ensures secondary headings are read in a consistently high tone.
Example 5: Extremely High Pitch for Effect
/* Uses a very high pitch for a special alert class */
.alert-sound {
pitch: 0.3kHz; /* Equivalent to 300Hz */
}
Explanation This rule uses 0.3kHz (300Hz) to create an unusually high-pitched voice for elements with the alert-sound class, grabbing the listener's attention for important alerts.