-->

Styling HTML Text

CSS is used to style text, such as changing its color or changing font family and so on. CSS is a big topic. You can get more information about CSS from CSS tutorial. Here are just a few styles used for your understanding. For this, you use the Style attribute. And give a CSS property and its values.

The HTML Style Attribute

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

<tagname style="property:value;">

The property is a CSS property. The value is a CSS value.

Changing Text Color

To change the color of the text of any tag, you use the color property of CSS. And after that, putting the colon to name the color.

<h1 style = "color: red;"> Green Heading. </ h1>

<p style = "color: red;"> This text will be red </ p>

Changing Font Family

To change the font family of text, you use the font family property and give the name of the font family as the value.

<p style = "font-family: Arial;"> This text will be in Arial </ p>

Changing Text Size

To change the size of the text, you use the font size property and give the size you want as the value.

<p style = "font-size: 45px;"> This size is changed by style tag. </ p>

Changing Text Position

To change the position of text, text align property is used and as value you can pass left, right or center.

<p style = "text-align: center;"> This position is change by style tag </ p>

An example of this is being given below.

<!DOCTYPE html>

<html>

            <head>

                        <title>Text Formatting </title>

            </ head>

            <body>

                        <h1 style = "color: green;"> Green Heading</h1>

                        <p style = "color: red;"> This text will be red </p>

                        <p style = "font-family: Arial;"> This text will be in Arial </p>

                        <p style = "font-size: 45px;"> This size is changed by style tag. </p>

                        <p style = "text-align: center;"> This position is changed by style tag. </p>

                        <p style = " color: blue; font-size: 50px;text-align: right;"> This is using multiple style property. </p>

            </ body>

</ html>

The above script will generate the given web page.

HTML Style Tag properties (CSS properties) are given End of the page

 

Styling HTML Text

Text को style करने के लिए जैसे की उसका color change करना या font family change करना आदि के लिए CSS को यूज़ किया जाता है। CSS एक बड़ा topic है। CSS के बारे में और अधिक जानकारी आप css tutorial से प्राप्त कर सकते है। यँहा पर सिर्फ आपकी समझ के लिए कुछ styles का इस्तेमाल बताया जा रहा है। इसके लिए आप Style attribute  यूज़ करते है। और एक CSS property और उसकी values देते है।

HTML Style Attribute

एक HTML तत्व की Style सेट करना, style attribute के साथ किया जा सकता है।

HTML style attribute में निम्न वाक्य रचना है:

<tagname style="property : value;" >

property एक css property है value एक css value है।

Changing Text Color

किसी भी tag के text का color change करने के लिए आप CSS की color property यूज़ करते है। और इसके बाद colon लगाकर color का नाम देते है।

<h1 style = "color: red;"> ग्रीन हेडिंग</ h1>

<p style = "color: red;"> यह टेक्स्ट लाल रंग में है। </ p>

Changing Font Family

Text की font family change करने के लिए आप font family property यूज़ करते है और value के रूप में font family का नाम देते है।

<p style = "font-family: Arial;"> This text will be in Arial </ p>

Changing Text Size

Text की size change करने के लिए आप font size property यूज़ करते है और value के रूप में जो size आप चाहते है वह देते है।

<p style = "font-size: 45px;"> यह आकार style tag द्वारा बदल दिया गया है। </ p>

Changing Text Position

Text की position change करने के लिए text align property यूज़ की जाती है और value के रूप में आप left, right या center pass कर सकते है।

<p style = "text-align: center;"> यह स्थिति Style टैग द्वारा बदलती है। </ p>

इसका उदाहरण नीचे दिया जा रहा है।

<!DOCTYPE html>

<html>

            <head>

                        <title>टेक्स्ट स्वरूपण </title>

            </ head>

            <body>

                        <h1 style = "color: red;"> ग्रीन हेडिंग</h1>

                        <p style = "color: red;"> यह टेक्स्ट लाल रंग में है। </p>

                        <p style = "font-family: Arial;"> यह एरियल फ़ॉन्ट टेक्स्ट है।</p>

                        <p style = "font-size: 45px;"> यह आकार style tag द्वारा बदल दिया गया है। </p>

                        <p style = "text-align: center;"> यह स्थिति Style टैग द्वारा बदलती है। </p>

                        <p style = " color: blue; font-size: 50px;text-align: right;"> यह कई Style property का उपयोग कर रहा है। </p>

            </ body>

</ html>

ऊपर दी गयी script निचे दिया गया web page generate करेगी।  

HTML Style Tag properties (CSS properties) :

 

CSS PROPERTY | CSS प्रॉपर्टी

EXPLANATION | व्याख्या

align-content

Specifies the alignment between the lines inside a flexible container when the items do not use all available space

जब आइटम सभी उपलब्ध स्थान का उपयोग नहीं करते हैं, एक लचीली कंटेनर के अंदर की पंक्तियों के बीच संरेखण निर्दिष्ट करता है

align-items

Specifies the alignment for items inside a flexible container

