From c57ebaa24c50429972eab0d68ebd1fa07240dfae Mon Sep 17 00:00:00 2001 From: Ajay-Dhangar Date: Tue, 4 Feb 2025 17:02:17 +0530 Subject: [PATCH] started fonts and text prperties --- .../fonts-and-text-properties/_category_.json | 8 + .../fonts-and-text-properties/font-size.md | 354 ++++++++++++++++++ .../fonts-and-text-properties/font-weight.md | 208 ++++++++++ 3 files changed, 570 insertions(+) create mode 100644 docs/css/fonts-and-text-properties/_category_.json create mode 100644 docs/css/fonts-and-text-properties/font-size.md create mode 100644 docs/css/fonts-and-text-properties/font-weight.md diff --git a/docs/css/fonts-and-text-properties/_category_.json b/docs/css/fonts-and-text-properties/_category_.json new file mode 100644 index 000000000..f95fc456e --- /dev/null +++ b/docs/css/fonts-and-text-properties/_category_.json @@ -0,0 +1,8 @@ +{ + "label": "Fonts and Text Properties", + "position": 9, + "link": { + "type": "generated-index", + "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." + } + } \ No newline at end of file diff --git a/docs/css/fonts-and-text-properties/font-size.md b/docs/css/fonts-and-text-properties/font-size.md new file mode 100644 index 000000000..1e4cf6ea9 --- /dev/null +++ b/docs/css/fonts-and-text-properties/font-size.md @@ -0,0 +1,354 @@ +--- +id: font-size +title: "CSS Font Size" +sidebar_label: "Font Size" +sidebar_position: 1 +keywords: + - css font size + - font size css + - css text size + - css font size property + - css font size example +description: Learn how to set the font size of text using the CSS font-size property. +tags: + - css + - font size + - css font size + - css text size + - css font size property + - css font size example +--- + +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. + + + +## Syntax + +The `font-size` property in CSS has the following syntax: + +```css title="index.css" +selector { + font-size: value; +} +``` + +- `selector`: The CSS selector that targets the text content you want to apply the font size to. +- `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. +- The `font-size` property can be applied to any HTML element that contains text content, such as headings, paragraphs, and spans. +- 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. + + + +:::info Note +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. +::: + +## Examples + +### 1. Setting the Font Size in Pixels + +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`: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a font size of 16px.

+ + + ``` + + + ```css + .text { + font-size: 16px; + } + ``` + + + + +

This is a paragraph with a font size of 16px.

+ + +### 2. Setting the Font Size in Em Units + +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: + + + + ```html + + + + + + Font Size Example + + + +
+

This is a paragraph with a font size of 1.5em.

+
+ + + ``` + + + ```css + .parent { + font-size: 20px; + } + + .text { + font-size: 1.5em; + } + ``` + + + + +
+

This is a paragraph with a font size of 1.5em.

+
+ + + + +:::info Note +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. +::: + +### 3. Setting the Font Size in Percentages + +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: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a font size of 150%.

+ + + ``` + + + ```css + .text { + font-size: 150%; + } + ``` + + + + +

This is a paragraph with a font size of 150%.

+ + +### 4. Setting the Font Size Using Rem Units + +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 (``). 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: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a font size of 1.5rem.

+ + + ``` + + + ```css + .text { + font-size: 1.5rem; + } + ``` + + + + +

This is a paragraph with a font size of 1.5rem.

+ + + + +:::info Note +When using rem units, the font size of an element is calculated relative to the font size of the root element (``). This makes it easier to maintain consistent font sizes across your web page. +::: + +### 5. Setting the Font Size Using Keywords + +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`: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a font size of large.

+ + + ``` + + + ```css + .text { + font-size: large; + } + ``` + + + + +

This is a paragraph with a font size of large.

+ + +### 6. Setting the Font Size Using Viewport Units + +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: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a font size of 5vw.

+ + + ``` + + + ```css + .text { + font-size: 5vw; + } + ``` + + + + + +

This is a paragraph with a font size of 5vw.

+ + +:::info Note +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. +::: + + + +### 7. Setting the Font Size Using Absolute Units + +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`: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a font size of 12pt.

+ + + ``` + + + ```css + .text { + font-size: 12pt; + } + ``` + + + + +

This is a paragraph with a font size of 12pt.

+ + +### 8. Setting the Font Size Using Custom Units + +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: + + + + ```html + + + + + + Font Size Example + + + +

