CSS Text - Digital Taiyari

CSS में टेक्स्ट को स्टाइल करने और फॉर्मेट करने के लिए बहुत सारे प्रॉपर्टी होते हैं।

CSS Text Color

CSS मे color प्रॉपर्टी का इस्तेमाल टेक्सट का रंग बदलने के लिए किया जाता है, इसकी वैल्यू निम्न लिखित हो सकती हैं।

a color name like – color: red;
a HEX value like – color: #ff0000;
an RGB value like – color: rgb(255,0,0);

Syntax

 h1{
  color: red;
}

p {
  color: rgb(0, 0, 255);
}

p {
  color: #ff0000;
}

Example
Set the text color

CSS Code

 body{
  background-color: yellow;
  padding: 10px;
}
h2 {
  color: rgb(0, 0, 255);
}
p {
  color: #ff0000;
}

HTML Code

<body>
  <h2>This is Heading</h2>
  <p>This is Paragraph</p>
</body>

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा –

This is Heading

This is Paragraph

Note – The default text color is black.

Text Color and Background Color

निम्न उदाहरण मे background-color के साथ color प्रॉपर्टी का उपयोग बताया गया है।

Example

body {
  background-color: yellow;
  color: green;
  padding: 10px;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: pink;
  color: blue;
}

उपरोक्त कोड का आउटपुट निम्न प्रकार होगा –

This is Heading

This is Paragraph

CSS Text Alignment

इसके अंतर्गत टेक्सट प्रॉपर्टी निम्न प्रकार हैं –

text-align
vertical-align

Text Alignment

CSS में text-align प्रॉपर्टी के द्वारा टेक्सट को होरीजॉन्टली अलाइन (Horizontally Align) किया जा सकता है। इस प्रॉपर्टी की वैल्यू निम्न प्रकार हैं।

left – Aligns the text to the left
right – Aligns the text to the right
center – Align the text centers
justify – Align the text left and right equally

Syntax

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

div {
  text-align: justify;
}

ऊपर दिए CSS Code की मदद से निम्न आउटपुट बनाकर देखें –

Heading is center align

Heading is right align

Heading is left align

To stretch the spaces between words on each line of text so that the entire line aligns with both the left and right margins, creating a clean, “straight-edged” appearance for the paragraph. The last line of a paragraph is often an exception, typically remaining left-aligned unless “forced justification” is applied.

Note – The default align for text is left.

Vertical Alignment

CSS में vertical-align प्रॉपर्टी के द्वारा HTML Element (जैसे – div या table की सामग्री टेक्सट, इमेज आदि) को वर्टिकली अलाइन (Vertically Align) किया जा सकता है। इस प्रॉपर्टी की वैल्यू निम्न प्रकार हैं।

baseline – यह डिफ़ॉल्ट वैल्यू है, एलिमेन्ट पैरेंट की आधार रेखा के साथ अलाइन होता है।
length or % – किसी एलीमेंट को निर्दिष्ट लंबाई या प्रतिशत तक बढ़ाता या घटाता है।
sub – एलीमेंट को पैरेंट की सबस्क्रिप्ट बेसलाइन के साथ अलाइन किया जाता है।
super – एलीमेंट को पैरेंट की सुपरस्क्रिप्ट बेसलाइन के साथ अलाइन किया जाता है।
top – एलीमेंट को रेखा पर सबसे ऊंचे एलीमेंट के शीर्ष के साथ अलाइन किया जाता है।
text-top – एलीमेंट, पैरेंट एलीमेंट के फ़ॉन्ट के शीर्ष के साथ अलाइन होता है।
middle – एलीमेंट को पैरेंट एलीमेंट के मध्य में रखा जाता है।
bottom – एलीमेंट रेखा पर सबसे निचले एलीमेंट के साथ अलाइन किया जाता है।
text-bottom – एलीमेंट पैरेंट एलीमेंट के फ़ॉन्ट के निचले भाग के साथ अलाइन होता है।

Example 1

<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-color:#E7E9EB;
}
.mydiv {
  height:300px;
  background-color:#FFFFFF;
}
span{ 
  background: lightblue;
  vertical-align: super;
}
</style>
</head>

<body>
<h1>The vertical-align property</h1>

<div class="mydiv">
<p>In this paragraph, the <span>Vertical Align</span> change the vertical-align value</p>
</div>

