HTML CSS
The HTML Style Attribute
Setting the style of an HTML element can be done with the style attribute.
HTML element की style को style attribute की मदद से set किया जा सकता है।
The HTML style attribute has the following syntax:
HTML style attribute का syntax इस प्रकार होता है:
<tagname style="property:value;">
The property is a CSS property. The value is a CSS value.
property एक CSS property होती है और value एक CSS value होती है।
Background Color
The CSS background-color property defines the background color for an HTML element.
CSS background-color property HTML element का background color define करती है।
This example sets the background color for a page to powderblue:
यह example page का background color powderblue set करता है:
Example
<body style="background-color:powderblue;"> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body>
Text Color
The CSS color property defines the text color for an HTML element:
CSS color property HTML element के text का color define करती है:
Example
<h1 style="color:blue;">This is a heading</h1> <p style="color:red;">This is a paragraph.</p>
Fonts
The CSS font-family property defines the font to be used for an HTML element:
CSS font-family property HTML element के लिए font को define करती है:
Example
<h1 style="font-family:verdana;">This is a heading</h1> <p style="font-family:courier;">This is a paragraph.</p>
Example
<!DOCTYPE html> <html> <body style="background-color: powderblue;"> <p>I am normal</p> <p style="color: red;">I am red</p> <p style="text-align:center;">Centered paragraph.</p> <p style="font-size: 40px;">I am big</p> <p style="font-family:courier;">This is a paragraph.</p> <p style="font-size:160%;">This is a paragraph.</p> </body> </html>
This example shows different styles like background color, text color, alignment, font size, and font family.
यह example background color, text color, alignment, font size और font family जैसे अलग-अलग styles को दिखाता है।
Output
I am normal
I am red
Centered paragraph.
I am big
This is a paragraph.
This is a paragraph.
Text Size
The CSS font-size property defines the text size for an HTML element:
CSS font-size property HTML element के text का size define करती है:
Example
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
CSS text-align property HTML element के text की horizontal alignment define करती है:
Example
<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:left;">left paragraph.</p>
Text Size
The CSS font-size property defines the text size for an HTML element:
CSS font-size property HTML element के text का size define करती है:
Example
<h1 style="font-size:300%;">This is a heading</h1> <p style="font-size:160%;">This is a paragraph.</p>
Text size can be changed using percentage, pixels, or other CSS units.
Text का size percentage, pixels या अन्य CSS units का उपयोग करके बदला जा सकता है।
Text Alignment
The CSS text-align property defines the horizontal text alignment for an HTML element:
CSS text-align property HTML element के text की horizontal alignment define करती है:
Example
<h1 style="text-align:center;">Centered Heading</h1> <p style="text-align:left;">left paragraph.</p>
Text alignment can be set to left, right, center, or justify.
Text alignment को left, right, center या justify में set किया जा सकता है।
WWF's goal is to: Build a future where people live in harmony with nature.
WWF's goal is to: <q>Build a future where people live in harmony with nature.</q>
WWF का लक्ष्य है: <q>एक ऐसा भविष्य बनाना जहां लोग प्रकृति के साथ सामंजस्य में रहें।</q>
HTML <blockquote> for Quotations
The HTML <blockquote> element defines a section that is quoted from another source.
HTML <blockquote> element किसी अन्य source से लिए गए quotation को define करता है।
Browsers usually indent <blockquote> elements.
Browser आमतौर पर <blockquote> element को indent (अंदर की ओर) दिखाते हैं।
Example
<p>Here is a quote from WWF's website:</p> <blockquote> For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. </blockquote>
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
HTML <abbr> for Abbreviations
The HTML <abbr> element defines an abbreviation or an acronym.
HTML <abbr> element abbreviation या acronym को define करता है।
Marking abbreviations can give useful information to browsers, translation systems and search-engines.
Abbreviation को mark करने से browsers, translation systems और search engines को उपयोगी जानकारी मिलती है।
Example
<p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>
The WHO was founded in 1948.
HTML <address> for Contact Information
The HTML <address> element defines contact information (author/owner) of a document or an article.
HTML <address> element document या article के author/owner की contact information को define करता है।
The <address> element is usually displayed in italic. Most browsers will add a line break before and after the element.
<address> element आमतौर पर italic में दिखता है और अधिकांश browsers इसके पहले और बाद में line break जोड़ते हैं।
Visit us at:
Example.com
Box 564, Disneyland
USA
<address> element author/owner की contact information को दिखाता है।
HTML <cite> for Work Title
The HTML <cite> element defines the title of a work. Browsers usually display <cite> elements in italic.
HTML <cite> element किसी work के title को define करता है। Browser इसे आमतौर पर italic में दिखाते हैं।
Example
<p><cite>The Scream</cite> by Edvard Munch. Painted in 1893.</p>
The Scream by Edvard Munch. Painted in 1893.
HTML <bdo> for Bi-Directional Override
The HTML <bdo> element defines bi-directional override.
HTML <bdo> element text direction को override करने के लिए उपयोग किया जाता है।
The <bdo> element is used to override the current text direction:
<bdo> element current text direction को बदलने के लिए use होता है।
Example
<bdo dir="rtl">This text will be written from right to left</bdo>
This text will be written from right to left
HTML Colors
HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values.
HTML colors को predefined color names या RGB, HEX, HSL, RGBA, HSLA values की मदद से define किया जाता है।
Color Names
In HTML, a color can be specified by using a color name:
HTML में color को color name का उपयोग करके define किया जा सकता है:
Background Color
You can set the background color for HTML elements:
आप HTML elements के लिए background color set कर सकते हैं:
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="background-color:DodgerBlue;">Hello World</h1> <p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
You can set the color of text:
आप text का color set कर सकते हैं:
Hello World
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Example
<h1 style="color:Tomato;">Hello World</h1> <p style="color:DodgerBlue;">Lorem ipsum...</p> <p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
You can set the color of borders:
आप border का color set कर सकते हैं:
Hello World
Hello World
Hello World
Example
<h1 style="border:2px solid Tomato;">Hello World</h1> <h1 style="border:2px solid DodgerBlue;">Hello World</h1> <h1 style="border:2px solid Violet;">Hello World</h1>
Color Values
In HTML, colors can also be specified using RGB values, HEX values, HSL values, RGBA values, and HSLA values:
HTML में colors को RGB, HEX, HSL, RGBA और HSLA values से भी define किया जा सकता है:
Same as color name "Tomato":
यह "Tomato" color के समान है:
Same as color name "Tomato", but 50% transparent:
यह "Tomato" color जैसा ही है, लेकिन 50% transparent है:
Example
<h1 style="background-color:rgb(255,99,71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255,99,71,0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
HTML में color को RGB value के रूप में इस formula से define किया जा सकता है:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
हर parameter (red, green, blue) color की intensity को 0 से 255 के बीच define करता है।
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
उदाहरण के लिए, rgb(255, 0, 0) red दिखता है क्योंकि red की value 255 (max) होती है और बाकी 0 होती हैं।
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
Black दिखाने के लिए सभी values 0 रखें: rgb(0, 0, 0)।
To display white, set all color parameters to 255, like this: rgb(255, 255, 255). Experiment by mixing the RGB values below:
White दिखाने के लिए सभी values 255 रखें: rgb(255, 255, 255)। नीचे दिए गए RGB values को mix करके देख सकते हैं:
Same as color name "Tomato", but 50% transparent:
यह "Tomato" color जैसा ही है, लेकिन 50% transparent है:
Example
<h1 style="background-color:rgb(255,99,71);">...</h1> <h1 style="background-color:#ff6347;">...</h1> <h1 style="background-color:hsl(9, 100%, 64%);">...</h1> <h1 style="background-color:rgba(255,99,71,0.5);">...</h1> <h1 style="background-color:hsla(9, 100%, 64%, 0.5);">...</h1>
RGB Value
In HTML, a color can be specified as an RGB value, using this formula:
HTML में color को RGB value के रूप में इस formula से define किया जा सकता है:
rgb(red, green, blue)
Each parameter (red, green, and blue) defines the intensity of the color between 0 and 255.
हर parameter (red, green, blue) color की intensity को 0 से 255 के बीच define करता है।
For example, rgb(255, 0, 0) is displayed as red, because red is set to its highest value (255) and the others are set to 0.
उदाहरण के लिए, rgb(255, 0, 0) red दिखता है क्योंकि red की value 255 होती है और बाकी 0 होते हैं।
To display black, set all color parameters to 0, like this: rgb(0, 0, 0).
Black दिखाने के लिए सभी values 0 करें: rgb(0, 0, 0)।
To display white, set all color parameters to 255, like this: rgb(255, 255, 255).
White दिखाने के लिए सभी values 255 करें: rgb(255, 255, 255)।
Example
Shades of gray are often defined using equal values for all the 3 light sources.
Gray color आमतौर पर तीनों values (red, green, blue) को बराबर रखकर बनाया जाता है।
Comments