Why Do We Use CSS?

Why Do We Use CSS?

HTML వెబ్‌పేజీలో content మరియు structureను తయారు చేస్తుంది. కానీ ఆ content ఎలా కనిపించాలి, ఏ రంగులో ఉండాలి, ఎంత పెద్దగా ఉండాలి వంటి presentationను CSS నియంత్రిస్తుంది.

CSS ఉపయోగించడం వల్ల వెబ్‌పేజీని అందంగా, చదవడానికి సులభంగా, ఒకే విధమైన designతో మరియు సులభంగా మార్చుకునేలా తయారు చేయవచ్చు.

CSS ఉపయోగించే ముఖ్య కారణాలు

• Design: Text color, background color, font size వంటి appearanceను మార్చవచ్చు.
• Consistency: ఒకే CSS ruleతో చాలా HTML elementsకు ఒకే style ఇవ్వవచ్చు.
• Maintainability: ప్రతి HTML elementలో style రాయాల్సిన అవసరం ఉండదు. CSSను ఒక చోట మార్చితే అనేక elements మారవచ్చు.
• Separation: HTMLలో content మరియు structure, CSSలో presentationను వేరుగా ఉంచవచ్చు.
• Better readability: సరైన colors, sizes మరియు spacingతో contentను చదవడం సులభమవుతుంది.

Browser HTMLను చదివి page structureను తయారు చేస్తుంది. తరువాత CSS rulesను వర్తింపజేసి ఆ pageను styled రూపంలో చూపిస్తుంది.

CSS లేకుండా మరియు CSSతో

CSS లేకుండా ఒక heading మరియు paragraph సాధారణ browser styleలో కనిపిస్తాయి. CSSతో వాటి రంగు, పరిమాణం, background మరియు spacingను మన అవసరానికి అనుగుణంగా మార్చవచ్చు.

Simple Explanation

CSS అనేది వెబ్‌పేజీకి దుస్తులు మరియు అలంకరణ వంటిది. HTML ఒక ఇంటి గోడలు మరియు గదుల నిర్మాణం లాంటిది అయితే, CSS ఆ ఇంటి రంగులు, furniture arrangement మరియు decoration లాంటిది.

ఉదాహరణకు, ఒక paragraphకు నీలం రంగు ఇవ్వడానికి CSSలో color: blue; అని రాయవచ్చు. ఒకే ruleను ఉపయోగించి చాలా paragraphsను ఒకేసారి style చేయవచ్చు. అందుకే CSSను ఉపయోగిస్తే website designను సులభంగా నియంత్రించవచ్చు.

Real-Life Example

ఒక పాఠశాలలో 20 తరగతి గదులు ఉన్నాయని ఊహించండి. ప్రతి గదికి రంగు మార్చడానికి ఒక్కొక్క గదిని విడిగా paint చేయడం కష్టమైన పని. కానీ ఒకే design ruleతో అన్ని గదులకు రంగు వేస్తే పని సులభమవుతుంది.

అదే విధంగా, CSSలో ఒక ruleను రాస్తే ఆ ruleకు సరిపోయే అనేక HTML elements ఒకేసారి styled అవుతాయి. Websiteలో అన్ని headingsను ఒకే రంగులో చూపించడానికి ఇది ఉపయోగపడుతుంది.

Code Examples

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

    h1 {
      color: #174ea6;
      font-size: 32px;
    }

    p {
      background-color: white;
      padding: 12px;
      border-left: 4px solid #174ea6;
    }
  </style>
</head>
<body>
  <h1>Welcome to CSS</h1>
  <p>CSS makes HTML pages clear and attractive.</p>
  <p>One CSS rule can style multiple elements.</p>
</body>
</html>

Browserలో లేత నీలం backgroundతో ఒక page కనిపిస్తుంది. నీలం రంగు పెద్ద heading కనిపిస్తుంది. రెండు white paragraphs ఒకే paddingతో మరియు ఎడమవైపు నీలం borderతో కనిపిస్తాయి.

Line-by-Line Explanation

Try It

Try this CSS code:

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

    h1 {
      color: #b05a00;
    }

    p {
      color: #333333;
      background-color: white;
      padding: 10px;
    }
  </style>
</head>
<body>
  <h1>My Web Page</h1>
  <p>CSS changes the appearance of HTML.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• HTML content మరియు structureను ఇస్తుంది; CSS appearanceను నియంత్రిస్తుంది.
• Colors, fonts, sizes, backgrounds మరియు spacing కోసం CSS ఉపయోగిస్తాము.
• ఒక CSS ruleను అనేక matching HTML elementsకు వర్తింపజేయవచ్చు.
• CSS వల్ల website designను సులభంగా మార్చవచ్చు మరియు maintain చేయవచ్చు.
• Embedded CSSను <style> మరియు </style> tags మధ్య రాస్తాము.
• CSS declaration సాధారణంగా property, value మరియు semicolonతో ఉంటుంది.