</body>
</html>

Note – In above example try all the vertical-align property value to see the different result.

Example 2
Vertical align text and image in a div.

HTML Code
<div>
  <img src="avatar.png" class="avatar">
  <span class="username">User Name</span>
</div>

CSS Code
.avatar {
  vertical-align: middle; /*make image middle with text*/
  height: 30px;
  width: 30px;
}

.username {
  vertical-align: middle; /*make text middle with image*/
  font-size: 16px;
}

div {
  display: inline-block;
}

CSS Text Decoration

CSS में text-decoration प्रॉपर्टी का उपयोग टेक्स्ट पर सजावटी लाइनों की उपस्थिति को नियंत्रित करने के लिए किया जाता है। इनकी विभिन्न प्रॉपर्टी निम्न प्रकार हैं-

text-decoration-line
text-decoration-color
text-decoration-style
text-decoration-thickness

Text Decoration Line

CSS में text-decoration-line प्रॉपर्टी, टेक्सट में जोड़ी गई सजावट लाइन के प्रकार को सेट करती है। इस प्रॉपर्टी की विभिन्न वैल्यू निम्न प्रकार हैं –

none – Default value, Displays no decoration line of the text. (This property value also remove hyperlink underlines)
underline – The decoration line is displayed under the text.
overline – The decoration line is displayed over the text.
line-through – The decoration line is displayed through the text.

नोट – आप एकाधिक मानों को एक साथ लिख सकते हैं, जैसे कि किसी पाठ के ऊपर और नीचे दोनों ओर रेखाएँ प्रदर्शित करने के लिए overline और underline.

This text has a overline

Example
Set different types of decoration lines to the text:

h1 {
  text-decoration-line: overline;
}

h2 {
  text-decoration-line: line-through;
}

h3 {
  text-decoration-line: underline;
}

p {
  text-decoration-line: overline underline;
}

Text Decoration Color

CSS में text-decoration-color प्रॉपर्टी, टेक्सट में जोड़ी गई सजावट लाइन के रंग को सेट करती है। इस प्रॉपर्टी की विभिन्न वैल्यू निम्न प्रकार हैं –

This text has a overline

Example
Add different colors to the decoration line:

h1 {
  text-decoration-line: overline;
  text-decoration-color: red;
}

h2 {
  text-decoration-line: line-through;
  text-decoration-color: blue;
}

h3 {
  text-decoration-line: underline;
  text-decoration-color: green;
}

p {
  text-decoration-line: overline underline;
  text-decoration-color: purple;
}

Text Decoration Style

CSS में text-decoration-style प्रॉपर्टी, टेक्सट में जोड़ी गई सजावट लाइन की स्टाइल को सेट करती है। इस प्रॉपर्टी की विभिन्न वैल्यू निम्न प्रकार हैं –

This property can have one of the following values:

solid – Default value. Displays the line as a single line
double – Displays the line as a double line
dotted – Displays the line as a dotted line
dashed – Displays the line as a dashed line
wavy – Displays the line as a wavy line

This text has a overline

Decoration Line Thickness

CSS में text-decoration-thickness प्रॉपर्टी का उपयोग डेकोरेशन लाइन की मोटाई सेट के लिए किया जाता है।

Example
Add different thickness for the decoration line:

h1 {
  text-decoration-line: underline;
  text-decoration-thickness: auto;
}

h3 {
  text-decoration-line: overline;
  text-decoration-thickness: 25%;
}

p {
  text-decoration-line: underline;
  text-decoration-color: red;
  text-decoration-style: double;
  text-decoration-thickness: 5px;
}

Text Decoration Shorthand Property

p {
  text-decoration: underline red double 5px;
}

CSS Text Transformation

CSS में text-transform प्रॉपर्टी का उपयोग टेक्स्ट ट्रान्सफ़ार्मेशन को नियंत्रित करने के लिए किया जाता है।

इसका उपयोग HTML में मूल सामग्री को बदले बिना, किसी टेक्सट को बड़े या छोटे अक्षरों में बदलने, या प्रत्येक शब्द के पहले अक्षर को बड़ा करने के लिए किया जा सकता है।

Example
Demonstration of the text-transform property:

HTML Code
<div>
  <p class="upper">this is CSS Text Transformation</p>
  <p class="lower">this is CSS Text Transformation</p>
  <p class="capitalize">this is CSS Text Transformation</p>