एक लचीला कंटेनर के अंदर के आइटम के लिए संरेखण निर्दिष्ट करता है

align-self

Specifies the alignment for selected items inside a flexible container

एक लचीली कंटेनर के अंदर चयनित आइटम के लिए संरेखण निर्दिष्ट करता है

all

Resets all properties (except unicode-bidi and direction)

सभी प्रॉपर्टी को रीसेट करता है। (unicode-bidi और direction को छोड़कर )

animation

A shorthand property for all the animation properties

सभी एनीमेशन प्रॉपर्टी के लिए एक लघुकोड प्रॉपर्टी

animation-delay

Specifies a delay for the start of an animation

एनीमेशन की शुरुआत के लिए विलंब निर्दिष्ट करता है।

animation-direction

Specifies whether an animation should be played forwards, backwards or in alternate cycles

निर्दिष्ट करता है कि क्या एनीमेशन आगे की ओर, पीछे की ओर या वैकल्पिक चक्रों में चलना चाहिए।

animation-duration

Specifies how long an animation should take to complete one cycle

निर्दिष्ट करता है कि एक चक्र को पूरा करने के लिए कितनी देर तक एनीमेशन लेना चाहिए।

animation-fill-mode

Specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)

जब एनीमेशन नहीं चल रहा है तब तत्व के लिए एक style निर्दिष्ट करती है (इसे शुरू होने से पहले, समाप्त होने के बाद, या दोनों)

animation-iteration-count

Specifies the number of times an animation should be played

एनीमेशन चलने की संख्या निर्दिष्ट करता है

animation-name

Specifies a name for the @keyframes animation

@keyframes एनीमेशन के लिए एक नाम निर्दिष्ट करता है

animation-play-state

Specifies whether the animation is running or paused

निर्दिष्ट करता है कि एनीमेशन चालू है या रोका गया है

animation-timing-function

Specifies the speed curve of an animation

एनीमेशन की गति वक्र निर्दिष्ट करता है

backface-visibility

Defines whether or not the back face of an element should be visible when facing the user

परिभाषित करता है कि उपयोगकर्ता का सामना करते समय एक तत्व का back face दिखाई देना चाहिए या नहीं

background

A shorthand property for setting all the background properties in one declaration

एक घोषणा में सभी background properties को सेट करने के लिए एक लघुकोड प्रॉपर्टी

background-attachment

Sets whether a background image scrolls with the rest of the page, or is fixed

निर्धारित करता है कि क्या पृष्ठ के बाकी हिस्सों के साथ एक background image करेगी या नहीं

background-blend-mode

Specifies the blending mode of each background layer (color/image)

प्रत्येक background layer (रंग / छवि) का सम्मिश्रण मोड निर्दिष्ट करता है

background-clip

Defines how far the background (color or image) should extend within an element

परिभाषित करता है कि एक तत्व के भीतर background (रंग या छवि) कितनी दूर होनी चाहिए

background-color

Specifies the background color of an element

एक तत्व का background रंग निर्दिष्ट करता है

background-image

Specifies one or more background images for an element

एक तत्व के लिए एक या अधिक background चित्र निर्दिष्ट करता है

background-origin

Specifies the origin position of a background image

background image की मूल स्थिति निर्दिष्ट करता है

background-position

Specifies the position of a background image

background image की स्थिति निर्दिष्ट करता है

background-repeat

Sets if/how a background image will be repeated

निर्धारित करता है कि कैसे एक background image दोहराया जाएगा

background-size

Specifies the size of the background images

background images के आकार को निर्दिष्ट करता है

border

A shorthand property for border-width, border-style and border-color

border-width, border-style और border-color के लिए एक shorthand property

border-bottom

A shorthand property for setting all the bottom border properties in one declaration

एक घोषणा में सभी bottom border properties को स्थापित करने के लिए एक shorthand property

border-bottom-color

Sets the color of the bottom border

bottom border का रंग सेट करता है

border-bottom-left-radius

Defines the radius of the border of the bottom-left corner

नीचे-बाएं कोने की सीमा के त्रिज्या को परिभाषित करता है

border-bottom-right-radius

Defines the radius of the border of the bottom-right corner

नीचे दायें कोने की सीमा के त्रिज्या को परिभाषित करता है

border-bottom-style

Sets the style of the bottom border

नीचे की सीमा की style निर्धारित करता है

border-bottom-width

Sets the width of the bottom border

नीचे सीमा की चौड़ाई निर्धारित करता है

border-collapse

Sets whether table borders should collapse into a single border or be separated

निर्धारित करता है कि table borders को single border में होना चाहिए या अलग होना चाहिए

border-color

Sets the color of the four borders

चार सीमाओं का रंग सेट करता है

border-image

A shorthand property for setting all the border-image-* properties

सभी border-image-* properties को स्थापित करने के लिए एक shorthand property

border-image-outset

Specifies the amount by which the border image area extends beyond the border box

