<< Previous Next >>

CSS Selectors

HTML పేజ్ లో గల మూలకాలను (elements) వాటి రకాలు ,లక్షణాలు ,id మరియు class లేదా విలువలను బట్టి కావలసిన మూలకాన్ని టార్గెట్ చెయ్యటానికి selectors అనేవి ఉపయోగపడతాయి.

The element Selector

element selector అనేది element యొక్క పేరు ఆధారంగా ఆ element ను ఎంపిక చేసుకుంటుంది. క్రింది ఉదాహరణలో వెబ్ పేజ్ లో గల అన్ని "p" element లను center లో మరియు ఎరుపు రంగులో డిస్ప్లే చేశాము.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p { text-align: center;
color: red;}
</style>
</head>
<body>
<p>This is your first paragraph</p>
<p>This is your second paragraph</p>
</body>
</html>
Output

This is your first paragraph

This is your second paragraph

The id Selector

క్రింది ఉదాహరణలో element "p" ని selector గా వాడి అన్ని పారగ్రాఫ్ లను center లో align చెయ్యడం జరిగింది. తరువాత రెండవ పారగ్రాఫ్ ని ఎరుపు రంగులో డిస్ప్లే చెయ్యడానికి id విలువ "two" అనే selector మరియు మూడవ పారగ్రాఫ్ ని ఆరెంజ్ కలర్ లో డిస్ప్లే చెయ్యడానికి id విలువ "three" అనివ్రాసి దాన్ని selector గా ఉపయోగించడం జరిగింది. id విలువ ఏదైనా వ్రాయవచ్చు కాని మొదటి అక్షరం మాత్రం నెంబర్ కాకూడదు.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {text-align : center;}
# two {color : red;}
# three {color : orange;}
</style>
</head>
<body>
<p>This is first paragraph</p>
<p id="two">This is second pragraph</p>
<p id="three">This is third paragraph</p>
</body>
</html>
Output

This is first paragraph

This is second pragraph

This is third paragraph

The class Selector

declaration లో మాత్రం id selector కు బదులు class ను వాడినప్పుడు "#" కు బదులుగా "." ను రాయాల్సి ఉంటుంది. పై ఉదాహరణను class selector ద్వారా వివరించడం జరిగింది. class విలువ ఏదైనా వ్రాయవచ్చు కాని మొదటి అక్షరం మాత్రం నెంబర్ కాకూడదు.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p {text-align : center;}
. two {color : red;}
. three {color : orange;}
</style>
</head>
<body>
<p>This is first paragraph</p>
<p class="two">This is second pragraph</p>
<p class="three">This is third paragraph</p>
</body>
</html>
Output

This is first paragraph

This is second pragraph

This is third paragraph

.
తదుపరి Style sheets ను ఎలా వాడాలి ...

<< Previous Next >>
Back to Top