How to set the margins of a paragraph element 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 set the margins of a paragraph element using CSS ?

M

manaschhabra2

Improve

Article Tags :

Similar Reads

How to set the margins of a paragraph element using CSS ?

The CSS margins properties are used to make space around components, outside any characterized borders. With CSS, you have full power over the margins. There are properties for setting the edge for each side of a component (top, right, base, and left). CSS has properties for indicating the edge for

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 Change the Margin of Paragraph using JavaScript ?

The CSS Margin property is used to give space around elements. It is completely transparent and has no background color. It clears up space around the component. Using separate properties, you can independently change the top, bottom, left, and right margins. In this article, we'll see how to change

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: <!DOCTYPE html

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, first

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 addin

How to wrap a text in a <pre> tag using CSS ?

In this article, we will learn how to wrap a text in a <pre> tag. The <pre> tag is used to display the block of preformatted text which preserves the text spaces, line breaks, tabs, and other formatting characters which are ignored by web browsers. By default, the <pre> tag does no

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