उस सीमा को निर्दिष्ट करता है जिसके द्वारा सीमा छवि क्षेत्र सीमा बॉक्स से परे फैली हुई है

border-image-repeat

Specifies whether the border image should be repeated, rounded or stretched

निर्दिष्ट करता है कि क्या सीमा छवि को दोहराया, गोल या फैला हुआ होना चाहिए

border-image-slice

Specifies how to slice the border image

निर्दिष्ट करता है कि सीमा चित्र को कैसे काटना है

border-image-source

Specifies the path to the image to be used as a border

सीमा के रूप में उपयोग किए जाने वाले चित्र का पथ निर्दिष्ट करता है

border-image-width

Specifies the width of the border image

सीमा छवि की चौड़ाई निर्दिष्ट करता है

border-left

A shorthand property for setting all the left border properties in one declaration

एक घोषणा में सभी बाएं सीमाओं के property को स्थापित करने के लिए एक लघुकोड property

border-left-color

Sets the color of the left border

बाईं सीमा का रंग सेट करता है

border-left-style

Sets the style of the left border

बाईं सीमा का style सेट करता है

border-left-width

Sets the width of the left border

बाईं सीमा की चौड़ाई सेट करता है

border-radius

A shorthand property for setting all the four border-*-radius properties

border-*-radius properties निर्धारित करने के लिए एक लघुकोड property

border-right

A shorthand property for setting all the right border properties in one declaration

एक घोषणा में सभी दाहिने सीमाओं के property को स्थापित करने के लिए एक लघुकथ property

border-right-color

Sets the color of the right border

दाहिने सीमा का रंग सेट करता है

border-right-style

Sets the style of the right border

दाहिने सीमा का style सेट करता है

border-right-width

Sets the width of the right border

दाहिने की चौड़ाई सेट करता है

border-spacing

Sets the distance between the borders of adjacent cells

adjacent cells की सीमाओं के बीच की दूरी निर्धारित करता है

border-style

Sets the style of the four borders

चारो सीमाओं की style निर्धारित करता है

border-top

A shorthand property for setting all the top border properties in one declaration

एक घोषणा में सभी शीर्ष सीमा properties को स्थापित करने के लिए एक लघुकोड properties

border-top-color

Sets the color of the top border

ऊपरी सीमा का रंग सेट करता है

border-top-left-radius

Defines the radius of the border of the top-left corner

ऊपरी-बाएं कोने की सीमा की त्रिज्या को परिभाषित करता है

border-top-right-radius

Defines the radius of the border of the top-right corner

ऊपरी- दाहिने कोने की सीमा की त्रिज्या को परिभाषित करता है

border-top-style

Sets the style of the top border

ऊपरी सीमा की style निर्धारित करता है

border-top-width

Sets the width of the top border

ऊपरी सीमा की चौड़ाई सेट करता है

border-width

Sets the width of the four borders

चारो सीमाओं की चौड़ाई निर्धारित करता है

bottom

Sets the elements position, from the bottom of its parent element

अपने मूल तत्व के निचले भाग से तत्वों की स्थिति निर्धारित करता है

box-decoration-break

Sets the behavior of the background and border of an element at page-break, or, for in-line elements, at line-break.

पेज-ब्रेक पर, या लाइन-ब्रेक पर इन-लाइन एलीमेंट्स के लिए background और सीमा के behavior को सेट करता है।

box-shadow

Attaches one or more shadows to an element

एक तत्व में एक या अधिक छाया Attach करता है

box-sizing

Defines how the width and height of an element are calculated: should they include padding and borders, or not

परिभाषित करता है कि किसी तत्व की चौड़ाई और ऊंचाई कैसे गणना की जाती है: क्या उन्हें पैडिंग और सीमाएं शामिल करना चाहिए, या नहीं

break-after

Specifies the page-, column-, or region-break behavior after the generated box

उत्पन्न बॉक्स के बाद page-, column-, or region-break behavior निर्दिष्ट करता है

break-before

Specifies the page-, column-, or region-break behavior before the generated box

जेनरेट बॉक्स से पहले page-, column-, or region-break behavior निर्दिष्ट करता है

break-inside

Specifies the page-, column-, or region-break behavior inside the generated box

उत्पन्न बॉक्स के अंदर page-, column-, or region-break behavior निर्दिष्ट करता है

caption-side

Specifies the placement of a table caption

table caption की नियुक्ति निर्दिष्ट करता है

caret-color

Specifies the color of the cursor (caret) in inputs, textareas, or any element that is editable

इनपुट, textareas या किसी भी तत्व में कर्सर का रंग निर्दिष्ट करता है जो संपादन योग्य है

@charset

Specifies the character encoding used in the style sheet

style sheet में प्रयुक्त character encoding निर्दिष्ट करता है

clear

Specifies on which sides of an element floating elements are not allowed to float

निर्दिष्ट करता है कि किस तत्व के तत्वों को फ्लोट करने की अनुमति नहीं है

clip

Clips an absolutely positioned element

color

