<< Previous Next >>

CSS Text

  • text-color
  • text-alignment
  • text-decoration
  • text-transformation
  • text-indent

text-color

text-color అనే property ద్వారా మనం వెబ్ పేజ్ పై డిస్ప్లే చేయాలనుకునే text యొక్క కలర్ ని అనేక రకాలుగా మార్చవచ్చును.


వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h4 {color : #000066 ;}
p {color : #FF0000 ;}
</style>
</head>
<body>
<h4>Cascading Style Sheets (CSS)</h4>
<p>CSS is a style sheet language used
for describing the look and formatting
of a document written in a markup
language</p>

</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

Cascading Style Sheets (CSS)

CSS is a style sheet language used
for describing the look and formatting
of a document written in a markup
language


text-alignment

text-align అనే property ద్వారా మనం వెబ్ పేజ్ పై డిస్ప్లే చెయ్యాలనుకునే text ని సెంటర్ లో గాని లేదా ఎడమవైపు లేదా కుడివైపుగాని డిస్ప్లే చెయ్యవచ్చు.

వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h3 {text-align : center ;}
h4 {text-align: right ;}
h5 {text-align : left ;}
</style>
</head>
<body>
<h3>center</h3>
<h4>align right</h4>
<h5>align left</h5>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

center

align right

align left

Justify exmple

ఇందులో "justify" అనే "value" ద్వారా ఒక పూర్తి పారగ్రాఫ్ ని అందులోని ప్రతీ లైన్ ను పై నుండి క్రిందివరకు ఒకే క్రమపద్దతి లో వెబ్ పేజ్ పై డిస్ప్లే చెయ్యవచ్చు. Click చేసి తేడాను గమనించండి

<!DOCTYPE html>
<html>
<head>



</head>
<body>

<p>CSS is a style sheet language used
for describing the look and formatting
of a document written in a markup
language</p>

</body>
</html>

CSS is a style sheet language used
for describing the look and
formatting of a document written in a markup language

* mobile phone లో పై మార్పుని సరిగ్గా చూడలేక పోవచ్చు (due to browser compatibility)

text-decoration

text-decoration అనే property మూడు values ని కలిగి ఉంటుంది. అవి overline , line-through & underline వీటి ప్రభావాన్ని క్రింది ఉదాహరణ తెలియజేస్తుంది.

వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1{text-decoration:overline;}
h2{text-decoration:line-through;}
h3{text-decoration:underline;}
</style>
</head>
<body>
<h1>your heading</h1>
<h2>your heading</h2>
<h3>your heading</h3>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

your heading

your heading

your heading

text-transformation

text-transform అనే property వెబ్ పేజ్ యొక్క text అనగా ఒక పారగ్రాఫ్ ని తీసుకున్నట్లయితే అందులోని మొత్తం అక్షరాలను uppercase (పెద్దవిగా) లేదా lowercase (చిన్నవిగా) లేదా ప్రతీ పదంలోని మొదటి అక్షరం మాత్రమే capitalize ( పెద్దదిగా) మిగతావి అన్నీ చిన్నవిగా చూపడానికి ఉపయోగపడుతుంది.

వెబ్ పేజ్ లో ఈ విధంగా రాసిఉంటుంది.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1{text-transform:uppercase;}
h2{text-transform:lowercase;}
h3{text-transform:capitalize;}
</style>
</head>
<body>
<h1>your heading</h1>
<h2>your heading</h2>
<h3>welcome to my web tutorial</h3>
</body>
</html>
బయటికి మాత్రం ఇలా కనబడుతుంది.

your heading

your heading

welcome to my web tutorial

text-indent

ఒక పారగ్రాఫ్ ని మొదలుపెట్టేటప్పుడు అందులోని మొదటి లైన్ ను కొద్దిగా ముందుకు ఎక్కువగా గ్యాప్ వదిలి మొదలుపెడతారు. మీరు గమనించే ఉంటారు.

<!DOCTYPE html>
<html>
<head>



</head>
<body>

<p>HTML or HyperText Markup
Language is the standard markup
language used to create web pages.
</p>
<p>
CSS is a style sheet language used
for describing the look and formatting
of a document written in a markup
language</p>
</body>
</html>
Click చేసి తేడాను గమనించండి

HTML or HyperText Markup Language is the standard markup language used to create web pages.

CSS is a style sheet language used for describing the look and formatting of a document written in a markup language


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

<< Previous Next >>

Back to Top