How CSS Works with HTML

How CSS Works with HTML

HTML వెబ్ పేజీలో content మరియు structure ను తయారు చేస్తుంది. CSS ఆ HTML content ఎలా కనిపించాలి అనే విషయాన్ని నిర్ణయిస్తుంది.

Browser ముందుగా HTML document ను చదివి elements ను తయారు చేస్తుంది. తరువాత CSS rules ను చదివి సరిపోయే HTML elements పై styles ను apply చేస్తుంది.

CSS Rule యొక్క నిర్మాణం

ఒక CSS rule లో సాధారణంగా selector మరియు declaration block ఉంటాయి.

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

• h1 అనేది selector. ఇది ఏ HTML element కు style ఇవ్వాలో చెబుతుంది.
• color: navy; మరియు font-size: 32px; declarations.
• color, font-size properties.
• navy, 32px values.

HTMLతో CSS ఎలా కలుస్తుంది?

ఈ పాఠంలో CSS ను HTML document లోని <style> element లో రాస్తాము. CSS selector HTML tag పేరు h1తో match అవుతుంది. అందువల్ల ఆ tag లోని text navy colorలో, 32px sizeలో కనిపిస్తుంది.

ఒకే selector కు సంబంధించిన CSS rule ఆ selector కు match అయ్యే అన్ని elements పై పనిచేస్తుంది. ఉదాహరణకు, p selector pageలోని అన్ని paragraph elementsను style చేస్తుంది.

Code Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML and CSS</title>
  <style>
    body {
      background-color: #f2f7ff;
      font-family: Arial, sans-serif;
    }

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

    p {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS changes the appearance of HTML content.</p>
</body>
</html>

Browserలో పని చేసే క్రమం

1. Browser HTML tags ను చదువుతుంది.
2. అందులో ఉన్న <h1> మరియు <p> elements ను గుర్తిస్తుంది.
3. <style>లోని CSS rules ను చదువుతుంది.
4. ప్రతి selectorకు సరిపోయే HTML elementను కనుగొంటుంది.
5. CSS properties మరియు values ను apply చేసి pageను display చేస్తుంది.

Simple Explanation

HTML ఒక ఇంటి structure లాంటిది. CSS ఆ ఇంటి రంగు, అక్షరాల పరిమాణం, background వంటి appearance ను నిర్ణయించే decoration లాంటిది.

ఉదాహరణకు, HTMLలో <h1>Welcome</h1> ఉంటే అది heading contentను ఇస్తుంది. CSSలో h1 { color: navy; } రాస్తే ఆ heading text navy colorలో కనిపిస్తుంది.

అంటే CSS HTML contentను create చేయదు. HTMLలో ఉన్న contentను browserలో అందంగా చూపిస్తుంది.

Real-Life Example

ఒక పాఠశాల notice board ను ఊహించండి. Noticeలో ఉన్న పదాలు HTML content వంటివి. Headingను పెద్దగా చేయడం, ముఖ్యమైన సమాచారానికి రంగు ఇవ్వడం, boardకు background ఇవ్వడం CSS పని. Noticeలోని అసలు సమాచారం HTML నుంచి వస్తుంది; దాని presentation CSS ద్వారా మారుతుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>HTML and CSS</title>
  <style>
    body {
      background-color: #f2f7ff;
      font-family: Arial, sans-serif;
    }

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

    p {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS changes the appearance of HTML content.</p>
</body>
</html>

లేత నీలం backgroundతో ఒక page కనిపిస్తుంది. Heading navy colorలో 32px sizeతో కనిపిస్తుంది. Paragraph dark gray colorలో కనిపిస్తుంది. Pageలో Arial font ఉపయోగించబడుతుంది.

Line-by-Line Explanation

Try It

Try this CSS code:

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

    p {
      color: #444444;
    }
  </style>
</head>
<body>
  <h1>My Web Page</h1>
  <p>HTML provides content and CSS provides style.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• HTML content మరియు structureను తయారు చేస్తుంది.
• CSS HTML content యొక్క appearanceను మార్చుతుంది.
• CSS ruleలో selector మరియు declaration block ఉంటాయి.
• Selector ఏ HTML elementకు style ఇవ్వాలో నిర్ణయిస్తుంది.
• Property ఏ అంశాన్ని మార్చాలో చెబుతుంది; value ఆ మార్పు ఎలా ఉండాలో చెబుతుంది.
• ఈ పాఠంలో embedded CSSను <style> elementలో రాశాము.
• Browser CSS selectorను HTML elementతో match చేసి stylesను apply చేస్తుంది.