Sets the color of text

text का रंग सेट करता है

column-count

Specifies the number of columns an element should be divided into

columns की संख्या निर्दिष्ट करता है जिसमें एक तत्व को विभाजित किया जाना है

column-fill

Specifies how to fill columns, balanced or not

निर्दिष्ट करता है कि columns को कैसे भरें, संतुलित या नहीं

column-gap

Specifies the gap between the columns

कॉलम के बीच का अंतर निर्दिष्ट करता है

column-rule

A shorthand property for setting all the column-rule-* properties

सभी column-rule-* properties को सेट करने के लिए एक लघुकथ property

column-rule-color

Specifies the color of the rule between columns

कॉलम के बीच रंग का नियम निर्दिष्ट करता है

column-rule-style

Specifies the style of the rule between columns

कॉलम के बीच styles का नियम निर्दिष्ट करता है

column-rule-width

Specifies the width of the rule between columns

कॉलम के बीच चौड़ाई का नियम निर्दिष्ट करता है

column-span

Specifies how many columns an element should span across

column-width

Specifies the column width

कॉलम चौड़ाई निर्दिष्ट करता है

columns

A shorthand property for setting column-width and column-count

कॉलम-चौड़ाई और column-count निर्धारित करने के लिए एक लघुकथ property

content

Used with the :before and :after pseudo-elements, to insert generated content

counter-increment

Increases or decreases the value of one or more CSS counters

एक या अधिक CSS काउंटर के value में वृद्धि या घटना

counter-reset

Creates or resets one or more CSS counters

एक या एक से अधिक सीएसएस काउंटर बनाता है या रीसेट करता है

cursor

Specifies the mouse cursor to be displayed when pointing over an element

एक तत्व को इंगित करते समय माउस कर्सर प्रदर्शित करने के लिए निर्दिष्ट करता है

direction

Specifies the text direction/writing direction

text दिशा / लेखन दिशा निर्दिष्ट करता है

display

Specifies how a certain HTML element should be displayed

निर्दिष्ट करता है कि कैसे एक निश्चित HTML तत्व प्रदर्शित किया जाना चाहिए

empty-cells

Specifies whether or not to display borders and background on empty cells in a table

निर्दिष्ट करता है कि तालिका में रिक्त कक्षों पर borders और background को प्रदर्शित करना है या नहीं

filter

Defines effects (e.g. blurring or color shifting) on an element before the element is displayed

तत्व प्रदर्शित होने से पहले किसी तत्व पर प्रभाव (उदा0 धुंधला या रंग बदलना) को परिभाषित करता है

flex

Specifies the length of the item, relative to the rest

बाकी की तुलना में, आइटम की लंबाई निर्दिष्ट करता है

flex-basis

Specifies the initial length of a flexible item

एक लचीली आइटम की प्रारंभिक लंबाई निर्दिष्ट करता है

flex-direction

Specifies the direction of the flexible items

लचीली वस्तुओं की दिशा निर्दिष्ट करता है

flex-flow

A shorthand property for the flex-direction and the flex-wrap properties

फ्लेक्स दिशा और फ्लेक्स-रैप property के लिए एक लघुकथ property

flex-grow

Specifies how much the item will grow relative to the rest

निर्दिष्ट करता है कि आइटम बाकी के सापेक्ष कितने बढ़ेगा

flex-shrink

Specifies how the item will shrink relative to the rest

निर्दिष्ट करता है कि आइटम बाकी के सापेक्ष कैसे घट जाएंगे

flex-wrap

Specifies whether the flexible items should wrap or not

निर्दिष्ट करता है कि क्या लचीली वस्तुओं को लपेटा या नहीं

float

Specifies whether or not a box should float

निर्दिष्ट करता है कि बॉक्स को फ़्लोट करना चाहिए या नहीं

font

Sets all the font properties in one declaration

एक घोषणा में सभी फ़ॉन्ट properties सेट करता है

@font-face

A rule that allows websites to download and use fonts other than the "web-safe" fonts

एक नियम जो वेबसाइटों को "वेब-सुरक्षित" फोंट के अलावा अन्य फ़ॉन्ट्स डाउनलोड और उपयोग करने की अनुमति देता है

font-family

Specifies the font family for text

text के लिए font family निर्दिष्ट करता है

font-feature-settings

Allows control over advanced typographic features in OpenType fonts

ओपनटाइप फ़ॉन्ट्स में उन्नत टाइपोग्राफिक विशेषताओं पर नियंत्रण की अनुमति देता है

@font-feature-values

Allows authors to use a common name in font-variant-alternate for feature activated differently in OpenType

ओपनटाइप में अलग तरह से सक्रिय सुविधा के लिए लेखकों को font-variant-alternate में एक सामान्य नाम का उपयोग करने की अनुमति देता है

font-kerning

Controls the usage of the kerning information (how letters are spaced)

कर्निंग जानकारी के उपयोग को नियंत्रित करता है (अक्षरों को कैसे स्थान दिया जाता है)