</div>

CSS Code
.upper{
  text-transform: uppercase;
}
.lower {
  text-transform: lowercase;
}
.capitalize {
  text-transform: capitalize;
}

CSS Text Spacing

CSS में text-spacing को नियंत्रित करने के लिए कई प्रॉपर्टीस हैं, नीचे विभिन्न text-spacing प्रॉपर्टीस के बारे मे बताया गया है –

text-indent
letter-spacing
line-height
word-spacing
white-space

text-indent प्रॉपर्टी का उपयोग टेक्स्ट-ब्लॉक में पहली पंक्ति के इंडेंटेशन को निर्दिष्ट करने के लिए किया जाता है।

Example
Indent the first line of text in a text-block:

p {
  text-indent: 50px;
}

letter-spacing प्रॉपर्टी का उपयोग अक्षरों (letters) के बीच स्पेस मैनेज करने के लिए किया जाता है। नेगेटिव वैल्यू मान्य हैं।

Example

p {
  letter-spacing: 5px;
}

p {
  letter-spacing: -2px;
}

line-height प्रॉपर्टी का उपयोग लाइनों के बीच स्पेस मैनेज करने के लिए किया जाता है। निगेटिव वैल्यू मान्य नहीं होती है।

Example

p{
  line-height: 0.8;
}

p{
  line-height: 1.8;
}

word-spacing प्रॉपर्टी का उपयोग टेक्स्ट में शब्दों के बीच के स्पेस को मैनेज करने के लिए किया जाता है। निगेटिव वैल्यू मान्य होती है।

Example

p {
  word-spacing: 10px;
}

p {
  word-spacing: -2px;
}

white-space प्रॉपर्टी का उपयोग किसी एलीमेंट के अंदर white space को मैनेज करने के लिए किया जाता है। इस प्रॉपर्टी की विभिन्न वैल्यू निम्न प्रकार हैं –

normal
nowrap
pre
pre-line
pre-wrap

Example
Disable text wrapping inside an element

p {
  white-space: nowrap;
}

CSS Text Shadow

text-shadow प्रॉपर्टी का उपयोग टेक्सट मे शैडो यानि परछाई जोड़ने के लिए किया जाता है।

इसके सरलतम उपयोग में, आप केवल Horizontally और Vertically छाया (Shadow) निर्दिष्ट करते हैं।
इसके अलावा, आप Shadow Color और Blur Effect भी जोड़ सकते हैं।

CSS Shadow Effect

Example
Horizontal and vertical yellow shadow:

h1 {
  text-shadow: 2px 2px yellow;
}

CSS Shadow Effect

Example
Horizontal and vertical shadow, with color and blur effect:

h1 {
  text-shadow: 2px 2px 5px red;
}

CSS Shadow Effect

Example
Text-shadow on a white text:

h1 {
  color: white;
  text-shadow: 2px 2px 4px black;
}

CSS Shadow Effect

Example
Text-shadow with red neon glow:

h1 {
  text-shadow: 0 0 3px #ff0000;
}

Multiple Shadows

text-shadow प्रॉपर्टी एक एलिमेंट के लिए मल्टीपल शैडो भी स्वीकार करती है। प्रत्येक शैडो को अल्पविराम ( , )से अलग किया जाता है।

CSS Shadow Effect

Example
Text-shadow with red and blue neon glow:

h1 {
  color: white;
  text-shadow: 0 0 3px #ff0000, 0 0 5px #0000ff;
}

CSS Shadow Effect

Example
Text-shadow with black, blue and red neon glow: 

h1 {
  color: white;
  text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px red;
}

Share This Page

CSS Text Color

This is Heading

Text Color and Background Color

This is Heading

CSS Text Alignment

Text Alignment

Heading is center align

Heading is right align

Heading is left align

Vertical Alignment

CSS Text Decoration

Text Decoration Line

Text Decoration Color

Text Decoration Style

Decoration Line Thickness

Text Decoration Shorthand Property

CSS Text Transformation

CSS Text Spacing

CSS Text Shadow

CSS Shadow Effect

CSS Shadow Effect

CSS Shadow Effect

CSS Shadow Effect

Multiple Shadows

CSS Shadow Effect

CSS Shadow Effect

Leave a Comment Cancel reply