This is a paragraph with a custom font size.

+ + + ``` + + + ```css + :root { + --custom-size: 24px; + } + + .text { + font-size: var(--custom-size); + } + ``` + + + + +

This is a paragraph with a custom font size.

+ + +## Conclusion + +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. \ No newline at end of file diff --git a/docs/css/fonts-and-text-properties/font-weight.md b/docs/css/fonts-and-text-properties/font-weight.md new file mode 100644 index 000000000..12bfa98d1 --- /dev/null +++ b/docs/css/fonts-and-text-properties/font-weight.md @@ -0,0 +1,208 @@ +--- +id: font-weight +title: "CSS Font Weight" +sidebar_label: "Font Weight" +sidebar_position: 2 +keywords: + - css font weight + - font weight css + - css bold text + - css font weight property + - css font weight values +description: Learn how to use the CSS `font-weight` property to control the thickness of text in your web page. +tags: + - css + - font weight + - css font weight + - css bold text + - css font weight property + - css font weight values +--- + +In CSS, the `font-weight` property is used to specify the thickness or boldness of a font. It allows you to control the visual weight of text elements on your web page, making them appear lighter or bolder as needed. The `font-weight` property accepts a variety of values that range from `100` (thin) to `900` (bold), providing you with fine-grained control over the appearance of text. + + + +## Syntax + +The `font-weight` property in CSS has the following syntax: + +```css title="index.css" +selector { + font-weight: value; +} +``` + +- `selector`: The CSS selector that targets the text element you want to apply the font weight to. +- `value`: A numeric or keyword value that represents the thickness of the font. The `font-weight` property accepts the following values: + - `normal`: Sets the font weight to the normal level (equivalent to `400`). + - `bold`: Sets the font weight to a bold level (equivalent to `700`). + - `bolder`: Increases the font weight relative to the parent element. + - `lighter`: Decreases the font weight relative to the parent element. + - `100` to `900`: Numeric values that represent the font weight, with `100` being the thinnest and `900` being the boldest. + +## Examples + +### 1. Setting the Font Weight to Bold + +You can use the `font-weight` property to make text elements appear bold by setting the value to `bold`. In the following example, we make a paragraph element bold: + + + + ```html + + + + + + Bold Text + + + +

This text is bold.

+ + + ``` + + + ```css + .bold-text { + font-weight: bold; + } + ``` + + + + +

This text is bold.

+ + +:::info Informaton + +The `font-weight` property can be applied to various text elements, such as headings, paragraphs, and spans, to create different visual styles. + +::: + + + +### 2. Using Numeric Values for Font Weight + +You can specify the font weight using numeric values ranging from `100` to `900`. In the following example, we set the font weight of a heading element to `700` (bold): + + + + ```html + + + + + + Bold Heading + + + +

This is a bold heading.

+ + + ``` + + + ```css + .bold-heading { + font-weight: 700; + } + ``` + + + + +

This is a bold heading.

+ + +### 3. Adjusting Font Weight Relative to Parent Element + +You can use the `bolder` and `lighter` values to adjust the font weight relative to the parent element. In the following example, we make a paragraph element lighter than its parent: + + + + ```html + + + + + + Lighter Text + + + +
+

This text is lighter than the parent.

+
+ + + ``` + + + ```css + .parent-element { + font-weight: bold; + } + + .lighter-text { + font-weight: lighter; + } + ``` + + + + +
+

This text is lighter than the parent.

+
+ + +:::info Note + +The `bolder` and `lighter` values adjust the font weight relative to the parent element's font weight. If the parent element has a font weight of `normal`, the `bolder` value will make the text bold, while the `lighter` value will make it lighter. + +::: + +### 4. Using `font-weight` with Other Properties + +You can combine the `font-weight` property with other text properties to create custom text styles. In the following example, we set the font weight, font size, and font family of a paragraph element: + + + + ```html + + + + + + Custom Text Style + + + +

This is custom text.

+ + + ``` + + + ```css + .custom-text { + font-weight: bold; + font-size: 1.2em; + font-family: Arial, sans-serif; + } + ``` + + + + +

This is custom text.

+ + +## Conclusion + +The `font-weight` property in CSS allows you to control the thickness of text elements on your web page, making them appear lighter or bolder as needed. By using the `font-weight` property with different values, you can create visually appealing text styles that enhance the readability and aesthetics of your content. Experiment with the `font-weight` property to find the right balance of boldness for your text elements. \ No newline at end of file