font-language-override

Controls the usage of language-specific glyphs in a typeface

टाइपफेस में language-specific ग्लिफ़ का उपयोग नियंत्रित करता है

font-size

Specifies the font size of text

text का फ़ॉन्ट आकार निर्दिष्ट करता है

font-size-adjust

Preserves the readability of text when font fallback occurs

फॉन्ट फ़ॉलबैक होने पर text की पठनीयता को सुरक्षित रखता है

font-stretch

Selects a normal, condensed, or expanded face from a font family

फ़ॉन्ट family से एक normal, condensed, या expanded face का चयन करें

font-style

Specifies the font style for text

text के लिए फ़ॉन्ट style निर्दिष्ट करता है

font-synthesis

Controls which missing typefaces (bold or italic) may be synthesized by the browser

जो गुम टाइपफेस (बोल्ड या इटैलिक) ब्राउज़र द्वारा संश्लेषित किया जा सकता है उसे नियंत्रित करता है

font-variant

Specifies whether or not a text should be displayed in a small-caps font

निर्दिष्ट करता है कि text को small-caps font में प्रदर्शित किया जाना चाहिए या नहीं

font-variant-alternates

Controls the usage of alternate glyphs associated to alternative names defined in @font-feature-values

@ Font-feature-values में परिभाषित वैकल्पिक नामों से संबंधित वैकल्पिक ग्लिफ़ का उपयोग नियंत्रित करता है

font-variant-caps

Controls the usage of alternate glyphs for capital letters

capital letters के लिए वैकल्पिक ग्लिफ़ का उपयोग नियंत्रित करता है

font-variant-east-asian

Controls the usage of alternate glyphs for East Asian scripts (e.g Japanese and Chinese)

पूर्व एशियाई लिपियों के लिए वैकल्पिक ग्लिफ़ का उपयोग नियंत्रित करता है (उदाहरण जापानी और चीनी)

font-variant-ligatures

Controls which ligatures and contextual forms are used in textual content of the elements it applies to

नियंत्रित करता है कि कौन-सी लिगचर और प्रासंगिक रूपों का प्रयोग उन तत्वों की पाठ्य सामग्री में किया जाता है जो इसे लागू होता है

font-variant-numeric

Controls the usage of alternate glyphs for numbers, fractions, and ordinal markers

नंबर, अपूर्णांक और क्रमिक मार्करों के लिए वैकल्पिक ग्लिफ़ का उपयोग नियंत्रित करता है

font-variant-position

Controls the usage of alternate glyphs of smaller size positioned as superscript or subscript regarding the baseline of the font

फ़ॉन्ट के आधार रेखा के बारे में सुपरस्क्रिप्ट या सबस्क्रिप्ट के रूप में छोटे आकार के वैकल्पिक ग्लिफ़ का उपयोग नियंत्रित करता है

font-weight

Specifies the weight of a font

फ़ॉन्ट का weight निर्दिष्ट करता है

grid

A shorthand property

grid-area

Either specifies a name for the grid item, or this property is a shorthand property for the grid-row-startgrid-column-startgrid-row-end, and grid-column-end properties

या तो ग्रिड आइटम के लिए एक नाम निर्दिष्ट करता है, या यह ग्रिड the grid-row-startgrid-column-startgrid-row-end और grid-column-end properties

grid-auto-columns

Specifies a default column size

एक डिफ़ॉल्ट कॉलम आकार निर्दिष्ट करता है

grid-auto-flow

Specifies how auto-placed items are inserted in the grid

निर्दिष्ट करता है कि ग्रिड में auto-placed की गई आइटम कैसे डाली जाती हैं

grid-auto-rows

Specifies a default row size

एक डिफ़ॉल्ट पंक्ति आकार निर्दिष्ट करता है

grid-column

A shorthand property for the grid-column-start and the grid-column-end properties

grid-column-start और grid-column-end properties के लिए एक लघुकथ property

grid-column-end

Specifies where to end the grid item

निर्दिष्ट करता है कि ग्रिड आइटम को कहा समाप्त करना है

grid-column-gap

Specifies the size of the gap between columns

कॉलम के बीच के अंतराल के आकार को निर्दिष्ट करता है

grid-column-start

Specifies where to start the grid item

निर्दिष्ट करता है कि ग्रिड आइटम को कहाँ शुरू किया जाए

grid-gap

A shorthand property for the grid-row-gap and grid-column-gap properties

grid-row-gap और grid-column-gap properties के लिए एक लघुकथ property

grid-row

A shorthand property for the grid-row-start and the grid-row-end properties

grid-row-start और grid-row-end  properties के लिए एक लघुकथ property

grid-row-end

Specifies where to end the grid item

निर्दिष्ट करता है कि ग्रिड आइटम को कहा समाप्त करना है

grid-row-gap

Specifies the size of the gap between rows

पंक्तियों के बीच के अंतराल के आकार को निर्दिष्ट करता है

grid-row-start

Specifies where to start the grid item

