How to Add Shadow to Text using CSS?

How to bold the text using CSS ?

Last Updated : 08 Oct, 2024

In HTML, we use the <b> and <strong> tags to make content bold. However, when it comes to styling text, CSS provides a more versatile way to achieve boldness through the font-weight property. This property allows you to set various boldness levels for your text to mark something important.

Font-Weight Property Values

Value	Description
normal	Normal font-weight, equivalent to 400 (default numeric value).
bold	Bold font-weight, equivalent to 700.
bolder	Sets the font-weight bolder than the parent element.
lighter	Sets the font-weight lighter than the parent element.
<number>	A numeric value between 1 and 1000, inclusive (increasing boldness).

When lighter or bolder is specified, the below chart shows how the absolute font-weight of the element is determined.

Font-Weight Inheritance Chart

Parent Value	lighter	bolder
100	100	400
200	100	400
300	100	400
400	100	700
500	100	700
600	400	900
700	400	900
800	700	900
900	700	900

Example 1: Using font-weight for Bold Text

The following example demonstrates how to use the font-weight property in CSS to represent simple text in bold.

HTML

<!DOCTYPE html>
<html>

<head>
    <style type="text/css">
        h2 {
            font-weight: 700;
            color: green;
        }

        .text {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <h2>
        Welcome To Geeks for Geeks
    </h2>
    <p class="text">
        A Computer Science portal for geeks
    </p>

</body>

</html>

Output:

Example 2: Using Various Font-Weight Values

The following example demonstrates different font-weight properties applied to simple texts.

HTML

<!DOCTYPE html>
<html>

<body>
    <h2 style="font-weight: bold;
               text-decoration: underline;">
        Thought of the day
    </h2>
    <p style="font-weight: lighter;">
        A good programmer is someone who
        always look both ways
        <span style="font-weight: 900;">
            before crossing the one way road.
        </span>
    </p>

</body>

</html>

Output:

font-weight property

How to Add Shadow to Text using CSS?

prakhargupta24

Improve

Article Tags :

Similar Reads

How to Style Text Buttons using CSS?

Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons usi

How to Add Shadow to Text using CSS?

The text-shadow property is used to add shadow to the text. The text-shadow property creates text shadows, specifying horizontal/vertical offsets, blur radius, and color for depth and emphasis.Note: We can customize text shadow by changing position, blur, and color for improved appearance and visual

How to Add Stroke using CSS ?

Adding a stroke using CSS means applying an outline or border around text or elements to enhance visibility and style. This effect is typically achieved with properties like `text-shadow` for text or stroke in SVG elements, creating bold, defined edges.Several methods can be used to add strokes usin

How to create Text Buttons using CSS ?

In this article, we are going to see how to create text buttons using CSS. The text button is a button that appears to be text but acts as a button if we press it. Text buttons are different from anchor tags even if they might look similar. To create text buttons first, we create simple buttons in H

How to Add Border Around Text using CSS?

The CSS border property is used to add a border around text by wrapping the text in an HTML element like <span> or <p>. Syntaxborder: "borderWidth borderStyle colorName;"Example 1: Adding a border around the text content using CSS.HTML<p> The following text has a border <span st

How to indent text in HTML by using CSS ?

Text indentation in an HTML document sets the length of empty white space before lines of text in a block, typically marking the beginning of a paragraph. Proper indentation can enhance the readability and layout of your web content. Here, we will explore several common approaches for text indentati

How to change the color of selected text using CSS ?

The colour of selected text can be easily changed by using the CSS | ::selection Selector. In the below code, we have used CSS ::selection on <h1> and <p> element and set its colour as yellow with green background. Below example implements the above approach: Example: html <!DOCTYPE h

How to Underline Text using CSS?

To underline a text using CSS, the CSS text-decoration property is used with the value set to underline.Using text-decorationWe use the text-decoration CSS property to underline a text using CSS. The text that is to be underlined is inserted in a <p> tag and the property is applied.Syntaxtext-

How to set the font family of text using CSS ?

The CSS font property is used to set the fonts content of HTML element. The font-family property specifies the font of an element. It can have multiple fonts as a backup system i.e. if the browser doesnâ€™t support one font then the other can be used. Syntax: element_selector { font-family: fonts-name

How to Change the Color of Bullets using CSS?

Changing the color of bullets using CSS means styling the bullet points in a list (<ul> or <ol>) to have a different color than the text. This can be done using pseudo-elements or setting the color property on the list item, enhancing design consistency.1. Adding An Extra MarkupBy adding