<< Previous Next >>

CSS Outlines

ఒక content (ఉదాహరణకు ఒక heading లేదా ఒక పారగ్రాఫ్ అనుకోండి.) యొక్క outlineను గీయడం అనగా ఆ content యొక్క border కు బయటివైపు అంటే border పైన దాని చుట్టూ గీసే ఒక line అని అర్థం. ఆ line అనగా outline కు గల properties (లక్షణాలు) గురించి క్రింద తెలుసుకుందాం.

CSS Outline Property

Property Values
outline outline-color
outline-style
outline-width
inherit
outline-color color_name
hex_number
rgb_number
invert
inherit
outline-style none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width thin
medium
thick
length
inherit

[inherit అనగా వారసత్వంగా సంక్రమించే లక్షణాలు అని అర్థం.]

CSS Outline Example

Click for
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
p{border : 2px dotted #FF0000 ;}

</style>
</head>
<body>
<p>"Experience is simply the name
we give our mistakes"</p>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

"Experience is simply the name
we give our mistakes"

CSS Inherit Example

<span> , </span> ఈ tagలను ఒక document లోని పారగ్రాఫ్ లేదా ఒక పారగ్రాఫ్ లోని ఒక వాక్యాన్ని భిన్నంగా డిస్ప్లే చెయ్యడానికి వాడతారు. క్రింది ఉదాహరణను గమనిస్తే సులువుగా అర్థం అవుతుంది.

Click for
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
span{ color: blue;}
#test{color: red;}

</style>
</head>
<body>
<div> Here is <span>a span element</span> which is blue, </div>
<div id="test"> Here is <span>a span element</span> which is blue, </div>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.
Here is a span element which is blue,
Here is a span element which is blue,

head section లో రాసిన css code ను గమనించినట్లయితే span tagల నడుమ గల text యొక్క కలర్ blue అంటే body లోగల అన్ని span elements పై ఈ ప్రభావం ఉంటుంది. తరువాత selector "test" యొక్క కలర్ red గా రాయబడింది. కనుక ఆ div ట్యాగ్ ల నడుమ గల content యొక్క కలర్ red గా డిస్ప్లే కావాలి కాని span వల్ల అందులోని కొంత భాగం blue కలర్ లో డిస్ప్లే అయ్యింది. span అనేది div లోపల ఉంది. కనుక div properties ని మార్చితే దాని ప్రభావం span పై కూడా ఉంటుంది. ఈ ప్రభావాన్ని span అవగతం చేసుకోవడాన్నే " Inherit " అంటారు. పై ఉదాహరణలో Inhert ని apply చేసినప్పడు id విలువ test గా ఉన్న div లోని span యొక్క కలర్ విలువని inherit గా వ్రాయడంవల్ల ఆ div కి గల కలర్ నే span తీసుకుంటుంది.Click చేసి మార్పుని గమనించండి.

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

<< Previous Next >>
Back to Top