निर्दिष्ट करता है कि ग्रिड आइटम को कहा शुरू करना है

grid-template

A shorthand property for the grid-template-rowsgrid-template-columns and grid-areas properties

grid-template-rowsgrid-template-columns  और grid-areas properties के लिए एक लघुकथ property

grid-template-areas

Specifies how to display columns and rows, using named grid items

ग्रिड आइटम का उपयोग करके columns और पंक्तियों को प्रदर्शित करने का तरीका निर्दिष्ट करता है

grid-template-columns

Specifies the size of the columns, and how many columns in a grid layout

कॉलम के आकार, और ग्रिड लेआउट में कितने कॉलम निर्दिष्ट करता है

grid-template-rows

Specifies the size of the rows in a grid layout

ग्रिड लेआउट में पंक्तियों के आकार को निर्दिष्ट करता है

hanging-punctuation

Specifies whether a punctuation character may be placed outside the line box

निर्दिष्ट करता है कि क्या लाइन चिह्न के बाहर एक विराम चिह्न रखा जा सकता है

height

Sets the height of an element

एक तत्व की ऊंचाई निर्धारित करता है

hyphens

Sets how to split words to improve the layout of paragraphs

अनुच्छेदों के लेआउट में सुधार करने के लिए शब्दों को विभाजित करने का तरीका सेट करता है

image-orientation

Specifies a rotation in the right or clockwise direction that a user agent applies to an image (This property is likely going to be deprecated and its functionality moved to HTML)

दाएं या दक्षिणावर्त दिशा में एक रोटेशन निर्दिष्ट करता है जो एक उपयोगकर्ता एजेंट एक छवि पर लागू होता है (यह संपत्ति को शायद नापसंद किया जा रहा है और इसकी कार्यक्षमता HTML पर ले जाई जाती है)

image-rendering

Gives a hint to the browser about what aspects of an image are most important to preserve when the image is scaled

एक छवि के पहलुओं को संरक्षित करने के लिए ज़रूरी है कि जब छवि को स्केल किया जाता है, तो ब्राउज़र को यह संकेत मिले

image-resolution

Specifies the intrinsic resolution of all raster images used in/on the element

तत्व पर / में प्रयुक्त सभी रेखापुंज छवियों के आंतरिक रिज़ॉल्यूशन निर्दिष्ट करता है

justify-content

Specifies the alignment between the items inside a flexible container when the items do not use all available space

जब आइटम सभी उपलब्ध स्थान का उपयोग नहीं करते हैं, तो एक लचीला कंटेनर के अंदर स्थित वस्तुओं के बीच संरेखण निर्दिष्ट करता है

@keyframes

Specifies the animation code

एनिमेशन कोड निर्दिष्ट करता है

left

Specifies the left position of a positioned element

एक तैनात तत्व की बाईं स्थिति निर्दिष्ट करता है

letter-spacing

Increases or decreases the space between characters in a text

text में वर्णों के बीच की जगह बढ़ जाती है या घट जाती है

line-break

Specifies how/if to break lines

बताता है कि कैसे लाइनों को तोड़े

line-height

Sets the line height

line height सेट करता है

list-style

Sets all the properties for a list in one declaration

एक घोषणा में सूची के लिए सभी properties सेट करता है

list-style-image

Specifies an image as the list-item marker

list-item मार्कर के रूप में एक छवि निर्दिष्ट करता है

list-style-position

Specifies if the list-item markers should appear inside or outside the content flow

निर्दिष्ट करता है कि क्या list-item मार्कर सामग्री प्रवाह के अंदर या बाहर दिखाई देना चाहिए

list-style-type

Specifies the type of list-item marker

list-item मार्कर का प्रकार निर्दिष्ट करता है

margin

Sets all the margin properties in one declaration

एक घोषणा में सभी मार्जिन प्रॉपर्टी सेट करता है

margin-bottom

Sets the bottom margin of an element

एक तत्व के नीचे की मार्जिन को सेट करता है

margin-left

Sets the left margin of an element

एक तत्व के बाएं की मार्जिन को सेट करता है

margin-right

Sets the right margin of an element

एक तत्व के दायें की मार्जिन को सेट करता है

margin-top

Sets the top margin of an element

एक तत्व के उप्पर की मार्जिन को सेट करता है

max-height

Sets the maximum height of an element

एक तत्व की अधिकतम ऊंचाई निर्धारित करता है

max-width

Sets the maximum width of an element

एक तत्व की अधिकतम चौड़ाई सेट करता है

@media

Sets the style rules for different media types/devices/sizes

विभिन्न मीडिया प्रकारों / उपकरणों / आकारों के लिए style नियम सेट करता है

min-height

Sets the minimum height of an element

एक तत्व की न्यूनतम ऊंचाई निर्धारित करता है

min-width

Sets the minimum width of an element

एक तत्व की न्यूनतम चौड़ाई सेट करता है

object-fit

Specifies how the contents of a replaced element should be fitted to the box established by its used height and width

