What Is CSS?

What Is CSS?

CSS అంటే Cascading Style Sheets. HTMLతో తయారైన వెబ్ పేజీకి రంగులు, fonts, sizes, spacing మరియు layout వంటి visual styles ఇవ్వడానికి CSS ఉపయోగిస్తాము.

HTML పేజీలోని content మరియు structure ను అందిస్తుంది. CSS ఆ content ఎలా కనిపించాలో నిర్ణయిస్తుంది. ఉదాహరణకు, HTMLలో ఉన్న headingను blue colorలో చూపించడం, paragraph text size మార్చడం లేదా page background color ఇవ్వడం CSS ద్వారా చేయవచ్చు.

CSS ఎలా పనిచేస్తుంది?

Browser ముందుగా HTML elementsను చదువుతుంది. తరువాత CSS rulesను చదివి, ఏ elementకు ఏ style వర్తించాలో నిర్ణయిస్తుంది. CSSలో సాధారణంగా ఒక selector, ఒకటి లేదా ఎక్కువ declarations ఉంటాయి.

ఒక declarationలో property మరియు దాని value ఉంటాయి. ఉదాహరణకు, color: navy;లో color property, navy value.

CSSను HTMLతో కలపడం

ఈ lessonలో CSSను HTML documentలోని <style> elementలో రాస్తాము. <style> element సాధారణంగా <head>లో ఉంటుంది. Browser ఆ CSSను ఉపయోగించి <body>లోని contentను style చేస్తుంది.

చిన్న ఉదాహరణ

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First CSS Page</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>

ఈ codeలో HTML contentను సృష్టిస్తుంది, CSS ఆ content యొక్క appearanceను మార్చుతుంది. Codeను browser-based HTML editorలో paste చేసి run చేస్తే resultను చూడవచ్చు.

Simple Explanation

CSS అనేది వెబ్ పేజీకి design ఇవ్వడానికి ఉపయోగించే language. HTML ఒక ఇంటి గోడలు మరియు గదుల structureలాంటిది. CSS ఆ ఇంటికి paint, furniture arrangement మరియు decoration ఇవ్వడంలాంటిది.

CSSతో HTML contentను తొలగించకుండా దాని రంగు, పరిమాణం మరియు కనిపించే విధానాన్ని మార్చవచ్చు. CSS స్వయంగా కొత్త HTML contentను సృష్టించదు మరియు programming logicను అందించదు.

Real-Life Example

ఒక school notice boardను ఊహించండి. HTMLలో notice heading మరియు message ఉంటాయి. CSS headingకు blue color, పెద్ద size, notice boardకు light background ఇవ్వగలదు. Content అదే ఉన్నా, CSS వల్ల అది చక్కగా మరియు చదవడానికి సులభంగా కనిపిస్తుంది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My First CSS Page</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>

The browser shows a light blue page background, a navy 32-pixel heading saying Welcome to CSS, and a dark gray paragraph below it.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Starter</title>
  <style>
    body {
      background-color: white;
    }

    h1 {
      color: green;
    }

    p {
      color: black;
    }
  </style>
</head>
<body>
  <h1>My CSS Page</h1>
  <p>I am learning CSS.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• CSS అంటే Cascading Style Sheets.
• HTML structure మరియు contentను అందిస్తుంది; CSS appearanceను మార్చుతుంది.
• CSSతో colors, fonts, sizes మరియు backgroundsను మార్చవచ్చు.
• CSS ruleలో selector మరియు declarations ఉంటాయి.
• Declarationలో property మరియు value ఉంటాయి.
• <style> elementలో embedded CSSను రాయవచ్చు.
• CSS స్వయంగా HTML contentను సృష్టించదు మరియు programming logicను అందించదు.