Ways to Add CSS

HTML page కు CSS styles జోడించడానికి మూడు ప్రధాన మార్గాలు ఉన్నాయి: Inline CSS, Internal CSS మరియు External CSS.

1. Inline CSS

Inline CSS ను HTML element యొక్క style attribute లో నేరుగా రాస్తాము. ఇది ఒక ప్రత్యేక element కు మాత్రమే style ఇవ్వడానికి ఉపయోగపడుతుంది.

ఉదాహరణ: <p style=”color: blue;”>Hello</p>

2. Internal CSS

Internal CSS ను అదే HTML file యొక్క <head> భాగంలో ఉన్న <style> element లో రాస్తాము. ఒకే web page లోని అనేక elements కు style ఇవ్వడానికి ఇది ఉపయోగకరం.

3. External CSS

External CSS లో styles ను ప్రత్యేకమైన .css file లో రాస్తాము. ఆ file ను HTML file లోని <head> భాగంలో <link> element ద్వారా కలుపుతాము.

External CSS పెద్ద websites లో ఎక్కువగా ఉపయోగిస్తారు, ఎందుకంటే ఒకే CSS file ను అనేక HTML pages ఉపయోగించవచ్చు.

ఏ పద్ధతిని ఎప్పుడు ఉపయోగించాలి?

• Inline: ఒకే element కు చిన్న, ప్రత్యేకమైన style అవసరమైనప్పుడు.
• Internal: ఒకే HTML page కు మాత్రమే styles అవసరమైనప్పుడు.
• External: అనేక pages కు ఒకే design ఇవ్వాల్సినప్పుడు. ఇది సాధారణంగా ఉత్తమమైన పద్ధతి.

CSS priority గురించి చిన్న గమనిక

ఒకే element కు Inline, Internal మరియు External styles అన్నీ ఉంటే, సాధారణంగా Inline style కు ఎక్కువ priority ఉంటుంది. అయినప్పటికీ, code నిర్వహణ సులభంగా ఉండటానికి Inline CSS ను అవసరమైనప్పుడు మాత్రమే ఉపయోగించాలి.

Simple Explanation

CSS రాయడానికి మూడు మార్గాలను గుర్తుంచుకోండి:

1. Inline CSS: style ను element లోనే రాయడం.
2. Internal CSS: <style> element లో రాయడం.
3. External CSS: ప్రత్యేక .css file లో రాసి <link> ద్వారా కలపడం.

చిన్న పరీక్ష కోసం Inline CSS ఉపయోగించవచ్చు. ఒక page కోసం Internal CSS ఉపయోగించవచ్చు. నిజమైన projects లో reusable మరియు maintainable code కోసం External CSS సాధారణంగా ఉత్తమ ఎంపిక.

Real-Life Example

ఒక పాఠశాల notice board ను ఊహించుకోండి. ఒకే notice కు marker తో నేరుగా రంగు వేయడం Inline CSS లాంటిది. ఒకే board మీద ఉన్న notices అన్నింటికీ ఒకే design rule పెట్టడం Internal CSS లాంటిది. పాఠశాలలోని అన్ని boards కోసం ఒకే design guide తయారు చేయడం External CSS లాంటిది.

Code Examples

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Inline CSS</title>
</head>
<body>
  <h1 style="color: darkblue;">Inline CSS Example</h1>
  <p style="font-size: 18px; color: #333333;">This style is written inside the HTML element.</p>
</body>
</html>

The heading appears dark blue. The paragraph appears larger with dark gray text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>
  <style>
    h1 {
      color: darkgreen;
    }

    p {
      font-size: 18px;
      color: #333333;
    }
  </style>
</head>
<body>
  <h1>Internal CSS Example</h1>
  <p>These styles are written inside the style element.</p>
</body>
</html>

The heading appears dark green. The paragraph appears larger with dark gray text.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External CSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>External CSS Example</h1>
  <p>The design comes from a separate CSS file.</p>
</body>
</html>

/* Save the following CSS in a separate file named styles.css */
body {
  background-color: #f2f7ff;
}

h1 {
  color: purple;
}

p {
  color: #333333;
}

The page has a very light blue background, a purple heading, and dark gray paragraph text.

Line-by-Line Explanation

Try It

Try this CSS code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Try CSS Methods</title>
  <style>
    p {
      color: darkgreen;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1 style="color: navy;">Try Different CSS Methods</h1>
  <p>This paragraph uses internal CSS.</p>
</body>
</html>

Practice

Common Mistakes

Interview Questions

Exam Questions

Quick Revision

• Inline CSS ను HTML element యొక్క style attribute లో రాస్తారు.
• Internal CSS ను HTML head లోని style element లో రాస్తారు.
• External CSS ను ప్రత్యేక .css file లో రాసి link element ద్వారా కలుపుతారు.
• చిన్న ప్రత్యేక మార్పులకు Inline CSS ఉపయోగించవచ్చు.
• ఒకే page కోసం Internal CSS ఉపయోగించవచ్చు.
• అనేక pages కోసం External CSS సాధారణంగా ఉత్తమమైన పద్ధతి.
• External CSS file పేరు మరియు path href లో సరిగ్గా ఇవ్వాలి.