निर्दिष्ट करता है कि प्रतिस्थापित तत्व की सामग्री इसकी उपयोग की गई ऊंचाई और चौड़ाई द्वारा निर्धारित बॉक्स में कैसे लगायी जानी चाहिए

object-position

Specifies the alignment of the replaced element inside its box

अपने बॉक्स के भीतर प्रतिस्थापित तत्व के संरेखण को निर्दिष्ट करता है

opacity

Sets the opacity level for an element

एक तत्व के लिए opacity  स्तर निर्धारित करता है

order

Sets the order of the flexible item, relative to the rest

बाकी के सापेक्ष, लचीली आइटम का क्रम निर्धारित करता है

orphans

Sets the minimum number of lines that must be left at the bottom of a page when a page break occurs inside an element

lines की न्यूनतम संख्या सेट करता है, जो किसी पृष्ठ के निचले भाग में छोड़े जाने चाहिए, जब किसी तत्व के अंदर एक पेज ब्रेक होता है

outline

Sets all the outline properties in one declaration

एक घोषणा में सभी outline properties सेट करता है

outline-color

Sets the color of an outline

एक outline का रंग सेट करता है

outline-offset

Offsets an outline, and draws it beyond the border edge

outline-style

Sets the style of an outline

एक outline की style निर्धारित करता है

outline-width

Sets the width of an outline

एक outline की चौड़ाई सेट करता है

overflow

Specifies what happens if content overflows an element's box

निर्दिष्ट करता है कि क्या होता है यदि सामग्री एक तत्व के बॉक्स से अधिक हो

overflow-wrap

Specifies whether or not the browser may break lines within words in order to prevent overflow (when a string is too long to fit its containing box)

यह निर्दिष्ट करता है कि ब्राउज़र ओवरफ्लो को रोकने के लिए शब्दों के भीतर लाइनों को तोड़ सकता है या नहीं (जब कोई स्ट्रिंग इसकी बॉक्स को फिट करने के लिए बहुत लंबा है)

overflow-x

Specifies whether or not to clip the left/right edges of the content, if it overflows the element's content area

निर्दिष्ट करता है कि सामग्री के बाएं / दाएं किनारों को क्लिप करे या नहीं, यदि यह तत्व की सामग्री क्षेत्र को ओवरफ्लो करता है

overflow-y

Specifies whether or not to clip the top/bottom edges of the content, if it overflows the element's content area

निर्दिष्ट करता है कि सामग्री के ऊपर / नीचे की किनारों को क्लिप करे या नहीं, अगर यह तत्व की सामग्री क्षेत्र को ओवरफ्लस करता है

padding

Sets all the padding properties in one declaration

एक घोषणा में सभी padding properties सेट करता है

padding-bottom

Sets the bottom padding of an element

एक तत्व के नीचे पैडिंग सेट करता है

padding-left

Sets the left padding of an element

एक तत्व के बाएं पैडिंग सेट करता है

padding-right

Sets the right padding of an element

एक तत्व के दाएं पैडिंग सेट करता है

padding-top

Sets the top padding of an element

एक तत्व के उप्पर पैडिंग सेट करता है

page-break-after

Sets the page-breaking behavior after an element

एक तत्व के बाद page-breaking behavior सेट करता है

page-break-before

Sets the page-breaking behavior before an element

एक तत्व से पहले page-breaking behavior सेट करता है

page-break-inside

Sets the page-breaking behavior inside an element

एक तत्व के अंदर page-breaking behavior सेट करता है

perspective

Specifies the perspective on how 3D elements are viewed

कैसे 3 डी तत्वों को देखा जाना है पर परिप्रेक्ष्य निर्दिष्ट करता है

perspective-origin

Specifies the bottom position of 3D elements

3D तत्वों के नीचे की स्थिति निर्दिष्ट करता है

position

Specifies the type of positioning method used for an element (static, relative, absolute or fixed)

किसी तत्व के लिए उपयोग की गई पोजीशनिंग विधि का प्रकार(static, relative, absolute or fixed) निर्दिष्ट करता है

quotes

Sets the type of quotation marks for embedded quotations

एम्बेडेड कोटेशन के लिए उद्धरण चिह्नों के प्रकार को सेट करता है

resize

Specifies whether or not an element is resizable by the user

निर्दिष्ट करता है कि उपयोगकर्ता द्वारा एक तत्व का आकार बदलने योग्य है या नहीं

right

Specifies the right position of a positioned element

एक निर्धारित तत्व की सही स्थिति निर्दिष्ट करता है

tab-size

Specifies the length of the tab-character

tab-character की लंबाई निर्दिष्ट करता है

table-layout

Sets the layout algorithm to be used for a table

तालिका के लिए उपयोग किए जाने वाले लेआउट एल्गोरिदम सेट करता है

text-align

Specifies the horizontal alignment of text

text की क्षैतिज संरेखण निर्दिष्ट करता है

text-align-last

