diff --git a/docs/css/fonts-and-text-properties/font-align.md b/docs/css/fonts-and-text-properties/font-align.md
new file mode 100644
index 000000000..694fcb636
--- /dev/null
+++ b/docs/css/fonts-and-text-properties/font-align.md
@@ -0,0 +1,296 @@
+---
+id: font-align
+title: "CSS Font Alignment"
+sidebar_label: "Font Alignment"
+sidebar_position: 8
+tags: ["css", "font alignment", "css font alignment", "css text alignment", "css text properties"]
+description: Learn how to use the CSS `text-align` property to align text within a container on your web page.
+keywords:
+ - css text alignment
+ - css text align
+ - css text alignment property
+ - css text alignment values
+ - css text alignment examples
+---
+
+In CSS, the `text-align` property is used to specify the horizontal alignment of text within a container. It allows you to control the positioning of text elements on your web page, aligning them to the left, right, center, or justified within their containing block.
+
+
+
+The `text-align` property accepts several values that determine the alignment of text. By using this property, you can create visually appealing layouts by aligning text elements according to your design requirements.
+
+## Syntax
+
+The `text-align` property in CSS has the following syntax:
+
+```css title="index.css"
+selector {
+ text-align: value;
+}
+```
+
+- `selector`: The CSS selector that targets the text element you want to align.
+- `value`: A keyword value that specifies the horizontal alignment of the text. The `text-align` property accepts the following values:
+ - `left`: Aligns the text to the left.
+ - `right`: Aligns the text to the right.
+ - `center`: Centers the text horizontally.
+ - `justify`: Stretches the lines of text so that each line has equal width, except for the last line.
+ - `start`: Aligns the text to the start of the line, based on the text direction.
+ - `end`: Aligns the text to the end of the line, based on the text direction.
+ - `inherit`: Inherits the text alignment from the parent element.
+
+Using these values, you can control the alignment of text elements within their containing block, ensuring that they are positioned correctly according to your layout requirements.
+
+## Examples
+
+### 1. Aligning Text to the Center
+
+You can use the `text-align` property to center-align text within a container. In the following example, we center-align a heading element:
+
+
+
+ ```html
+
+
+
+
+
+ Centered Text
+
+
+
+
+
+
+:::info Informaton
+
+The `text-align` property can be applied to various text elements, such as headings, paragraphs, and spans, to create different visual styles.
+
+:::
+
+
+
+### 2. Justifying Text
+
+You can use the `text-align` property with the `justify` value to justify-align text within a container. In the following example, we justify-align a paragraph element:
+
+
+
+ ```html
+
+
+
+
+
+ Justified Text
+
+
+
+
This is a paragraph with justified text. Justified text stretches the lines so that each line has equal width.
This is a paragraph with justified text. Justified text stretches the lines so that each line has equal width.
+
+
+### 3. Aligning Text to the Right
+
+You can use the `text-align` property with the `right` value to right-align text within a container. In the following example, we right-align a paragraph element:
+
+
+
+ ```html
+
+
+
+
+
+ Right-Aligned Text
+
+
+
+
+
+
+:::note try it yourself
+
+Experiment with different text alignment values to see how they affect the layout of text elements on your web page.
+
+:::
+
+
+
+### 4. Aligning Text to the Left
+
+You can use the `text-align` property with the `left` value to left-align text within a container. In the following example, we left-align a paragraph element:
+
+
+
+ ```html
+
+
+
+
+
+ Left-Aligned Text
+
+
+
+
+
+
+### 5. Aligning Text Based on Text Direction
+
+You can use the `text-align` property with the `start` and `end` values to align text based on the text direction. In the following example, we align a paragraph element to the start and end of the line:
+
+
+
+ ```html
+
+
+
+
+
+ Text Alignment Based on Text Direction
+
+
+
+
This is a paragraph with text aligned to the start.
This is a paragraph with text aligned to the start.
+
This is a paragraph with text aligned to the end.
+
+
+
+:::note try it yourself
+
+Experiment with different text alignment values to see how they affect the layout of text elements on your web page.
+
+:::
+
+### 6. Inheriting Text Alignment
+
+You can use the `text-align` property with the `inherit` value to inherit the text alignment from the parent element. In the following example, we inherit the text alignment for a paragraph element:
+
+
+
+ ```html
+
+
+
+
+
+ Inherited Text Alignment
+
+
+
+
+
+
+:::tip Extra Tip
+
+The `text-align` property can be combined with other CSS properties to create complex text layouts and designs. Experiment with different combinations to achieve the desired visual effects.
+
+:::
+
+## Conclusion
+
+The `text-align` property in CSS is a powerful tool for aligning text elements within a container. By using this property with different values, you can control the horizontal alignment of text on your web page, creating visually appealing layouts that enhance the readability and aesthetics of your content. Experiment with the `text-align` property to achieve the desired text alignment for your web projects.
\ 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
index 1e4cf6ea9..385375f7d 100644
--- a/docs/css/fonts-and-text-properties/font-size.md
+++ b/docs/css/fonts-and-text-properties/font-size.md
@@ -2,7 +2,7 @@
id: font-size
title: "CSS Font Size"
sidebar_label: "Font Size"
-sidebar_position: 1
+sidebar_position: 2
keywords:
- css font size
- font size css
diff --git a/docs/css/fonts-and-text-properties/font-style.md b/docs/css/fonts-and-text-properties/font-style.md
new file mode 100644
index 000000000..487233944
--- /dev/null
+++ b/docs/css/fonts-and-text-properties/font-style.md
@@ -0,0 +1,152 @@
+---
+id: font-style
+title: "CSS Font Style"
+sidebar_label: "Font Style"
+sidebar_position: 7
+keywords:
+ - css font style
+ - css font style property
+ - css font style values
+ - css font style examples
+ - css text properties
+description: Learn how to use the CSS `font-style` property to style the italic or oblique text on your web page.
+tags:
+ - css
+ - font style
+ - css font style
+ - css font style property
+ - css font style values
+ - css text properties
+---
+
+In CSS, the `font-style` property is used to specify the style of a font, such as italic or oblique. It allows you to apply different text styles to your web page, making text elements appear italicized or slanted as needed. The `font-style` property accepts several values that control the appearance of text, providing you with flexibility in styling your content.
+
+
+
+## Syntax
+
+The `font-style` property in CSS has the following syntax:
+
+```css title="index.css"
+selector {
+ font-style: normal | italic | oblique;
+}
+```
+
+The `font-style` property can be applied to any text element on your web page using the appropriate selector. It accepts the following values:
+
+- `normal`: The default value. The text is displayed in a standard, upright style.
+- `italic`: The text is displayed in an italic style, which is typically a slanted version of the normal font.
+- `oblique`: The text is displayed in an oblique style, which is similar to italic but less common.
+- `initial`: Sets the property to its default value.
+- `inherit`: Inherits the property from its parent element.
+
+## Example
+
+Let's look at an example to see how the `font-style` property works in CSS:
+
+
+
+ ```html
+
+
+
+
+
+ Font Style Example
+
+
+
+
+
+
+
+:::note try it yourself
+
+Experiment with different font styles to see how they affect the appearance of text elements on your web page.
+
+:::
+
+
+
+## Inheriting Font Style
+
+When you apply the `font-style` property to a parent element, its value is inherited by its child elements. This means that if you set the `font-style` property on a container element, such as a `div` or `section`, all text elements inside that container will inherit the specified font style.
+
+Here's an example that demonstrates how font style inheritance works in CSS:
+
+
+
+ ```html
+
+
+
+
+
+ Inherited Font Style
+
+
+
+
+
This text inherits the font style from the parent.
This text inherits the font style from the parent.
+
+
+
+
+:::note try it yourself
+
+Try changing the font style value on the parent element to see how it affects the child elements that inherit the font style.
+
+:::
+
+## Conclusion
+
+The `font-style` property in CSS allows you to control the style of text elements on your web page, making them appear italicized or oblique as needed. By using the `font-style` property with different values, you can customize the appearance of text to suit your design requirements. Additionally, font style inheritance provides a convenient way to apply consistent styling to text elements within a container.
\ 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
index 12bfa98d1..ce3a6c103 100644
--- a/docs/css/fonts-and-text-properties/font-weight.md
+++ b/docs/css/fonts-and-text-properties/font-weight.md
@@ -2,7 +2,7 @@
id: font-weight
title: "CSS Font Weight"
sidebar_label: "Font Weight"
-sidebar_position: 2
+sidebar_position: 3
keywords:
- css font weight
- font weight css
diff --git a/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.md b/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.md
new file mode 100644
index 000000000..7d7521a58
--- /dev/null
+++ b/docs/css/fonts-and-text-properties/generic-vs-specific-font-families.md
@@ -0,0 +1,88 @@
+---
+id: generic-vs-specific-font-families
+title: "CSS Generic vs. Specific Font Families"
+sidebar_label: "Generic vs. Specific Font Families"
+sidebar_position: 1
+keywords:
+ - css font families
+ - css generic font families
+ - css specific font families
+ - css font-family property
+ - css font-family values
+description: Learn the difference between generic and specific font families in CSS and how to use them to style text on your web page.
+tags:
+ - css
+ - font families
+ - css font families
+ - css generic font families
+ - css specific font families
+ - css font-family property
+ - css font-family values
+---
+
+In CSS, font families are used to define the typeface or font style that should be applied to text elements on a web page. There are two types of font families you can use in CSS: generic font families and specific font families. Understanding the difference between these two types of font families is essential for styling text effectively and ensuring consistent typography across your website.
+
+
+
+## Generic Font Families
+
+Generic font families are broad categories of fonts that share similar characteristics and styles. They provide a general description of the type of font to be used, allowing the browser to choose an appropriate font based on the category specified. Generic font families are useful when you want to define a fallback font that can be used if a specific font is not available on the user's system.
+
+The following are the five generic font families defined in CSS:
+
+1. `serif`: Fonts that have decorative strokes at the ends of characters. Examples include Times New Roman, Georgia, and Palatino.
+2. `sans-serif`: Fonts that do not have decorative strokes at the ends of characters. Examples include Arial, Helvetica, and Verdana.
+3. `monospace`: Fonts where each character occupies the same amount of horizontal space. Examples include Courier New, Consolas, and Monaco.
+4. `cursive`: Fonts that mimic handwriting styles. Examples include Comic Sans MS and Brush Script.
+5. `fantasy`: Fonts that are decorative and often unconventional. Examples include Impact and Papyrus.
+
+When using generic font families in CSS, you can specify multiple font families as fallback options in case the user's system does not have the primary font installed. For example, you can define a font stack that includes a specific font family followed by a generic font family as a fallback:
+
+```css title="index.css"
+selector {
+ font-family: 'Open Sans', sans-serif;
+}
+```
+
+In this example, the font stack specifies 'Open Sans' as the primary font family and `sans-serif` as the fallback font family. If 'Open Sans' is not available, the browser will use a sans-serif font instead.
+
+## Specific Font Families
+
+Specific font families, also known as named font families, refer to fonts that are identified by their unique names or font families. These fonts are typically custom or web fonts that are loaded from external sources or included in the web page using `@font-face` rules. Specific font families allow you to use custom fonts that are not available on the user's system, ensuring consistent typography across different devices and browsers.
+
+To use a specific font family in CSS, you need to define the font family name or font stack that includes the specific font family as follows:
+
+```css title="index.css"
+@font-face {
+ font-family: 'MyCustomFont';
+ src: url('mycustomfont.woff2') format('woff2');
+}
+
+selector {
+ font-family: 'MyCustomFont', sans-serif;
+}
+```
+
+In this example, we define a specific font family named 'MyCustomFont' using the `@font-face` rule and specify the source of the font file. We then apply the 'MyCustomFont' font family to a selector, with `sans-serif` as the fallback font family.
+
+Specific font families give you the flexibility to use unique fonts in your web designs, enhancing the visual appeal of your text elements and creating a distinctive typographic style for your website.
+
+By understanding the difference between generic and specific font families in CSS, you can effectively style text elements on your web page and choose the appropriate font families to achieve the desired typographic effects. Whether you need a fallback font for broader compatibility or a custom font for a unique design, CSS font families provide you with the tools to create visually appealing and consistent typography for your website.
+
+## Differences Between Generic and Specific Font Families
+
+The key differences between generic and specific font families in CSS are as follows:
+
+|No. | Feature | Generic Font Families | Specific Font Families |
+|----|-------------------------|-----------------------|------------------------|
+|1. | Definition | Broad categories of fonts with similar characteristics. | Unique fonts identified by their names or font families. |
+|2. | Usage | Used as fallback options when specific fonts are not available. | Used to apply custom or web fonts to text elements. |
+|3. | Examples | `serif`, `sans-serif`, `monospace`, `cursive`, `fantasy`. | `MyCustomFont`, `Open Sans`, `Roboto`, etc. |
+|4. | Availability | Widely available on most systems and browsers. | Requires loading custom fonts from external sources. |
+|5. | Compatibility | Ensures consistent text rendering across different devices. | Enhances visual appeal and design uniqueness. |
+
+Understanding these differences will help you make informed decisions when choosing font families for your web projects and ensure that your text elements are displayed correctly and consistently across various platforms.
+
+## Conclusion
+
+Font families play a crucial role in defining the visual appearance of text on a web page. By using generic font families as fallback options and specific font families for custom fonts, you can ensure that your text elements are displayed consistently across different devices and browsers. Experiment with different font families to find the right combination that suits your design requirements and enhances the readability and aesthetics of your content.
\ No newline at end of file