CSS Ruleset: Selector, Property and Value

CSS Ruleset అంటే ఏమిటి?

CSSలో ఒక HTML element ఎలా కనిపించాలో చెప్పే మొత్తం code block‌ను ruleset అంటారు. ఒక rulesetలో సాధారణంగా selector, ఒకటి లేదా ఎక్కువ property మరియు వాటి value ఉంటాయి.

h1 {
  color: navy;
  font-size: 32px;
}

Rulesetలోని భాగాలు

• Selector: ఏ HTML element‌కు style ఇవ్వాలో ఎంచుకుంటుంది. పై ఉదాహరణలో h1 selector.
• Property: మార్చవలసిన రూప లక్షణం. ఉదాహరణకు color మరియు font-size.
• Value: ఆ propertyకి ఇవ్వాల్సిన setting. ఉదాహరణకు navy మరియు 32px.
• Declaration: property మరియు value కలిసిన భాగం. ఉదాహరణకు color: navy;.

Selector తర్వాత curly braces { } లో declarations రాస్తాము. Property మరియు value మధ్య colon : ఉంటుంది. ప్రతి declaration చివర semicolon ; పెట్టడం మంచి అలవాటు.

Browserలో ఇది ఎలా పనిచేస్తుంది?

Browser ముందుగా HTMLలోని elementsను చదువుతుంది. తర్వాత selectorతో సరిపోయే elementలను కనుగొని, వాటికి ఇచ్చిన property-value declarationsను వర్తింపజేస్తుంది. ఒక rulesetలో చాలా declarations ఉండవచ్చు.

ఉదాహరణకు p selector అన్ని paragraph elementsను ఎంచుకుంటే, ఆ paragraphsకు color మరియు line-height వంటి styles వర్తిస్తాయి.

Simple Explanation

CSS rulesetను ఒక చిన్న ఆదేశంలా ఊహించండి: ఏ element? అనే ప్రశ్నకు selector సమాధానం ఇస్తుంది. ఏ లక్షణం? అనే ప్రశ్నకు property సమాధానం ఇస్తుంది. ఏ setting? అనే ప్రశ్నకు value సమాధానం ఇస్తుంది.

p { color: #333333; } లో p selector, color property, #333333 value. అంటే అన్ని paragraphs text color ముదురు బూడిదగా మారుతుంది.

Real-Life Example

ఒక పాఠశాల notice boardలో అన్ని headingsను నీలం రంగులో, అన్ని noticesను నల్ల రంగులో ఉంచాలని అనుకుందాం. Headings కోసం selectorను ఎంచుకుంటాం. రంగు మార్చడానికి color propertyని ఉపయోగిస్తాం. నీలం లేదా నల్ల రంగు value అవుతుంది. ఈ సూచనల సమూహమే CSS ruleset లాంటిది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Ruleset</title>
  <style>
    h1 {
      color: navy;
      font-size: 32px;
    }

    p {
      color: #333333;
      line-height: 1.5;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS rulesets style HTML elements.</p>
</body>
</html>

The page displays a navy 32-pixel heading saying “Welcome to CSS” and a dark gray paragraph below it with increased line spacing.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try CSS Rulesets</title>
  <style>
    h2 {
      color: darkgreen;
      font-size: 28px;
    }

    p {
      color: #444444;
    }
  </style>
</head>
<body>
  <h2>My CSS Note</h2>
  <p>Change the selector, property, or value and run the page.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• CSS rulesetలో selector మరియు curly braces ఉంటాయి.
• Selector ఏ HTML elementకు style ఇవ్వాలో ఎంచుకుంటుంది.
• Property మార్చవలసిన లక్షణాన్ని సూచిస్తుంది.
• Value propertyకి ఇవ్వాల్సిన settingను సూచిస్తుంది.
• Property మరియు value కలిసి declaration అవుతాయి.
• Declarationలో property మరియు value మధ్య colon, చివర semicolon వాడాలి.
• ఉదాహరణ: p { color: blue; }