Universal Selector
Universal Selector అంటే ఏమిటి?
CSS లో Universal Selector అన్ని HTML elements ను select చేయడానికి ఉపయోగించబడుతుంది. దీనిని asterisk symbol (*) తో రాస్తారు.
* {
property: value;
}* selector page లో ఉన్న ప్రతి element కు style apply చేస్తుంది. ఉదాహరణకు, heading, paragraph, list మరియు button అన్నింటికీ ఒకే style ఇవ్వాలంటే Universal Selector ఉపయోగించవచ్చు.
ఇది ఎందుకు ఉపయోగిస్తారు?
- అన్ని elements కు ఒకే common style ఇవ్వడానికి.
- Browser ఇచ్చే default margin మరియు padding ను తొలగించడానికి.
- Page మొత్తం ఒకే font ను ఉపయోగించేలా చేయడానికి.
- CSS page ను consistent గా ప్రారంభించడానికి.
ఇది ఎలా పనిచేస్తుంది?
Browser CSS లో * selector ను చూసినప్పుడు, ఆ page లోని ప్రతి HTML element ను select చేసి declarations ను apply చేస్తుంది. Universal Selector చాలా సాధారణమైన selector కాబట్టి, ప్రత్యేకమైన selector ఇచ్చినప్పుడు ఆ ప్రత్యేక rule సాధారణంగా దానికంటే ఎక్కువ ప్రాధాన్యం పొందుతుంది.
Universal Selector ను జాగ్రత్తగా ఉపయోగించాలి. ఎందుకంటే ఇది ఒక element ను మాత్రమే కాకుండా page లోని ప్రతి element ను ప్రభావితం చేస్తుంది.
Simple Explanation
* అంటే CSS లో “అన్నీ” అని అర్థం. కాబట్టి * { margin: 0; padding: 0; } అని రాస్తే, page లోని అన్ని HTML elements యొక్క default margin మరియు padding zero అవుతాయి.
ఒక element కు మాత్రమే style ఇవ్వాలంటే type selector, class selector లేదా ID selector ఉపయోగిస్తాం. కానీ అన్ని elements కు common style ఇవ్వాలంటే Universal Selector ఉపయోగిస్తాం.
Real-Life Example
ఒక కొత్త notebook లో ప్రతి page మీద ఉన్న పాత markings ను ముందుగా తొలగించి clean pages తో ప్రారంభించినట్లు ఊహించండి. CSS లో Universal Selector ను ఉపయోగించి అన్ని elements యొక్క browser default margin మరియు padding ను తొలగించడం కూడా అలాంటిదే. ఆ తర్వాత అవసరమైన elements కు మనకు కావాల్సిన spacing ను ప్రత్యేకంగా ఇవ్వవచ్చు.
Code Examples
Universal Selector తో Default Spacing తొలగించడం
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Universal Selector</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #eef4ff;
padding: 24px;
font-family: Arial, sans-serif;
}
.card {
background-color: white;
border: 1px solid #b8c7e6;
padding: 18px;
}
h1 {
color: #163b73;
}
p {
margin-top: 10px;
color: #333333;
}
ul {
margin-top: 12px;
padding-left: 24px;
}
</style>
</head>
<body>
<section class="card">
<h1>Universal Selector</h1>
<p>The universal selector can style every HTML element.</p>
<ul>
<li>Heading</li>
<li>Paragraph</li>
<li>List item</li>
</ul>
</section>
</body>
</html>ఈ example లో * Universal Selector page లోని అన్ని elements కు margin: 0 మరియు padding: 0 apply చేస్తుంది. అందువల్ల browser ఇచ్చే default spacing తొలగిపోతుంది. తరువాత body, .card, p మరియు ul కు అవసరమైన spacing ను ప్రత్యేకంగా ఇచ్చాము.
Browser లో light blue background పై ఒక white card కనిపిస్తుంది. Card లో heading, paragraph మరియు list ఉంటాయి. Universal Selector కారణంగా elements యొక్క default spacing తొలగిపోయి, CSS లో ఇచ్చిన spacing మాత్రమే కనిపిస్తుంది.
Line-by-Line Explanation
ఇది Universal Selector ప్రారంభం. Page లోని అన్ని HTML elements ను select చేస్తుంది.
అన్ని elements యొక్క outer default margin ను zero చేస్తుంది. దీని వల్ల browser స్వయంగా ఇచ్చే బయట spacing తొలగుతుంది.
అన్ని elements యొక్క inner default padding ను zero చేస్తుంది. Content మరియు border మధ్య default లోపలి spacing ఉండదు.
Universal Selector rule ఇక్కడ ముగుస్తుంది.
ఇది card content ను కలిగి ఉన్న HTML section. Universal Selector ఈ section element ను కూడా select చేస్తుంది.
Universal Selector
ఇది page heading. Universal Selector వల్ల h1 యొక్క default margin తొలగుతుంది. తరువాత h1 selector దాని text color ను set చేస్తుంది.
The universal selector can style every HTML element.
ఇది paragraph. Universal Selector వల్ల paragraph యొక్క default margin తొలగుతుంది. తరువాత p rule ద్వారా పైభాగంలో 10px margin ఇవ్వబడుతుంది.
ఇది unordered list. Universal Selector వల్ల list యొక్క default padding తొలగుతుంది. తరువాత ul rule ద్వారా list markers కోసం ఎడమ padding ఇవ్వబడుతుంది.
ఇది list item. Universal Selector ఈ li element కు కూడా margin మరియు padding reset ను apply చేస్తుంది.
Unordered list ఇక్కడ ముగుస్తుంది.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Universal Selector</title>
<style>
* {
font-family: Arial, sans-serif;
}
body {
background-color: #f4f8ff;
padding: 20px;
}
h1 {
color: #174a8b;
}
p {
color: #333333;
}
</style>
</head>
<body>
<h1>My Web Page</h1>
<p>This text uses the font from the universal selector.</p>
<button>Read More</button>
</body>
</html>Practice
Practice: పై starter code లో Universal Selector ను ఉపయోగించి page లోని అన్ని elements యొక్క default margin మరియు padding ను తొలగించండి. తరువాత h1 మరియు p మధ్య కనిపించడానికి సరైన spacing ను ప్రత్యేకంగా ఇవ్వండి.
Hint: * { margin: 0; padding: 0; } rule ను ఉపయోగించండి. అవసరమైన spacing కోసం h1 లేదా p selector లో margin property ఇవ్వవచ్చు.
Common Mistakes
* బదులుగా all లేదా every అని రాయడం.Universal Selector యొక్క సరైన symbol
*. ఉదాహరణ: * { margin: 0; }.
Selector తరువాత curly braces తప్పనిసరిగా ఉండాలి. సరైన syntax:
* { padding: 0; }.
Reset తరువాత h1, p లేదా ul వంటి elements కు ప్రత్యేక selector ద్వారా అవసరమైన margin లేదా padding ఇవ్వండి.
Universal Selector page లోని ప్రతి HTML element ను select చేస్తుంది. ఒక్క element కోసం tag, class లేదా ID selector ఉపయోగించాలి.
Interview Questions
CSS లో Universal Selector అంటే ఏమిటి?
Answer: Universal Selector అన్ని HTML elements ను select చేసే selector. దీనిని asterisk symbol * తో రాస్తారు.
Universal Selector యొక్క syntax ఏమిటి?
Answer: దాని సాధారణ syntax * { property: value; }. Braces లో ఉన్న declarations అన్ని elements కు apply అవుతాయి.
Universal Selector ను సాధారణంగా ఎందుకు ఉపయోగిస్తారు?
Answer: అన్ని elements కు common styles ఇవ్వడానికి లేదా browser default margin మరియు padding ను reset చేయడానికి ఉపయోగిస్తారు.
Universal Selector page లోని ఏ elements ను select చేస్తుంది?
Answer: ఆ page లో ఉన్న అన్ని HTML elements ను select చేస్తుంది, ఉదాహరణకు body, h1, p, ul మరియు button.
Exam Questions
క్రింది CSS rule ఏమి చేస్తుంది? * { margin: 0; }
Answer:
ఇది page లోని అన్ని HTML elements యొక్క margin ను zero చేస్తుంది.
Universal Selector ను గుర్తించడానికి ఉపయోగించే symbol ఏది?
Answer:
Asterisk symbol (*) Universal Selector ను సూచిస్తుంది.
అన్ని HTML elements కు Arial font apply చేయడానికి CSS rule రాయండి.
Answer:
* { font-family: Arial, sans-serif; }
Universal Selector మరియు ID Selector మధ్య ప్రధాన తేడా ఏమిటి?
Answer:
Universal Selector అన్ని elements ను select చేస్తుంది. ID Selector ఒక ప్రత్యేకమైన id ఉన్న element ను select చేస్తుంది.
Quick Revision
- * CSS లో Universal Selector.
- ఇది page లోని అన్ని HTML elements ను select చేస్తుంది.
- Common styles, font settings మరియు default spacing reset కోసం ఉపయోగించవచ్చు.
* { margin: 0; padding: 0; }అన్ని elements యొక్క default margin మరియు padding ను తొలగిస్తుంది.- Universal Selector ను జాగ్రత్తగా ఉపయోగించాలి, ఎందుకంటే ఇది ప్రతి element ను ప్రభావితం చేస్తుంది.