How to design initial letter of text paragraph using CSS ?

How to change the cases of text in paragraph using CSS?

Last Updated : 09 Feb, 2022

The approach of this article is to how to change cases of text in a paragraph by using the CSS text-transform Property. It is s used to control the capitalization of the text. It mainly changes the text into upper case and lowercase format.

Syntax:

text-transform: none | capitalize | uppercase | lowercase | initial | inherit;

Example:

css

<!DOCTYPE html> 
<html> 

<head> 
    <style> 
        h1 { 
            color: green; 
        } 
        
        p.gfg { 
            text-transform: capitalize; 
        } 
        p.GFG 
        {
            text-transform:uppercase; 
        }
        p.sudo 
        {
            text-transform:lowercase;
        }
        
    </style> 
</head> 

<body> 
    <center> 
        <h1>GeeksForGeeks</h1>
        <h2> 
        How to change cases of text 
in paragraph using CSS?
</h2>
        
        <p class="gfg">capitalize</p> 
        <p class="sudo"> 
        lower case letter
        </p>  
        <p class="GFG"> 
        uppercase letter</p>
</body> 

</html>

Output:

Supported Browsers are listed below:

Google Chrome 1.0
Internet Explorer 4.0
Firefox 1.0
Opera 1.0
Safari 3.5

How to design initial letter of text paragraph using CSS ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to design initial letter of text paragraph using CSS ?

Sometimes a webpage contains good contents for reading but the styling of the texts looks simple and straight, so it becomes boring for the readers to read it, and they leave the webpage. But when they read story books, they read them fully because of the good visuals in that book, so they complete

How to set indent the second line of paragraph using CSS ?

There are several methods to indent the second line of the paragraph that can be achieved in many ways. Some of the methods to achieve this are described below with proper code and output. Now some styling can be done using CSS in various ways to indent the second line as per need. Note: By default,

How to align the last line of a paragraph element to the right using CSS?

In this article, we will set the alignment of last paragraph element to the right by using CSS property. To set the alignment of last paragraph to right, we use CSS text-align-last property. The text-align-last is used to set the last line of the paragraph just before the line break. The line break

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 change the text alignment using jQuery ?

In this article, we will see how to change the text alignment of an element using jQuery. To change the text alignment of an element, we will use css() method.Â The css() method is used to change the style property of the selected element. Syntax: $(selector).css(property) In the below example, firs

How to change text into lower case string using filters in Vue.js ?

Vue is a progressive framework for building user interfaces. The core library is focused on the view layer only and is easy to pick up and integrate with other libraries. Vue is also perfectly capable of powering sophisticated Single-Page Applications in combination with modern tooling and supportin

How to Set Text Color for a Specific Paragraph using CSS ?

In web development, setting different text colors for a specific paragraph can be useful for highlighting certain content. We will see how to set different text colors for a specific paragraph using CSS. This can help make certain parts of your text stand out. Tip: Prefer External Stylesheets for ea

How to Change the Space Between Words in CSS?

Changing the space between words in CSS enhances the readability of your text and can improve the overall aesthetics of your web pages. The word-spacing property allows you to control the spacing between words in an element. We will be going to discuss the approaches that can be used to Change the S

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 append some text to all paragraphs using jQuery ?

In this article, we will append some text to all paragraph elements using jQuery. To append some text to all paragraph elements, we use append() and document.createTextNode() methods. jQuery append() method is used to insert some content at the end of the selected elements. Syntax: $(selector).appen