Skip to content

Commit c57ebaa

Browse files
ajay-dhangarajay-dhangar
committed
started fonts and text prperties
1 parent 3d1a9d5 commit c57ebaa

File tree

3 files changed

+570
-0
lines changed

3 files changed

+570
-0
lines changed

Diff for: ‎docs/css/fonts-and-text-properties/_category_.json

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"label": "Fonts and Text Properties",
3+
"position": 9,
4+
"link": {
5+
"type": "generated-index",
6+
"description": "In this section, you will learn about the CSS Fonts and Text Properties. CSS Fonts and Text Properties are used to style the text content of an element. You can specify the font size, font family, font style, font weight, text color, text alignment, text decoration, text transformation, and more."
7+
}
8+
}

Diff for: ‎docs/css/fonts-and-text-properties/font-size.md

+354
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,354 @@
1+
---
2+
id: font-size
3+
title: "CSS Font Size"
4+
sidebar_label: "Font Size"
5+
sidebar_position: 1
6+
keywords:
7+
- css font size
8+
- font size css
9+
- css text size
10+
- css font size property
11+
- css font size example
12+
description: Learn how to set the font size of text using the CSS font-size property.
13+
tags:
14+
- css
15+
- font size
16+
- css font size
17+
- css text size
18+
- css font size property
19+
- css font size example
20+
---
21+
22+
In CSS, the `font-size` property is used to set the size of text content. You can specify the font size in various units such as pixels, ems, rems, percentages, and more. By adjusting the font size, you can control the visual appearance of text on your web page, making it larger or smaller as needed.
23+
24+
<AdsComponent />
25+
26+
## Syntax
27+
28+
The `font-size` property in CSS has the following syntax:
29+
30+
```css title="index.css"
31+
selector {
32+
font-size: value;
33+
}
34+
```
35+
36+
- `selector`: The CSS selector that targets the text content you want to apply the font size to.
37+
- `value`: The size of the text content. This can be specified in various units such as pixels (`px`), ems (`em`), rems (`rem`), percentages (`%`), and more.
38+
- The `font-size` property can be applied to any HTML element that contains text content, such as headings, paragraphs, and spans.
39+
- The `font-size` property affects the size of the text content but does not change the size of the element itself. It only adjusts the appearance of the text within the element.
40+
41+
<AdsComponent />
42+
43+
:::info Note
44+
The default font size for most browsers is `16px`. If you do not specify a font size for text content, it will be displayed at the browser's default size.
45+
:::
46+
47+
## Examples
48+
49+
### 1. Setting the Font Size in Pixels
50+
51+
You can set the font size of text content using pixels (`px`) as the unit of measurement. In the following example, we set the font size of a paragraph to `16px`:
52+
53+
<Tabs>
54+
<TabItem value="HTML" label="index.html">
55+
```html
56+
<!DOCTYPE html>
57+
<html lang="en">
58+
<head>
59+
<meta charset="UTF-8">
60+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
61+
<title>Font Size Example</title>
62+
<link rel="stylesheet" href="index.css">
63+
</head>
64+
<body>
65+
<p class="text">This is a paragraph with a font size of 16px.</p>
66+
</body>
67+
</html>
68+
```
69+
</TabItem>
70+
<TabItem value="CSS" label="index.css">
71+
```css
72+
.text {
73+
font-size: 16px;
74+
}
75+
```
76+
</TabItem>
77+
</Tabs>
78+
79+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
80+
<p style={{fontSize: "16px"}}>This is a paragraph with a font size of 16px.</p>
81+
</BrowserWindow>
82+
83+
### 2. Setting the Font Size in Em Units
84+
85+
You can also set the font size using ems (`em`) as the unit of measurement. The `em` unit is relative to the font size of the parent element. In the following example, we set the font size of a paragraph to `1.5em`, which is 1.5 times the font size of its parent element:
86+
87+
<Tabs>
88+
<TabItem value="HTML" label="index.html">
89+
```html
90+
<!DOCTYPE html>
91+
<html lang="en">
92+
<head>
93+
<meta charset="UTF-8">
94+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
95+
<title>Font Size Example</title>
96+
<link rel="stylesheet" href="index.css">
97+
</head>
98+
<body>
99+
<div class="parent">
100+
<p class="text">This is a paragraph with a font size of 1.5em.</p>
101+
</div>
102+
</body>
103+
</html>
104+
```
105+
</TabItem>
106+
<TabItem value="CSS" label="index.css">
107+
```css
108+
.parent {
109+
font-size: 20px;
110+
}
111+
112+
.text {
113+
font-size: 1.5em;
114+
}
115+
```
116+
</TabItem>
117+
</Tabs>
118+
119+
<BrowserWindow url="http://127.0.0.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
120+
<div style={{fontSize: "20px"}}>
121+
<p style={{fontSize: "1.5em"}}>This is a paragraph with a font size of 1.5em.</p>
122+
</div>
123+
</BrowserWindow>
124+
125+
<AdsComponent />
126+
127+
:::info Note
128+
When using em units, the font size of an element is calculated relative to the font size of its parent element. If the parent element does not have a specified font size, the browser's default font size (`16px`) is used as the reference.
129+
:::
130+
131+
### 3. Setting the Font Size in Percentages
132+
133+
You can specify the font size using percentages (`%`) as a relative unit of measurement. In the following example, we set the font size of a paragraph to `150%`, which is 1.5 times the default font size:
134+
135+
<Tabs>
136+
<TabItem value="HTML" label="index.html">
137+
```html
138+
<!DOCTYPE html>
139+
<html lang="en">
140+
<head>
141+
<meta charset="UTF-8">
142+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
143+
<title>Font Size Example</title>
144+
<link rel="stylesheet" href="index.css">
145+
</head>
146+
<body>
147+
<p class="text">This is a paragraph with a font size of 150%.</p>
148+
</body>
149+
</html>
150+
```
151+
</TabItem>
152+
<TabItem value="CSS" label="index.css">
153+
```css
154+
.text {
155+
font-size: 150%;
156+
}
157+
```
158+
</TabItem>
159+
</Tabs>
160+
161+
<BrowserWindow url="http://127.00.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
162+
<p style={{fontSize: "150%"}}>This is a paragraph with a font size of 150%.</p>
163+
</BrowserWindow>
164+
165+
### 4. Setting the Font Size Using Rem Units
166+
167+
You can also use rems (`rem`) as a relative unit of measurement for font size. The `rem` unit is relative to the font size of the root element (`<html>`). In the following example, we set the font size of a paragraph to `1.5rem`, which is 1.5 times the font size of the root element:
168+
169+
<Tabs>
170+
<TabItem value="HTML" label="index.html">
171+
```html
172+
<!DOCTYPE html>
173+
<html lang="en">
174+
<head>
175+
<meta charset="UTF-8">
176+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
177+
<title>Font Size Example</title>
178+
<link rel="stylesheet" href="index.css">
179+
</head>
180+
<body>
181+
<p class="text">This is a paragraph with a font size of 1.5rem.</p>
182+
</body>
183+
</html>
184+
```
185+
</TabItem>
186+
<TabItem value="CSS" label="index.css">
187+
```css
188+
.text {
189+
font-size: 1.5rem;
190+
}
191+
```
192+
</TabItem>
193+
</Tabs>
194+
195+
<BrowserWindow url="http://127.00.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
196+
<p style={{fontSize: "1.5rem"}}>This is a paragraph with a font size of 1.5rem.</p>
197+
</BrowserWindow>
198+
199+
<AdsComponent />
200+
201+
:::info Note
202+
When using rem units, the font size of an element is calculated relative to the font size of the root element (`<html>`). This makes it easier to maintain consistent font sizes across your web page.
203+
:::
204+
205+
### 5. Setting the Font Size Using Keywords
206+
207+
You can also use keywords to specify the font size. Common keywords include `small`, `medium`, `large`, and `x-large`. In the following example, we set the font size of a paragraph to `large`:
208+
209+
<Tabs>
210+
<TabItem value="HTML" label="index.html">
211+
```html
212+
<!DOCTYPE html>
213+
<html lang="en">
214+
<head>
215+
<meta charset="UTF-8">
216+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
217+
<title>Font Size Example</title>
218+
<link rel="stylesheet" href="index.css">
219+
</head>
220+
<body>
221+
<p class="text">This is a paragraph with a font size of large.</p>
222+
</body>
223+
</html>
224+
```
225+
</TabItem>
226+
<TabItem value="CSS" label="index.css">
227+
```css
228+
.text {
229+
font-size: large;
230+
}
231+
```
232+
</TabItem>
233+
</Tabs>
234+
235+
<BrowserWindow url="http://127.00.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
236+
<p style={{fontSize: "large"}}>This is a paragraph with a font size of large.</p>
237+
</BrowserWindow>
238+
239+
### 6. Setting the Font Size Using Viewport Units
240+
241+
You can also use viewport units (`vw`, `vh`, `vmin`, `vmax`) to specify the font size relative to the size of the viewport. In the following example, we set the font size of a paragraph to `5vw`, which is 5% of the viewport width:
242+
243+
<Tabs>
244+
<TabItem value="HTML" label="index.html">
245+
```html
246+
<!DOCTYPE html>
247+
<html lang="en">
248+
<head>
249+
<meta charset="UTF-8">
250+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
251+
<title>Font Size Example</title>
252+
<link rel="stylesheet" href="index.css">
253+
</head>
254+
<body>
255+
<p class="text">This is a paragraph with a font size of 5vw.</p>
256+
</body>
257+
</html>
258+
```
259+
</TabItem>
260+
<TabItem value="CSS" label="index.css">
261+
```css
262+
.text {
263+
font-size: 5vw;
264+
}
265+
```
266+
</TabItem>
267+
268+
</Tabs>
269+
270+
<BrowserWindow url="http://127.00.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
271+
<p style={{fontSize: "5vw"}}>This is a paragraph with a font size of 5vw.</p>
272+
</BrowserWindow>
273+
274+
:::info Note
275+
Viewport units (`vw`, `vh`, `vmin`, `vmax`) are relative to the size of the viewport. Using viewport units allows you to create responsive designs where text scales based on the size of the viewport.
276+
:::
277+
278+
<AdsComponent />
279+
280+
### 7. Setting the Font Size Using Absolute Units
281+
282+
You can also use absolute units such as `in` (inches), `cm` (centimeters), `mm` (millimeters), `pt` (points), and `pc` (picas) to specify the font size. In the following example, we set the font size of a paragraph to `12pt`:
283+
284+
<Tabs>
285+
<TabItem value="HTML" label="index.html">
286+
```html
287+
<!DOCTYPE html>
288+
<html lang="en">
289+
<head>
290+
<meta charset="UTF-8">
291+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
292+
<title>Font Size Example</title>
293+
<link rel="stylesheet" href="index.css">
294+
</head>
295+
<body>
296+
<p class="text">This is a paragraph with a font size of 12pt.</p>
297+
</body>
298+
</html>
299+
```
300+
</TabItem>
301+
<TabItem value="CSS" label="index.css">
302+
```css
303+
.text {
304+
font-size: 12pt;
305+
}
306+
```
307+
</TabItem>
308+
</Tabs>
309+
310+
<BrowserWindow url="http://127.00.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
311+
<p style={{fontSize: "12pt"}}>This is a paragraph with a font size of 12pt.</p>
312+
</BrowserWindow>
313+
314+
### 8. Setting the Font Size Using Custom Units
315+
316+
You can define custom units for font size using CSS variables. In the following example, we define a custom unit called `--custom-size` and set the font size of a paragraph using this custom unit:
317+
318+
<Tabs>
319+
<TabItem value="HTML" label="index.html">
320+
```html
321+
<!DOCTYPE html>
322+
<html lang="en">
323+
<head>
324+
<meta charset="UTF-8">
325+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
326+
<title>Font Size Example</title>
327+
<link rel="stylesheet" href="index.css">
328+
</head>
329+
<body>
330+
<p class="text">This is a paragraph with a custom font size.</p>
331+
</body>
332+
</html>
333+
```
334+
</TabItem>
335+
<TabItem value="CSS" label="index.css">
336+
```css
337+
:root {
338+
--custom-size: 24px;
339+
}
340+
341+
.text {
342+
font-size: var(--custom-size);
343+
}
344+
```
345+
</TabItem>
346+
</Tabs>
347+
348+
<BrowserWindow url="http://127.00.1:5500/index.html" bodyStyle={{ backgroundColor: "#fff", color: "#000"}}>
349+
<p style={{fontSize: "24px"}}>This is a paragraph with a custom font size.</p>
350+
</BrowserWindow>
351+
352+
## Conclusion
353+
354+
The `font-size` property in CSS allows you to control the size of text content on your web page. By specifying the font size using different units of measurement, you can adjust the appearance of text to suit your design requirements. Experiment with different font sizes to find the right balance between readability and aesthetics for your web content.

0 commit comments

Comments
 (0)