CSS Syntax Explained

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

CSS Syntax అంటే CSS ruleను సరైన విధంగా రాయడానికి ఉపయోగించే నిర్మాణం. Browser CSSను చదివి, ఏ HTML elementకు ఏ style ఇవ్వాలో నిర్ణయిస్తుంది.

ఒక సాధారణ CSS ruleలో selector, curly braces { }, ఒకటి లేదా ఎక్కువ declarations ఉంటాయి.

selector {
  property: value;
}

CSS Ruleలోని భాగాలు

• Selector: ఏ HTML elementకు style ఇవ్వాలో చెబుతుంది.
• Opening curly brace {: CSS declarations ప్రారంభమయ్యాయని సూచిస్తుంది.
• Property: మార్చవలసిన style అంశం. ఉదాహరణకు color.
• Colon : Property మరియు value మధ్య ఉంటుంది.
• Value: Propertyకు ఇవ్వాల్సిన setting. ఉదాహరణకు navy.
• Semicolon ;: ప్రతి declaration చివర ఉంటుంది.
• Closing curly brace }: CSS rule ముగిసిందని సూచిస్తుంది.

ఒకే ruleలో అనేక declarations

ఒక selectorకు అనేక styles ఇవ్వవచ్చు. ప్రతి declarationను semicolonతో ముగించాలి.

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

ఇక్కడ h1 selector. color: navy; మరియు font-size: 32px; రెండు declarations. Property, colon, value, semicolon సరైన క్రమంలో ఉండాలి.

CSS ఎక్కడ రాయాలి?

ఈ lessonలో examplesను సులభంగా test చేయడానికి HTML documentలో <style> elementను ఉపయోగిస్తున్నాం. <style>లో రాసిన CSSను browser ఆ HTML pageకు apply చేస్తుంది.

CSS Syntaxలో spacing

CSSలో indentation మరియు spaces readability కోసం ఉపయోగపడతాయి. Browser సాధారణంగా అదనపు spacesను పట్టించుకోదు, కానీ సరైన indentation codeను చదవడం మరియు edit చేయడం సులభం చేస్తుంది.

CSS property names, values, selectors మరియు punctuationలను సరిగ్గా రాయాలి. Property spelling తప్పితే లేదా colon, semicolon, braces మరిచిపోతే style సరిగ్గా పనిచేయకపోవచ్చు.

Simple Explanation

CSS Syntaxను ఒక sentence structureలా ఊహించండి. ముందుగా ఎవరిని మార్చాలి? అని selector చెబుతుంది. తరువాత ఏం మార్చాలి? అని property చెబుతుంది. చివరగా ఏ value ఇవ్వాలి? అని value చెబుతుంది.

ఉదాహరణకు p { color: green; } అంటే అన్ని paragraph elementsను ఎంచుకుని, వాటి text colorను greenగా మార్చు అని browserకు చెప్పడం.

గుర్తుంచుకోవాల్సిన basic pattern: selector { property: value; }

Real-Life Example

ఒక classroomలో teacher ముందుగా ఏ విద్యార్థిని పిలవాలో పేరు ద్వారా చెబుతారు. తరువాత ఏ పని చేయాలో చెబుతారు. CSSలో selector విద్యార్థి పేరులాంటిది, property పని లాంటిది, value ఆ పనికి సంబంధించిన setting లాంటిది.

ఉదాహరణకు h1 { color: navy; } అంటే headingలను ఎంచుకుని వాటి text colorను navyగా మార్చడం.

Code Examples

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

    p {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>CSS Syntax</h1>
  <p>Correct syntax helps the browser apply styles.</p>
</body>
</html>

The page displays a navy heading titled CSS Syntax with a font size of 32 pixels. Below it, the paragraph text appears dark gray.

Line-by-Line Explanation

Try It

Try this CSS code:

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

    p {
      color: #444444;
    }
  </style>
</head>
<body>
  <h1>Practice Heading</h1>
  <p>Edit the CSS values and run the page again.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• CSS basic pattern: selector { property: value; }
• Selector ఏ HTML elementకు style ఇవ్వాలో ఎంచుకుంటుంది.
• Property మార్చవలసిన style అంశాన్ని చెబుతుంది.
• Property మరియు value మధ్య colon (:) ఉంటుంది.
• ప్రతి declaration చివర semicolon (;) పెట్టాలి.
• CSS declarations curly braces { } లో రాయాలి.
• ఒక selectorలో అనేక declarations రాయవచ్చు.