Describes how the last line of a block or a line right before a forced line break is aligned when text-align is "justify"

text-combine-upright

Specifies the combination of multiple characters into the space of a single character

एकल वर्ण के स्थान में एकाधिक वर्णों के संयोजन को निर्दिष्ट करता है

text-decoration

Specifies the decoration added to text

text की decoration निर्दिष्ट करता है

text-decoration-color

Specifies the color of the text-decoration

text-decoration का रंग निर्दिष्ट करता है

text-decoration-line

Specifies the type of line in a text-decoration

text-decoration में लाइन के प्रकार को निर्दिष्ट करता है

text-decoration-style

Specifies the style of the line in a text decoration

text-decoration में लाइन के style को निर्दिष्ट करता है

text-indent

Specifies the indentation of the first line in a text-block

टेक्स्ट-ब्लॉक में पहली पंक्ति के इंडेंटेशन को निर्दिष्ट करता है

text-justify

Specifies the justification method used when text-align is "justify"

text-orientation

Defines the orientation of the text in a line

एक पंक्ति में text के अभिविन्यास को परिभाषित करता है

text-overflow

Specifies what should happen when text overflows the containing element

बताता है कि क्या होना चाहिए, जब शामिल तत्व में text overflows हो

text-shadow

Adds shadow to text

text में छाया जोड़ता है

text-transform

Controls the capitalization of text

टेक्स्ट के कैपिटलाइज़ेशन को नियंत्रित करता है

text-underline-position

Specifies the position of the underline which is set using the text-decoration property

underline की स्थिति निर्दिष्ट करता है जो text-decoration property का उपयोग करके सेट किया गया है

top

Specifies the top position of a positioned element

एक तैनात तत्व की शीर्ष स्थिति निर्दिष्ट करता है

transform

Applies a 2D or 3D transformation to an element

एक तत्व में 2 डी या 3 डी परिवर्तन लागू करता है

transform-origin

Allows you to change the position on transformed elements

आपको परिवर्तनित तत्वों की स्थिति बदलने की अनुमति देता है

transform-style

Specifies how nested elements are rendered in 3D space

निर्दिष्ट करता है कि नेस्टेड तत्व 3 डी स्थान में कैसे प्रदान किए जाते हैं

transition

A shorthand property for setting the four transition properties

four transition properties को स्थापित करने के लिए एक लघुकोड property

transition-delay

Specifies when the transition effect will start

निर्दिष्ट करता है कि transition प्रभाव कब शुरू होगा

transition-duration

Specifies how many seconds or milliseconds a transition effect takes to complete

निर्दिष्ट करता है कि कितने सेकंड या मिलीसेकंड एक transition प्रभाव को पूरा करने के लिए ले जाता है

transition-property

Specifies the name of the CSS property the transition effect is for

CSS property का नाम निर्दिष्ट करता है जिसके लिए transition effect होता है

transition-timing-function

Specifies the speed curve of the transition effect

transition effect की गति वक्र निर्दिष्ट करता है

unicode-bidi

Used together with the direction property to set or return whether the text should be overridden to support multiple languages in the same document

एक ही दस्तावेज़ में एकाधिक भाषाओं का समर्थन करने के लिए पाठ को ओवरराइड किया जाना चाहिए या सेट करने के लिए direction property के साथ उपयोग किया जाता है

user-select

Specifies whether the text of an element can be selected

निर्दिष्ट करता है कि क्या किसी तत्व का टेक्स्ट चुना जा सकता है

vertical-align

Sets the vertical alignment of an element

एक तत्व की ऊर्ध्वाधर संरेखण सेट करता है

visibility

Specifies whether or not an element is visible

निर्दिष्ट करता है कि कोई तत्व दृश्यमान है या नहीं

white-space

Specifies how white-space inside an element is handled

निर्दिष्ट करता है कि एक तत्व के अंदर सफेद स्थान कैसे नियंत्रित किया जाता है

widows

Sets the minimum number of lines that must be left at the top of a page when a page break occurs inside an element

lines की न्यूनतम संख्या सेट करता है जो एक पृष्ठ के शीर्ष पर छोड़ दिया जाना चाहिए, जब किसी तत्व के अंदर एक पेज ब्रेक होता है

width

Sets the width of an element

एक तत्व की चौड़ाई सेट करता है

word-break

Specifies line breaking rules for non-CJK scripts

गैर-सीजेके लिपियों के लिए लाइन ब्रेकिंग नियम निर्दिष्ट करता है

word-spacing

Increases or decreases the space between words in a text

टेक्स्ट में शब्दों के बीच की जगह बढ़ जाती है या घट जाती है

word-wrap

Allows long, unbreakable words to be broken and wrap to the next line

लंबे, अटूट शब्दों को टूटा और अगली पंक्ति में करे

writing-mode

z-index

Sets the stack order of a positioned element

एक तैनात तत्व के stack order सेट करता है

 

Comments


ravi ( Date :12 Feb,2018) :
Good Tutorial kyuki ye hindi or english dono me h