web

CSS Implementation, CSS Selectors

by
with no comment
Contents hide
1 Introduction of CSS
1.1 Inline CSS
1.2 Internal CSS
1.3 External CSS
2 CSS Selectors
2.1 ID Selectors
2.2 Class Selectors
2.3 Grouping Selectors
2.4 Universal Selectors
3 Title
3.1 CSS Pseudo-classes

Introduction of CSS

CSS (Cascading Style Sheets) Web Developement का एक Fundamental Component है, जो Document Content को Document Presentation से अलग करने की Permission देता है। यह देखने में आकर्षक और Web Page को Responsive करने में महत्वपूर्ण Role निभाता है। किसी Web Page के भीतर CSS को Apply करने के तीन मुख्य तरीके हैं- Inline, Internal और External। प्रत्येक Method के अपने विशिष्ट use के Cases और Benifit हैं।

Inline CSS

Inline CSS में Style Attribute का use करके Style को सीधे HTML Element पर Apply करना शामिल है। हालांकि यह अलग-अलग Element पर Styles को Apply करने का एक Quick Way Provide करता है, लेकिन Maintainability और Scalability में इसकी Limitations के कारण Large-Scale पर use के लिए इसकी Recommended नहीं की जाती है।

Example:



<!DOCTYPE html>

<html>

<head>

<title>Inline CSS Example</title>

</head>

<body>

<h1 style=”color: blue; text-align: center;”>Welcome to Our Website</h1>

<p style=”font-size: 16px; line-height: 1.6;”>This is an example of inline CSS.</p>

</body>

</html>

Output:

Internal CSS

Internal CSS को HTML Document के <head> Section में <style> Tag के भीतर Define किया गया है। यह एक ही Document में Multiple Element की Styling की Permission देता है। हालाँकि यह Inline CSS की तुलना में Maintainability में सुधार करता है, फिर भी Multiple Web Page पर Reusability के मामले में इसकी Limitations हैं।

Example:



<!DOCTYPE html>

<html>

<head>

<title>Internal CSS Example</title>

<style>

h1 {

color: blue;

text-align: center;

}

p {

font-size: 16px;

line-height: 1.6;

}

</style>

</head>

<body>

<h1>Welcome to Our Website</h1>

<p>This is an example of internal CSS.</p>

</body>

</html>

Output:

External CSS

External CSS में एक अलग CSS File बनाना और <head> Section में <link> Tag का use करके इसे HTML Document से Link करना शामिल है। यह Method Style के Centralization को सक्षम बनाती है, जिससे Multiple Web Page पर Consistent Design लागू करना आसान हो जाता है। Complex Website के लिए बड़े पैमाने पर CSS के Manage करने के लिए यह सबसे Recommended Approach है।

Example:

HTML file (index.html)



<!DOCTYPE html>

<html>

<head>

<title>External CSS Example</title>

<link rel=”stylesheet” type=”text/css” href=”styles.css”>

</head>

<body>

<h1>Welcome to Our Website</h1>

<p>This is an example of external CSS.</p>

</body>

</html>

CSS file (styles.css)



h1 {

color: blue;

text-align: center;

}

p {

font-size: 16px;

line-height: 1.6;

}

Output:

CSS Selectors

CSS (Cascading Style Sheet) Web Technology का एक महत्वपूर्ण Component है, जो Web Developer को Web Page के Presentation और Layput को Define करने की Allow देता है। CSS Selectors विशिष्ट HTML Element को Target करने और उन पर Style को लागू करते हैं|

ID Selectors

ID Selectors किसी विशिष्ट HTML Element को उसकी Unique id Attribute के Base पर Target करते हैं। ID Selector को Element के Id Value के बाद # Symbol द्वारा किया जाता है। यह HTML Document में Unique होना चाहिए|

Example:

CSS file (styles.css)



#header {

background-color: #336699;

color: #fff;

}

HTML file (index.html)



<!DOCTYPE html>

<html>

<head>

<title> CSS Selectors </title>

<link rel=”stylesheet” type=”text/css” href=”style.css”>

</head>

<body>

<div id=”header”>This is the header</div>


</body>

</html>

Output:

Class Selectors

Class Selectors, एक ही Class Attribute के साथ Multiple HTML Element को Style करने की Permission देते हैं। इन्हें (.) से Denote किया जाता है। इसके बाद Class का नाम आता है।

Example:

CSS file (styles.css)



.button {

background-color: #4CAF50;

color: #fff;

padding: 10px 20px;

}

HTML file (index.html)



<button class=”button”>Click me</button>

<button class=”button”>Submit</button>

Output:

Grouping Selectors

Grouping Selectors, Multiple Selectors को Comma से अलग करके Same Style को लागू करने की Permission देते हैं।

Example:

CSS file (styles.css)



h1, h2, h3 {

font-family: Arial, sans-serif;

color: #333;

}

HTML file (index.html)



<h1>Heading 1</h1>

<h2>Heading 2</h2>

<h3>Heading 3</h3>

Output:

Universal Selectors

Universal Selector (*) एक Page पर सभी HTML Element को Target करता है। Global Styles को Set करने के लिए इसका उपयोग अक्सर अन्य Selector के साथ Conjunction में किया जाता है।

Example:

CSS file (styles.css)

Title



* {

margin: 0;

padding: 0;

}

CSS Pseudo-classes

CSS Pseudo-classes का use किसी Element की विशेष स्थिति (Special State) को Define करने के लिए किया जाता है| जैसे कि जब Element को Hover किया जा रहा हो, या यह अपने Parent का पहला Child हो| Pseudo-classe एक (:) से पहले का Part होता हैं।

Example:

CSS file (styles.css)



a:hover {

text-decoration: underline;

color: #FF5733;

}

HTML file (index.html)



<a href=”https://example.com”>Hover over me</a>
Post Views: 528
Tags: No tags

Add a Comment

Your email address will not be published. Required fields are marked *