HTML Bold

Importance of Bold Styling in HTML

Bold styling enhances text visibility and emphasis, integrating seamlessly with CSS for comprehensive styling control. This functionality helps direct viewer attention and improve readability.

Control Over Text Display

You can use the <strong> or <b> tags to emphasize important text:

• <strong> Tag: Emphasizes text semantically, indicating special importance. Screen readers will often interpret this differently from other text.
• <b> Tag: Simply makes text bold without implying any added significance.

Example:

<p>The following word uses a <strong>strong</strong> tag, while <b>this</b> is just bolded for visual effect.</p>


Overview of the font-weight Property in CSS

The font-weight property in CSS controls the thickness of text, affecting its emphasis and readability. Values can range from 100 (thinnest) to 900 (boldest), with keywords like bold, bolder, lighter, and normal.

Example of font-weight Usage

p:first-child {
  font-weight: bold;
}

p:nth-child(2) {
  font-weight: normal;
}

Implementing Bold Styling with CSS

The font-weight property is effective for controlling boldness in text.

Adding Bold Styling

To make text bold, apply font-weight in various ways:

— Inline Styles:

<p style="font-weight: bold;">Hello, world!</p>


— Internal or External Stylesheets:

.boldText {
  font-weight: bold;
}

<p class="boldText">Hello, world!</p>


Different Levels of Boldness

— Standard Bold:

<p style="font-weight: bold;">Hello, world!</p>


— Extra Bold Using Numeric Value:

<p style="font-weight: 800;">Hello, world!</p>


— Less Bold:

<p style="font-weight: 300;">Hello, world!</p>


Default Styling vs. Custom Styling

Default styles are predefined by the browser and vary depending on settings. Custom styling modifies these defaults, allowing for a tailored design. One approach is using the @font-face rule to specify custom fonts.

Customizing Font Weights

By using various weights (e.g., bold or light), designers can match the overall aesthetic of a site.

Default Bold Styling in Browsers

There are two primary tags for bold styling:

1. Using the <b> Tag: Applies a bold style for visual effect.

<b>This text will appear bold.</b>


2. Using the <strong> Tag: Bold with semantic importance.

<strong>This text will also appear bold.</strong>


Browser Default Styling

Both <b> and <strong> rely on default CSS, typically applying font-weight: bold or 700.

Customizing Boldness with CSS

.normal {
  font-weight: normal; /* Equivalent to 400 */
}

.bold {
  font-weight: bold; /* Equivalent to 700 */
}

.bolder {
  font-weight: bolder;
}

.lighter {
  font-weight: lighter;
}

.numeric {
  font-weight: 900; /* Maximum boldness */
}

‍‍

<p class="bold">This paragraph is bold.</p>
<p class="bolder">This text is bolder than its parent element.</p>
<p class="numeric">This is the boldest text.</p>

Differences in font-weight

• bold: Sets the font weight to 700.
• bolder: Increases the font weight relative to its parent.
• Numeric values (100 to 900): Allow precise control over the level of boldness.