CSS Properties

CSS Properties

CSS Properties, Web Developers के लिए आवश्यक Tools हैं| जो उन्हें Web Page के Presentation और Layout को Control करने की Permnission देते हैं।

1. background-color Property

Background-color Property का use HTML Element के Background Color को Define करने के लिए किया जाता है। यह किसी Element के Background के Color को Style करने का एक Straightforward Way Provide करता है।

Example:

CSS

/* Setting the background color of a div */

div {

background-color: #3498db; /* Using a hex color code */

}

HTML

<div>This is a div with a blue background.</div>

Output:

2. background-image Property

Background-image Property Developers को किसी Element के Background में Image Add करने की Permission देती है। यह Visually रूप से आकर्षक Background या Pattern बनाने के लिए use होता है।

Example:

CSS

/* Adding a background image to a section */

section {

background-image: url(‘background-image.jpg’); /* Specify the image path */

background-repeat: no-repeat; /* Prevent image repetition */

background-size: cover; /* Scale the image to cover the element */

}

HTML

<section>This section has a background image.</section>

Output:

3. border-style property

border-style Property का use किसी Element के Border के Style को Specify करने के लिए किया जाता है। विभिन्न Border Effect को Apply करने के लिए इसे border-width और border-color जैसे अन्य Border-Related Propertie के साथ जोड़ा जा सकता है।

Example:

CSS

/* Creating a dashed border for a button */

button {

border-style: dashed;

border-color: #e74c3c; /* Specify border color */

border-width: 2px; /* Set border width */

}

HTML

<button>This button has a dashed border.</button>

Output:

4. Height and Width Property

Height और Width Property HTML Element के Dimensions को Control करते हैं| जिससे Developers को Pixel या अन्य Relevant Units में इसकी Height और Width Specify करने की Permission मिलती है।

Example

CSS

/* Setting the height and width of a div */

div {

height: 200px;

width: 300px;

}

HTML

<div>This is a div with a specified height and width.</div>

Output:

5. color and text-align Properties

Color Property, Text का Color Define करता है| जबकि Text-align Property का Use किसी Element के भीतर Text को Align करने के लिए किया जाता है।

Example:

CSS

/* Applying color and text alignment to a paragraph */

p {

color: #333; /* Setting the text color */

text-align: center; /* Aligning the text to the center */

}

HTML

<p>This is a paragraph with centered text and a specific text color.</p>

Output:

6. font-family, font-style, font-size, and font-weight Properties

Font-Family Property, Text के लिए उपयोग किए जाने वाले Font को Define करती है| Font-Style Define करती है, कि Text Italic या Oblique होना चाहिए| Font-size Text का Size निर्धारित करता है, और Font-Weight Font की Thickness निर्धारित करता है।

Example:

CSS

/* Styling a heading with specific font properties */

h1 {

font-family: ‘Arial’, sans-serif; /* Setting the font family */

font-style: italic; /* Making the font italic */

font-size: 24px; /* Setting the font size */

font-weight: bold; /* Making the font bold */

}

HTML

<h1>This is a heading styled with specific font properties.</h1>

Output:

7. Box Model in CSS (Margin, Border, Padding)

Web Development में CSS Box Model एक Fundamental Concept है, जो Web Pages के Layout और Design को Define करती है। इसमें तीन आवश्यक Component शामिल हैं- Margin, Border और Padding ।

7.1. Margin

Margin HTML Element के चारों ओर का स्थान है, जो इसे अन्य Element से अलग करता है। यह किसी Element के लिए एक Outer Boundary बनाता है, जो Adjacent Elements के संबंध में उसके स्थान को प्रभावित करता है।

Example:

CSS

/* Applying margin to a div */

div {

margin: 20px; /* Setting a 20-pixel margin on all sides */

}

HTML

<div>This div has a margin of 20 pixels on all sides.</div>

Output:

7.2. Border

Border, HTML Element के Outer Edge को Define करता है। Element को एक विशिष्ट रूप देने के लिए इसमें विभिन्न Styles, Color और Thicknesses हो सकती हैं।

Example:

CSS

/* Adding a border to an image */

img {

border: 2px solid #333; /* Creating a 2-pixel solid border with a dark gray color */

}

HTML

<img src=”image.jpg” alt=”An image with a border”>

Output:

7.3. Padding

Padding किसी Element के Content और उसकी Border के बीच का स्थान है। यह आपको Content और Elemnet के Border के बीच की दूरी को Control करने की Permission देता है।

Example:

CSS

/* Setting padding for a paragraph */

p {

padding: 10px; /* Applying 10 pixels of padding to all sides */

}

HTML

<p>This paragraph has padding of 10 pixels on all sides.</p>

Output: