Creating Your First CSS File

Creating Your First CSS File

CSS రాయడానికి ముందుగా ఒక ప్రత్యేక CSS file తయారు చేయవచ్చు. ఈ file లో HTML page ఎలా కనిపించాలి అనే styling rules ఉంటాయి.

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

CSS file అనేది .css extension తో save చేసే plain text file. ఉదాహరణకు, styles.css అనేది ఒక CSS file పేరు.

ఈ file లో selectors మరియు declarations రాస్తాము. Browser ఈ rules ను చదివి HTML elements యొక్క appearance ను మార్చుతుంది.

మొదటి CSS file ఎలా తయారు చేయాలి?

1. Code editor ను open చేయండి.
2. కొత్త file ను create చేయండి.
3. దానికి styles.css అనే పేరు ఇవ్వండి.
4. CSS selector ను రాయండి.
5. Curly braces లో property మరియు value రాయండి.
6. File ను save చేయండి.

ఈ lesson లో మనం CSS file రాయడంపై దృష్టి పెడతాము. HTML page కు ఈ file ను ఎలా connect చేయాలో తరువాతి lesson లో నేర్చుకుంటాము.

CSS rule యొక్క ప్రాథమిక నిర్మాణం

selector {
  property: value;
}

selector ఏ HTML element కు style ఇవ్వాలో చెబుతుంది. property ఏ visual feature ను మార్చాలో చెబుతుంది. value ఆ feature కు కావలసిన setting ను చెబుతుంది.

CSS file లో రాయగల ఉదాహరణ

body {
  background-color: #f2f7ff;
  font-family: Arial, sans-serif;
}

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

p {
  color: #333333;
}

ఈ code ను styles.css file లో save చేయవచ్చు. ఇందులో body, h1 మరియు p elements కోసం వేర్వేరు rules ఉన్నాయి.

Simple Explanation

ఒక CSS file ను HTML page యొక్క design instructions పుస్తకంలా ఊహించండి. అందులో HTML content ఉండదు; content ఎలా కనిపించాలో మాత్రమే rules ఉంటాయి.

ఉదాహరణకు, h1 selector heading ను ఎంచుకుంటుంది. దాని లోపల color: navy; ఉంటే heading text navy color లో కనిపిస్తుంది. ప్రతి declaration చివర semicolon పెట్టడం మంచి అలవాటు.

CSS file ను సాధారణంగా .css extension తో save చేయాలి. File పేరు styles.css, main.css లేదా design.css కావచ్చు. ఈ lesson లో సులభంగా గుర్తుపట్టేందుకు styles.css ఉపయోగిస్తున్నాము.

Real-Life Example

ఒక పాఠశాలలో notice board పై heading, background మరియు text కు వేర్వేరు rules ఉంటాయి. ఆ rules ను ఒక instruction sheet లో రాసినట్లే CSS file పని చేస్తుంది. HTML content notice లాంటిది; CSS file అది ఎలా కనిపించాలో చెప్పే design sheet లాంటిది.

Code Examples

body {
  background-color: #f2f7ff;
  font-family: Arial, sans-serif;
}

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

p {
  color: #333333;
}

ఈ CSS rules ను h1 మరియు p elements ఉన్న HTML page కు వర్తింపజేస్తే, page background light blue గా, heading navy color మరియు 32px size గా, paragraph dark gray color గా కనిపిస్తుంది.

Line-by-Line Explanation

Try It

Try this CSS code:

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

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

    p {
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>My First CSS Page</h1>
  <p>I am learning to write CSS rules.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• CSS file ను .css extension తో save చేయాలి.
• ఉదాహరణ file పేరు styles.css.
• CSS rule రూపం selector { property: value; }.
• Selector HTML element ను ఎంచుకుంటుంది.
• Property ఏ styling feature మార్చాలో చెబుతుంది.
• Value ఆ feature కు కావలసిన setting ను చెబుతుంది.
• ప్రతి declaration తరువాత semicolon పెట్టడం మంచి అలవాటు.
• CSS file ను HTML page కు connect చేయడం తరువాతి lesson లో నేర్చుకుంటాము.