Font Size and Font Weight
Font Size మరియు Font Weight
వెబ్ పేజీలో text ఎంత పెద్దగా కనిపించాలి, ఎంత మందంగా కనిపించాలి అనే విషయాలను నియంత్రించడానికి font-size మరియు font-weight properties ఉపయోగిస్తాము.
font-size
font-size text యొక్క పరిమాణాన్ని నిర్ణయిస్తుంది. ఉదాహరణకు font-size: 24px; అంటే text పరిమాణం 24 pixels గా ఉంటుంది.
సాధారణంగా px మరియు rem units ఉపయోగిస్తారు. Beginner examples లో px సులభంగా అర్థమవుతుంది. rem అనేది page యొక్క root font size ఆధారంగా పరిమాణాన్ని నిర్ణయిస్తుంది.
font-weight
font-weight text ఎంత పలుచగా లేదా మందంగా ఉండాలో నిర్ణయిస్తుంది. normal, bold వంటి keywords లేదా 100 నుండి 900 వరకు numeric values ఉపయోగించవచ్చు.
400సాధారణ text కు దగ్గరగా ఉంటుంది.700సాధారణంగా bold text కు దగ్గరగా ఉంటుంది.- ప్రతి font అన్ని numeric weights ను support చేయకపోవచ్చు. అందువల్ల browser అందుబాటులో ఉన్న దగ్గరి weight ను చూపించవచ్చు.
ఎలా apply చేయాలి?
ముందుగా HTML element లేదా class ను selector తో ఎంచుకుని, దాని లోపల font-size మరియు font-weight declarations రాయాలి. Heading ను పెద్దగా, ముఖ్యమైనదిగా చూపించడానికి మరియు paragraph ను చదవడానికి సౌకర్యంగా ఉంచడానికి ఇవి ఉపయోగపడతాయి.
Simple Explanation
font-size అంటే text పరిమాణం. font-weight అంటే text మందం.
ఉదాహరణకు, heading కోసం font-size: 32px; మరియు font-weight: 700; రాస్తే heading పెద్దగా మరియు bold గా కనిపిస్తుంది. Paragraph కోసం font-size: 18px; మరియు font-weight: 400; రాస్తే అది సాధారణ మందంతో కనిపిస్తుంది.
ఈ properties ను HTML element selector, class selector లేదా ID selector తో ఉపయోగించవచ్చు.
Real-Life Example
ఒక పుస్తకంలో chapter title పెద్ద అక్షరాలతో మరియు మందంగా ఉంటుంది. దాని కింద ఉన్న వివరణ text కొంచెం చిన్నగా, సాధారణ మందంతో ఉంటుంది. వెబ్ పేజీలో ఈ తేడాను సృష్టించడానికి font-size మరియు font-weight ఉపయోగిస్తాము.
Code Examples
Heading మరియు Paragraph కు Font Size, Font Weight
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Font Size and Font Weight</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f7fb;
color: #222222;
}
h1 {
font-size: 32px;
font-weight: 700;
}
p {
font-size: 18px;
font-weight: 400;
}
.important {
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<h1>Learn CSS Typography</h1>
<p>Font size controls how large the text appears.</p>
<p class="important">Font weight controls how thick the text appears.</p>
</body>
</html>ఈ complete HTML document లో heading మరియు paragraphs కు వేర్వేరు font sizes, font weights ఇచ్చాము. h1 text 32px పరిమాణంలో 700 weight తో కనిపిస్తుంది. సాధారణ paragraph 18px మరియు 400 weight తో కనిపిస్తుంది. important class ఉన్న paragraph 20px మరియు bold గా కనిపిస్తుంది.
Browser లో లేత background పై పెద్ద, bold heading కనిపిస్తుంది. మొదటి paragraph 18px సాధారణ text గా కనిపిస్తుంది. రెండవ paragraph కొంచెం పెద్దగా మరియు bold text గా కనిపిస్తుంది.
Line-by-Line Explanation
h1 selector అన్ని h1 headings ను ఎంచుకుంటుంది.
Heading text పరిమాణాన్ని 32 pixels గా నిర్ణయిస్తుంది. అందువల్ల heading సాధారణ paragraph కంటే పెద్దగా కనిపిస్తుంది.
Heading కు 700 font weight ఇస్తుంది. ఇది సాధారణంగా bold text ను సూచిస్తుంది.
h1 selector యొక్క CSS rule ఇక్కడ ముగుస్తుంది.
ఈ selector అన్ని paragraph elements ను ఎంచుకుంటుంది.
Paragraph text ను 18 pixels పరిమాణంలో చూపిస్తుంది.
Paragraph కు సాధారణ text weight ఇస్తుంది. 400 సాధారణంగా normal weight కు సమానం.
important అనే class ఉన్న element ను ఈ selector ఎంచుకుంటుంది.
important class ఉన్న paragraph యొక్క text ను 20 pixels గా చేస్తుంది.
ఆ paragraph text ను bold గా చూపిస్తుంది. Keyword రూపంలో weight ఇవ్వవచ్చని ఇది చూపిస్తుంది.
Learn CSS Typography
ఈ HTML heading కు h1 selector యొక్క 32px మరియు 700 weight styles apply అవుతాయి.
Font weight controls how thick the text appears.
ఈ paragraph కు important class ఉంది. అందువల్ల .important rule లోని 20px size మరియు bold weight apply అవుతాయి.
Try It
Try this CSS code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Try Font Size and Weight</title>
<style>
body {
font-family: Arial, sans-serif;
}
h1 {
font-size: 28px;
font-weight: 700;
}
p {
font-size: 16px;
font-weight: 400;
}
</style>
</head>
<body>
<h1>CSS Text Practice</h1>
<p>Change the CSS values and observe the text.</p>
</body>
</html>Practice
Practice: పై practice code లో Daily News heading ను 32px పరిమాణంలో bold గా మార్చండి. News summary paragraph ను 18px పరిమాణంలో ఉంచండి.
Hint: h1 rule లో font-size: 32px; మరియు font-weight: 700; రాయండి. p rule లో font-size: 18px; ఉంచండి.
Common Mistakes
font-size: 20; అని unit లేకుండా రాయడం.సాధారణంగా size value కు unit ఇవ్వాలి. ఉదాహరణకు
font-size: 20px; అని రాయండి.
font-weight-size లేదా fontweight అని రాయడం.సరైన property పేర్లు
font-size మరియు font-weight.
font-weight: 1000; వంటి సాధారణ range కు బయట value ఉపయోగించడం.Numeric font weight సాధారణంగా 100 నుండి 900 మధ్య ఉంటుంది. Beginner examples లో 400 లేదా 700 ఉపయోగించండి.
font-size రాసి semicolon మర్చిపోవడం.ప్రతి declaration చివర semicolon ఉంచండి:
font-size: 24px;.
HTML element పేరు లేదా class selector సరిగ్గా match అవుతుందో చూడండి. ఉదాహరణకు
class="important" కు .important selector అవసరం.
Interview Questions
CSS లో font-size property ఏం చేస్తుంది?
Answer: ఇది text ఎంత పెద్దగా కనిపించాలో నిర్ణయిస్తుంది. ఉదాహరణకు font-size: 24px; text ను 24 pixels పరిమాణంలో చూపిస్తుంది.
CSS లో font-weight property ఎందుకు ఉపయోగిస్తారు?
Answer: Text ఎంత పలుచగా లేదా మందంగా ఉండాలో నిర్ణయించడానికి ఉపయోగిస్తారు. normal, bold, లేదా 100 నుండి 900 వరకు numeric values ఇవ్వవచ్చు.
font-weight: 400 మరియు font-weight: 700 మధ్య తేడా ఏమిటి?
Answer: 400 సాధారణ text weight ను సూచిస్తుంది. 700 సాధారణంగా bold text ను సూచిస్తుంది.
font-size కు px ఎందుకు ఉపయోగిస్తారు?
Answer: px text పరిమాణాన్ని pixels లో స్పష్టంగా నిర్ణయిస్తుంది. Beginner examples లో ఇది సులభంగా అర్థమవుతుంది.
Exam Questions
Text పరిమాణాన్ని మార్చే CSS property ఏది?
Answer:
font-size
Text మందాన్ని మార్చే CSS property ఏది?
Answer:
font-weight
సరైన CSS declaration ను ఎంచుకోండి: (a) font-size: 30px; (b) text-size: 30; (c) fontweight: bold;
Answer:
(a) font-size: 30px;
font-weight: bold; ఉపయోగించినప్పుడు text ఎలా కనిపిస్తుంది?
Answer:
Text మందంగా లేదా bold గా కనిపిస్తుంది.
Quick Revision
font-sizetext పరిమాణాన్ని నియంత్రిస్తుంది.font-weighttext మందాన్ని నియంత్రిస్తుంది.font-size: 24px;వంటి declaration లో value తర్వాత unit ఇవ్వాలి.font-weight: normal;,font-weight: bold;,400,700వంటి values ఉపయోగించవచ్చు.- CSS rule సరైన HTML element లేదా class ను select చేస్తుందో తప్పకుండా పరిశీలించాలి.