<< Previous Next >>

CSS Style Sheets

ఏదైనా వెబ్ పేజ్ లో Style Sheet లను మూడు విధాలుగా వ్రాయవచ్చు.

  • Internal Style Sheet - అదే వెబ్ పేజ్ లో వ్రాస్తారు
  • External Style Sheet - వేరొక వెబ్ పేజ్ లో వ్రాసి దాన్ని కావసిన పేజ్ లో వాడుకోవడం
  • Inline Style Sheet - అదే line లో వ్రాయడం

Internal Style Sheet

Internal Style Sheet అనగా css code ని అంతర్గతంగా అదే వెబ్ పేజ్ లో హెడ్ సెక్షన్ (<head> , </head> ట్యాగ్ ల మధ్య భాగం) లో <style> , </style> ట్యాగ్ ల నడుమ వ్రాయడం. క్రింది ఉదాహరణను గమనించండి.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body {background-color:LavenderBlush;}
p {color: Green ;}
</style>
</head>
<body>
<p>An internal style sheet should be used when a single document has a unique style</p>
<p>You define internal styles in the head section of an HTML page, inside the <style> tag</p>
</body>
</html>
Output

An internal style sheet should be used when a single document has a unique style

You define internal styles in the head section of an HTML page, inside the <style> tag

External Style Sheet

ఒక website లోని అన్ని పేజీలలోని title ని మార్చాలనుకోండి అప్పుడు ప్రతి పేజీకి వెళ్లి title ని మార్చడం కన్నా ఒకే పేజ్ లో మారిస్తే అన్ని చోట్ల దాని ప్రభావం ఉందనుకోండి ఎలా ఉంటుంది. అది ఈ external style sheet వల్ల సాధ్యపడుతుంది.
External Style Sheet అనగా css code ని వేరొక పేజ్ లో వ్రాసి దాన్ని కావలసిన వెబ్ పేజ్ లో వాడుకోవడం. ఇలా చేయడం వల్ల చాలా శ్రమ తగ్గుతుంది ఎలాగంటే css code ని కలిగి ఉన్న external file లో ఏదైనా మార్పు చేస్తే దాని ప్రభావం మిగతా అన్ని పేజీలలో పడుతుంది. క్రింది ఉదాహరణను గమనించండి.

Sample webpage
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h3>heading</h3>
<p>This is your paragraph</p>
</body>
</html>
Output

heading

This is yor pragraph

హెడ్ సెక్షన్ లో గల ఈ <link rel="stylesheet" type="text/css" href="mystyle.css"> అనేది mystyle.css అనే external file ని వెబ్ పేజీకి <link> అనే ట్యాగ్ ద్వారా link చేస్తుంది. mystyle.css అనేది external file . ఈ external file ని తప్పక ".css" గానే save చెయ్యాల్సి ఉంటుంది. ఇందులో type = "text/css" అనేది తప్పనిసరి. mystyle.css అనే file లో css code క్రిందివిధంగా వ్రాయబడి ఉంటుంది. గమనించండి.

mystyle.css
h3{ color : #4C0000 ;
text-align : center ;
text-decoration : underline ; }

Inline Styles

Inline Styles అనగా అదే line లో కావలసిన tag లో వ్రాయడం ,దీన్ని తక్కువగా వాడడం మంచిది. క్రింది ఉదాహరణను గమనించినట్లయితే హెడ్ సెక్షన్ లో వ్రాయాల్సిన code ను అదే line లో ఏవిధంగా వ్రాయాలో సులువుగా అర్థం అవుతుంది.

Sample webpage
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h3 style='text-align : center; color : red;'>heading </h3>
<p>This is third paragraph</p>
</body>
</html>
Output

heading

This is yor pragraph

గుర్తుపెట్టుకోవలసిన ముఖ్యమైన విషయాలు

ఒకే వెబ్ పేజ్ లో మొదట internal style sheet పద్దతిలో హెడ్డింగ్ కు కలర్ "red" apply చేసి దాని తరువాత external file పద్దతిలో అదే హెడ్డింగ్ కు కలర్ "Green" apply చేసి చివరగా inline style పద్దతిలో హెడ్డింగ్ కు కలర్ "Orange" ని గనక apply చేస్తే మనకు ఫలితం Inline పద్దతిలో నిర్ణయించినదే వస్తుంది. అనగా వీటి క్రమంలో చివరిదానిదే ప్రభావం ఉంటుంది. అదే ఈ ఉదాహణలో మనం Inline పద్దతిని వాడకపోతే అప్పుడు external style sheet లో నిర్ణయించినదే బయటకు డిస్ప్లే అవుతుంది. క్రింది ఉదాహరణద్వారా ఈ విషయం అర్థం చేసుకోవచ్చు.

Sample webpage
<!DOCTYPE html>
<html>
<head>
h3{text-align : center;
color : red;}
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h3 style='text-align : center; color : Orange;'>heading </h3>
<p>This is yor pragraph</p>
</body>
</html>

Output

heading

This is yor pragraph

Inline పద్దతిని వాడకపోతే అప్పుడు external file (mystyle.css) లో వ్రాసిన h3{color : Green ; } అనేదాని ప్రభావం ఉంటుంది. అందువల్ల హెడ్డింగ్ యొక్క కలర్ Green గా మారుతుంది. Click చేసి మార్పుని గమనించండి.

తదుపరి CSS Text Property గురించి...

<< Previous Next >>
Back to Top