diff --git a/docs/css/_category_.json b/docs/css/_category_.json
new file mode 100644
index 0000000..6da1ba5
--- /dev/null
+++ b/docs/css/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "CSS",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the CSS."
+ }
+}
diff --git a/docs/css/backgrounds/_category_.json b/docs/css/backgrounds/_category_.json
new file mode 100644
index 0000000..cbc33a5
--- /dev/null
+++ b/docs/css/backgrounds/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Backgrounds",
+ "position": 4,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the CSS Backgrounds. CSS backgrounds are used to specify the background of an element. You can specify backgrounds using different methods such as background-color, background-image, background-repeat, background-attachment, background-position, and more."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-color.md b/docs/css/backgrounds/background-color.md
new file mode 100644
index 0000000..09793e9
--- /dev/null
+++ b/docs/css/backgrounds/background-color.md
@@ -0,0 +1,113 @@
+---
+id: background-color
+title: Background Color
+sidebar_label: Background Color
+sidebar_position: 1
+tags: [background, color, css background, background color]
+description: Learn how to set the background color of an element in CSS using the background-color property.
+keywords:
+ [
+ background color,
+ css background color,
+ background-color property,
+ css background-color,
+ ]
+---
+
+In CSS, the `background-color` property is used to set the background color of an element. The `background-color` property accepts a color value, which can be specified using various color formats such as hexadecimal, RGB, RGBA, HSL, and HSLA.
+
+
+
+## Syntax
+
+The syntax for the `background-color` property is as follows:
+
+```css title="index.css"
+selector {
+ background-color: color;
+}
+```
+
+- `selector`: The element to which the background color is applied.
+- `background-color`: The CSS property used to set the background color of an element.
+- `color`: The color value used to specify the background color.
+- The `color` value can be specified using various color formats, such as hexadecimal, RGB, RGBA, HSL, and HSLA.
+- The `color` value can also be specified using color keywords like `red`, `blue`, `green`, etc.
+
+## Example
+
+In the following example, the `background-color` property is used to set the background color of a `
` element to a light blue color using the hexadecimal color format:
+
+```css title="index.css"
+div {
+ background-color: #ADD8E6; /* Light blue color */
+}
+```
+
+In the HTML code below, the CSS rule will apply the light blue color to the background of the `
` element:
+
+```html title="index.html"
+
This is a div with a light blue background.
+```
+
+By using the `background-color` property, you can customize the background color of elements on your web page to create visually appealing designs.
+
+
+
+:::info Additional Information
+
+- The `background-color` property sets the background color of an element, covering the entire content area of the element.
+- The `background-color` property can be combined with other background properties like `background-image`, `background-repeat`, `background-position`, etc., to create more complex background effects.
+- When setting the background color of an element, ensure that there is enough contrast between the background color and the text color to ensure readability and accessibility.
+
+:::
+
+## Example for Background Color
+
+In this example, we will set the background color of a `
` element using the `background-color` property with an RGB color value:
+
+
+
+
+```html showLineNumbers
+
+
+
+
+
+ Background Color Example
+
+
+
+
This is a div with a light green background.
+
+
+```
+
+
+
+
+```css showLineNumbers {2}
+div {
+ background-color: rgb(144, 238, 144); /* Light green color */
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+<>
+
This is a div with a light green background.
+
+
+
+In this example, the `background-color` property is used to set the background color of the `
` element to a light green color using the RGB color format.
+
+By specifying the background color using the `background-color` property, you can enhance the visual appearance of your web pages and create engaging user experiences.
+
+## Conclusion
+
+The `background-color` property in CSS allows you to set the background color of an element using various color formats. By customizing the background color of elements on your web page, you can create visually appealing designs and improve the overall user experience.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/_category_.json b/docs/css/backgrounds/background-image/_category_.json
new file mode 100644
index 0000000..02a8df9
--- /dev/null
+++ b/docs/css/backgrounds/background-image/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Background Image",
+ "position": 2,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the CSS Background Image. The background-image property sets one or more background images for an element. By default, a background-image is placed at the top-left corner of an element, and repeated both vertically and horizontally."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-attachment.md b/docs/css/backgrounds/background-image/background-attachment.md
new file mode 100644
index 0000000..010adf2
--- /dev/null
+++ b/docs/css/backgrounds/background-image/background-attachment.md
@@ -0,0 +1,134 @@
+---
+id: background-attachment
+title: Background Attachment
+sidebar_label: Background Attachment
+sidebar_position: 4
+tags: [background, css background, background attachment, background-attachment property]
+description: Learn how to set the background attachment behavior of an element in CSS using the background-attachment property.
+keywords:
+ [
+ background attachment,
+ css background attachment,
+ background-attachment property,
+ css background-attachment,
+ ]
+---
+
+In CSS, the `background-attachment` property is used to specify whether the background image of an element scrolls with the content or remains fixed as the content moves. This property is used to control the attachment behavior of the background image.
+
+
+
+## Syntax
+
+The syntax for the `background-attachment` property is as follows:
+
+```css title="index.css"
+selector {
+ background-attachment: value;
+}
+```
+
+- `selector`: The element to which the background attachment behavior is applied.
+- `background-attachment`: The CSS property used to set the background attachment behavior of an element.
+- `value`: Specifies the attachment behavior of the background image. It can take one of the following values:
+ - `scroll`: The background image scrolls along with the content when the content is scrolled.
+ - `fixed`: The background image remains fixed within the viewport as the content is scrolled.
+ - `local`: The background image scrolls along with the element's contents, rather than the entire page.
+ - `initial`: Sets the background attachment behavior to its default value.
+- The default value of the `background-attachment` property is `scroll`.
+
+## Example
+
+In the following example, the `background-attachment` property is used to set the background attachment behavior of a `
` element to `fixed`, which makes the background image remain fixed within the viewport as the content is scrolled:
+
+```css title="index.css"
+div {
+ background-image: url('path/to/background-image.jpg');
+ background-attachment: fixed;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `fixed` background attachment behavior to the background image of the `
` element:
+
+```html title="index.html"
+
This is a div with a fixed background image.
+```
+
+By using the `background-attachment` property, you can control how the background image behaves when the content is scrolled, allowing you to create various visual effects on your web page.
+
+
+
+:::info Additional Information
+
+- The `background-attachment` property is often used in combination with the `background-image` property to set a background image and define its attachment behavior.
+- The `background-attachment` property can be used to create effects like parallax scrolling, where the background image moves at a different speed than the content, creating a sense of depth.
+
+:::
+
+## Example for background-attachment property
+
+In this example, we have a `
` element with a background image that has the `background-attachment` property set to `fixed`. This makes the background image remain fixed within the viewport as the content is scrolled:
+
+
+
+
+```html showLineNumbers
+
+
+
+
+
+ Background Attachment Example
+
+
+
+
+
Fixed Background Image
+
This is a div with a fixed background image.
+
+
+
+```
+
+
+
+
+```css showLineNumbers {3}
+div {
+ background-image: url('/assets/jpeg-image.jpg');
+ background-attachment: fixed;
+ color: white;
+ text-align: center;
+ padding: 20px;
+}
+
+h1 {
+ font-size: 2em;
+ margin-bottom: 0;
+}
+
+p {
+ font-size: 1.2em;
+ margin-top: 0;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+<>
+
Fixed Background Image
+
This is a div with a fixed background image.
+
+
+
+In this example, the background image remains fixed within the viewport as the content is scrolled, creating a visually appealing effect on the web page.
+
+
+
+## Conclusion
+
+The `background-attachment` property in CSS allows you to control the attachment behavior of the background image of an element. By setting the `background-attachment` property to `fixed`, `scroll`, `local`, or `initial`, you can create various visual effects on your web page. Experiment with different values of the `background-attachment` property to achieve the desired background image behavior for your elements.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-position.md b/docs/css/backgrounds/background-image/background-position.md
new file mode 100644
index 0000000..bad87f9
--- /dev/null
+++ b/docs/css/backgrounds/background-image/background-position.md
@@ -0,0 +1,144 @@
+---
+id: background-position
+title: Background Position
+sidebar_label: Background Position
+sidebar_position: 3
+tags: [background, css background, background position, background-position property]
+description: Learn how to set the position of the background image of an element in CSS using the background-position property.
+keywords:
+ [
+ background position,
+ css background position,
+ background-position property,
+ css background-position,
+ ]
+---
+
+In CSS, the `background-position` property is used to specify the position of the background image of an element. This property allows you to control the placement of the background image within the element's background area.
+
+
+
+## Syntax
+
+The syntax for the `background-position` property is as follows:
+
+```css title="index.css"
+selector {
+ background-position: value;
+}
+```
+
+- `selector`: The element to which the background position is applied.
+- `background-position`: The CSS property used to set the position of the background image of an element.
+- `value`: Specifies the position of the background image. It can take one of the following values:
+ - `top`: Aligns the top edge of the background image with the top edge of the background area.
+ - `bottom`: Aligns the bottom edge of the background image with the bottom edge of the background area.
+ - `left`: Aligns the left edge of the background image with the left edge of the background area.
+ - `right`: Aligns the right edge of the background image with the right edge of the background area.
+ - `center`: Aligns the background image in the center of the background area.
+ - ``: Specifies the position of the background image as a percentage of the background area.
+ - ``: Specifies the position of the background image using a length value (e.g., `10px`, `20%`).
+ - `initial`: Sets the background position to its default value.
+ - `inherit`: Inherits the background position from the parent element.
+
+The default value of the `background-position` property is `0% 0%`, which aligns the top left corner of the background image with the top left corner of the background area.
+
+## Example
+
+In the following example, the `background-position` property is used to set the position of the background image of a `
` element to `center`, which aligns the background image in the center of the background area:
+
+```css title="index.css"
+div {
+ background-image: url("path/to/background-image.jpg");
+ background-position: center;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `center` background position to the background image of the `
` element:
+
+```html title="index.html"
+
+
+ This is a div with a background image that is centered within the background area.
+
+
+```
+
+By using the `background-position` property, you can control the placement of the background image within the element's background area, allowing you to create visually appealing designs on your web page.
+
+
+
+:::note Try it yourself
+
+You can experiment with different values of the `background-position` property to position the background image in various ways within the background area of an element. Try changing the `background-position` value to `top`, `bottom`, `left`, `right`, or a specific length or percentage to see how the background image placement changes.
+
+:::
+
+
+## Example for Background Position
+
+In this example, we will demonstrate how to use the `background-position` property to position the background image of a `
` element to the top right corner of the background area.
+
+### Step 1: Create an HTML File
+
+Create an HTML file named `index.html` and add the following code:
+
+```html title="index.html" showLineNumbers
+
+
+
+
+
+ Background Position Example
+
+
+
+
+
+ This is a div with a background image positioned at the top right corner.
+
+
+
+
+```
+
+### Step 2: Create a CSS File
+
+Create a CSS file named `styles.css` and add the following code to set the background image and position:
+
+```css title="styles.css" showLineNumbers {3}
+div {
+ background-image: url("/assets/jpeg-image.jpg");
+ background-position: top right;
+ height: 200px;
+ width: 400px;
+ border: 1px solid #333;
+ background-size: cover; color: #fff;
+}
+
+p {
+ padding: 10px;
+}
+```
+
+### Step 3: Add a Background Image
+
+Place an image file named `jpeg-image.jpg` in the `assets` directory of your project.
+
+### Step 4: View the Output in a Browser
+
+Open the `index.html` file in a web browser to see the output. You will see a `
` element with a background image positioned at the top right corner of the background area.
+
+
+
+
+ This is a div with a background image positioned at the top right corner.
+
+
+
+
+By following these steps, you can use the `background-position` property to position the background image of an element at the top right corner of the background area.
+
+## Conclusion
+
+The `background-position` property in CSS allows you to control the placement of the background image within the background area of an element. By specifying the position using keywords, percentages, or length values, you can create visually appealing designs by positioning the background image as desired.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-repeat.md b/docs/css/backgrounds/background-image/background-repeat.md
new file mode 100644
index 0000000..a7a43fa
--- /dev/null
+++ b/docs/css/backgrounds/background-image/background-repeat.md
@@ -0,0 +1,137 @@
+---
+id: background-repeat
+title: Background Repeat
+sidebar_label: Background Repeat
+sidebar_position: 2
+tags: [background, css background, background repeat, background-repeat property]
+description: Learn how to control the repetition of a background image in CSS using the background-repeat property.
+keywords:
+ [
+ background repeat,
+ css background repeat,
+ background-repeat property,
+ css background-repeat,
+ ]
+---
+
+In CSS, the `background-repeat` property is used to specify how a background image is repeated within the background area of an element. This property allows you to control the repetition of the background image in both the horizontal and vertical directions.
+
+
+
+## Syntax
+
+The syntax for the `background-repeat` property is as follows:
+
+```css title="index.css"
+selector {
+ background-repeat: value;
+}
+```
+
+- `selector`: The element to which the background repeat is applied.
+- `background-repeat`: The CSS property used to control the repetition of the background image.
+- `value`: Specifies how the background image should be repeated. It can take one of the following values:
+ - `repeat`: The background image is repeated both horizontally and vertically to fill the background area.
+ - `repeat-x`: The background image is repeated horizontally to fill the background area.
+ - `repeat-y`: The background image is repeated vertically to fill the background area.
+ - `no-repeat`: The background image is displayed only once without any repetition.
+ - `initial`: Sets the background repeat to its default value.
+ - `inherit`: Inherits the background repeat value from the parent element.
+
+The default value of the `background-repeat` property is `repeat`.
+
+## Example
+
+In the following example, the `background-repeat` property is used to set the repetition of the background image of a `
` element to `repeat`, which repeats the background image both horizontally and vertically to fill the background area:
+
+```css title="index.css"
+div {
+ background-image: url("path/to/background-image.jpg");
+ background-repeat: repeat;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `repeat` background repeat to the background image of the `
` element:
+
+```html title="index.html"
+
+
+ This is a div with a background image that repeats both horizontally and vertically to fill the background area.
+
+
+```
+
+In this example, the background image will be repeated in both the horizontal and vertical directions to fill the background area of the `
` element. You can adjust the `background-repeat` property to control how the background image is repeated based on your design requirements.
+
+
+
+:::note Try it yourself
+
+Experiment with different values of the `background-repeat` property to see how the background image repetition changes. You can use values like `repeat-x`, `repeat-y`, and `no-repeat` to achieve different visual effects.
+
+:::
+
+## Example: Using `background-repeat` with `background-size`
+
+You can combine the `background-repeat` property with the `background-size` property to create more complex background image effects. For example, you can repeat a background image in one direction while scaling it to cover the background area. Here's an example:
+
+This example demonstrates the use of the `background-size` property to set the size of the background image of an element:
+
+
+
+
+```html showLineNumbers
+
+
+
+
+
+ Background Repeat Example
+
+
+
+
+
+ This is a div with a background image that repeats horizontally and scales to cover the background area.
+
+
+
+
+```
+
+
+
+
+```css showLineNumbers {3}
+div {
+ background-image: url("/assets/jpeg-image.jpg");
+ background-repeat: repeat-x;
+ background-size: cover;
+}
+
+p {
+ color: white;
+ font-size: 1.5rem;
+ text-align: center;
+ padding: 20px;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This is a div with a background image that repeats horizontally and scales to cover the background area.
+
+
+
+In this example, the `background-repeat` property is set to `repeat-x`, which repeats the background image horizontally to fill the background area of the `
` element. The `background-size` property is set to `cover`, which scales the background image to cover the entire background area while maintaining its aspect ratio.
+
+By combining the `background-repeat` and `background-size` properties, you can create visually appealing background effects for your web pages.
+
+## Conclusion
+
+The `background-repeat` property in CSS allows you to control how a background image is repeated within the background area of an element. By setting the `background-repeat` property to different values like `repeat`, `repeat-x`, `repeat-y`, or `no-repeat`, you can achieve various background image repetition effects based on your design requirements. Experiment with different values of the `background-repeat` property to create visually interesting background patterns for your web pages.
\ No newline at end of file
diff --git a/docs/css/backgrounds/background-image/background-size.md b/docs/css/backgrounds/background-image/background-size.md
new file mode 100644
index 0000000..035a54d
--- /dev/null
+++ b/docs/css/backgrounds/background-image/background-size.md
@@ -0,0 +1,134 @@
+---
+id: background-size
+title: Background Size
+sidebar_label: Background Size
+sidebar_position: 1
+tags: [background, css background, background size, background-size property]
+description: Learn how to set the size of the background image of an element in CSS using the background-size property.
+keywords:
+ [
+ background size,
+ css background size,
+ background-size property,
+ css background-size,
+ ]
+---
+
+In CSS, the `background-size` property is used to specify the size of the background image of an element. This property allows you to control how the background image is displayed within the element's background area.
+
+
+
+## Syntax
+
+The syntax for the `background-size` property is as follows:
+
+```css title="index.css"
+selector {
+ background-size: value;
+}
+```
+
+- `selector`: The element to which the background size is applied.
+- `background-size`: The CSS property used to set the size of the background image of an element.
+- `value`: Specifies the size of the background image. It can take one of the following values:
+ - `auto`: The browser automatically scales the background image to its original size.
+ - `cover`: The background image is scaled to cover the entire background area, maintaining its aspect ratio.
+ - `contain`: The background image is scaled to fit within the background area while maintaining its aspect ratio.
+ - ``: Specifies the width and height of the background image using a length value (e.g., `200px`, `50%`).
+ - ``: Specifies the width and height of the background image as a percentage of the background area.
+ - `initial`: Sets the background size to its default value.
+ - `inherit`: Inherits the background size from the parent element.
+
+The default value of the `background-size` property is `auto`.
+
+## Example
+
+In the following example, the `background-size` property is used to set the size of the background image of a `
` element to `cover`, which scales the background image to cover the entire background area while maintaining its aspect ratio:
+
+```css title="index.css"
+div {
+ background-image: url("path/to/background-image.jpg");
+ background-size: cover;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `cover` background size to the background image of the `
` element:
+
+```html title="index.html"
+
+ This is a div with a background image that covers the entire background area.
+
+```
+
+By using the `background-size` property, you can control how the background image is displayed within the element's background area, allowing you to create visually appealing designs on your web page.
+
+
+
+:::tip additional information
+
+**Aspect Ratio**: The aspect ratio of an image is the ratio of its width to its height. When using the `cover` or `contain` values for the `background-size` property, the aspect ratio of the background image is maintained while scaling to fit the background area.
+
+**Length Values**: Length values (e.g., `200px`, `50%`) can be used to specify the width and height of the background image. When using length values, the background image is scaled to the specified dimensions.
+
+The `background-size` property is particularly useful when working with responsive web design, as it allows you to control how the background image adapts to different screen sizes and devices.
+:::
+
+## Example for background-size property
+
+This example demonstrates the use of the `background-size` property to set the size of the background image of an element:
+
+
+
+
+```html showLineNumbers
+
+
+
+
+
+ Background Size Example
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis
+ sit amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices
+ ultricies. Nullam nec nunc nec nunc ultrices ultricies.
+
+
+
+
+```
+
+
+
+
+```css showLineNumbers {3}
+div {
+ background-image: url("/assets/jpeg-image.jpg");
+ background-size: cover;
+ padding: 20px;
+ color: white;
+ text-align: center;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis sit
+ amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices ultricies.
+ Nullam nec nunc nec nunc ultrices ultricies.
+
+
+
+In this example, the `background-size` property is set to `cover`, which scales the background image to cover the entire background area of the `
` element while maintaining its aspect ratio.
+
+## Conclusion
+
+The `background-size` property in CSS allows you to control the size of the background image of an element, enabling you to create visually appealing designs on your web page. By specifying the size of the background image using values like `cover`, `contain`, or length values, you can customize how the background image is displayed within the background area of an element.
\ No newline at end of file
diff --git a/docs/css/box-model/_category_.json b/docs/css/box-model/_category_.json
new file mode 100644
index 0000000..9ce7359
--- /dev/null
+++ b/docs/css/box-model/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Box Model",
+ "position": 5,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the CSS Box Model. The CSS Box Model is a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. The box model allows us to add a border around elements, and to define space between elements. The box model is used to create the layout design of a webpage."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/box-model/assets/BoxModelDiagram.css b/docs/css/box-model/assets/BoxModelDiagram.css
new file mode 100644
index 0000000..8a533c1
--- /dev/null
+++ b/docs/css/box-model/assets/BoxModelDiagram.css
@@ -0,0 +1,50 @@
+.box-model-diagram {
+ display: flex;
+ align-items: center;
+ flex-direction: column;
+}
+
+.box-model-diagram__margin {
+ background: #c2ba43c4;
+ border: 2px dashed #000;
+ padding: 10px;
+}
+
+.box-model-diagram__margin:hover {
+ background: transparent;
+}
+
+.box-model-diagram__border {
+ border: 2px solid #000;
+ margin: 10px;
+ padding: 10px 20px;
+ background: #9cf374;
+ color: #333;
+}
+
+.box-model-diagram__border:hover {
+ background: #9cf374a8;
+}
+
+.box-model-diagram__padding {
+ margin: 10px;
+ padding: 10px 20px;
+ border: 1px dashed #000;
+ background: #9fdbb8a8;
+ color: #333;
+}
+
+.box-model-diagram__padding:hover {
+ background: #9fdbb8;
+}
+
+.box-model-diagram__content {
+ margin: 10px;
+ padding: 10px 40px;
+ border: 1px solid #000;
+ background: #4edc89;
+}
+
+.box-model-diagram__content:hover {
+ background: #4edc89a8;
+}
\ No newline at end of file
diff --git a/docs/css/box-model/border-radius.md b/docs/css/box-model/border-radius.md
new file mode 100644
index 0000000..cd84261
--- /dev/null
+++ b/docs/css/box-model/border-radius.md
@@ -0,0 +1,140 @@
+---
+id: border-radius
+title: CSS Border Radius
+sidebar_label: Border Radius
+sidebar_position: 10
+keywords:
+ [
+ css border radius,
+ border radius property,
+ css border radius property,
+ css rounded corners,
+ css border radius values,
+ css border radius shorthand,
+ ]
+description: Learn how to use the CSS border-radius property to create rounded corners for elements in your web page layout.
+tags: [css, border radius, css border radius, border radius property, css border radius property]
+---
+
+In CSS, the `border-radius` property is used to create rounded corners for elements in your web page layout. Rounded corners soften the appearance of elements and can make your web page design more visually appealing. By adjusting the `border-radius` values, you can control the curvature of the corners and create different styles for your elements.
+
+
+
+## Syntax
+
+The syntax for the `border-radius` property is as follows:
+
+```css title="index.css"
+selector {
+ border-radius: value;
+}
+```
+
+- `selector`: The element to which the border radius is applied.
+- `border-radius`: The CSS property used to set the curvature of the corners of an element.
+- `value`: Specifies the border radius values for the top-left, top-right, bottom-right, and bottom-left corners of the element. It can take one of the following forms:
+ - ``: Specifies a fixed radius value in pixels (e.g., `10px`).
+ - ``: Specifies the radius value as a percentage of the width or height of the element.
+ - `initial`: Sets the border radius to its default value.
+ - `inherit`: Inherits the border radius value from the parent element.
+ - `unset`: Resets the border radius to its inherited value if it inherits from its parent, or to its initial value if not.
+ - `none`: Specifies that no border radius is applied to the element.
+ - `initial`: Sets the border radius to its default value.
+ - `inherit`: Inherits the border radius value from the parent element.
+ - `unset`: Resets the border radius to its inherited value if it inherits from its parent, or to its initial value if not.
+- `` or `` values can be specified for each corner individually in the following order:
+ - `border-radius: top-left top-right bottom-right bottom-left;`
+ - `border-radius: top-left/top-right bottom-right/bottom-left;`
+ - `border-radius: top-left/top-right/bottom-right/bottom-left;`
+ - `border-radius: top-left top-right/bottom-right bottom-left;`
+
+The default value of the `border-radius` property is `0`, which means the corners are square and have no curvature.
+
+## Example
+
+In the following example, the `border-radius` property is used to create a `
` element with rounded corners:
+
+```css title="index.css"
+div {
+ border-radius: 10px;
+}
+```
+
+In this example, the `border-radius` property sets the curvature of all four corners of the `
` element to `10px`, creating a rounded appearance for the element. You can adjust the `border-radius` value to create different levels of curvature for the corners of your elements.
+
+```html title="index.html"
+
+```
+
+In the HTML code above, the CSS rule will apply the specified `border-radius` value to the `
` element, resulting in rounded corners for the element.
+
+By using the `border-radius` property, you can create visually appealing designs with rounded corners for elements in your web page layout. Rounded corners can help soften the appearance of elements and add a touch of elegance to your web page design.
+
+
+
+:::note Try it yourself
+Experiment with different values of the `border-radius` property to see how the curvature of the corners changes based on the specified radius values.
+:::
+
+## Example for `border-radius` Property
+
+In the following example, the `border-radius` property is used to create a `
+
+```
+
+
+
+
+```css
+div {
+ border-radius: 10px;
+ background-color: lightblue;
+ padding: 20px;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+ This is a div with rounded corners.
+
+
+
+
+In this example, the `border-radius` property is used to create rounded corners for the `
` element, giving it a softer appearance. The `border-radius` value of `10px` sets the curvature of the corners, creating a rounded effect for the element.
+
+By adjusting the `border-radius` value, you can control the level of curvature for the corners of elements in your web page layout. This allows you to customize the appearance of elements and create visually appealing designs with rounded corners.
+
+:::info Try it yourself
+
+You can experiment with different `border-radius` values to create various styles of rounded corners for elements in your web page layout. Try changing the `border-radius` value in the example above to see how it affects the curvature of the corners of the `
` element.
+:::
+
+By following this example, you can use the `border-radius` property to create rounded corners for elements in your web page layout. Rounded corners can enhance the visual appeal of your design and add a touch of elegance to your web page elements.
+
+## Conclusion
+
+The `border-radius` property in CSS allows you to create rounded corners for elements in your web page layout. By setting the curvature of the corners using the `border-radius` property, you can soften the appearance of elements and create visually appealing designs with rounded corners. Experiment with different `border-radius` values to customize the curvature of the corners and create unique styles for your web page elements.
\ No newline at end of file
diff --git a/docs/css/box-model/border.md b/docs/css/box-model/border.md
new file mode 100644
index 0000000..e669a3c
--- /dev/null
+++ b/docs/css/box-model/border.md
@@ -0,0 +1,136 @@
+---
+id: border
+title: CSS Border
+sidebar_label: Border
+sidebar_position: 9
+keywords:
+ [
+ css border,
+ border property,
+ css border property,
+ css border styles,
+ css border width,
+ css border color,
+ css border shorthand,
+ border values,
+ ]
+description: Learn how to use the CSS border property to create borders around elements in your web page layout.
+tags: [css, border, css border, border property, css border property]
+---
+
+In CSS, the `border` property is used to create borders around elements in your web page layout. Borders are the lines that surround the content of an element and separate it from other elements on the page. By adjusting the border properties, you can control the appearance, style, width, and color of the borders to create visually appealing layouts.
+
+
+
+## Syntax
+
+The syntax for the `border` property is as follows:
+
+```css title="index.css"
+selector {
+ border: value;
+}
+```
+
+- `selector`: The element to which the border is applied.
+- `border`: The CSS property used to set the border around an element.
+- `value`: Specifies the border values for the style, width, and color of the border. It can take one of the following forms:
+ - ``: Specifies the style of the border (e.g., `solid`, `dashed`, `dotted`, `double`, etc.).
+ - ``: Specifies the width of the border in pixels, em, rem, etc.
+ - ``: Specifies the color of the border using a color name, hex code, RGB value, etc.
+ - `initial`: Sets the border to its default value.
+ - `inherit`: Inherits the border value from the parent element.
+ - `unset`: Resets the border to its inherited value if it inherits from its parent, or to its initial value if not.
+
+The `border` property can be set using one of the following shorthand values:
+
+- `border: value;`: Sets the same border style, width, and color for all four sides.
+- `border: width style color;`: Sets the border width, style, and color for all four sides.
+- `border: initial;`: Sets the border to its default value.
+- `border: inherit;`: Inherits the border value from the parent element.
+- `border: unset;`: Resets the border to its inherited value if it inherits from its parent, or to its initial value if not.
+- `border-top: value;`: Sets the border style, width, and color for the top side.
+- `border-right: value;`: Sets the border style, width, and color for the right side.
+- `border-bottom: value;`: Sets the border style, width, and color for the bottom side.
+- `border-left: value;`: Sets the border style, width, and color for the left side.
+- `border-width: value;`: Sets the border width for all four sides.
+- `border-style: value;`: Sets the border style for all four sides.
+- `border-color: value;`: Sets the border color for all four sides.
+
+The default value of the `border` property is `none`, which means no border is applied to the element.
+
+## Example
+
+In the following example, the `border` property is used to set a solid border around a `
` element with a width of `2px` and a color of `red`:
+
+```css title="index.css"
+div {
+ border: 2px solid red;
+}
+```
+
+In this example, the border around the `
` element will have a solid style, a width of `2px`, and a color of `red`. You can customize the border style, width, and color to achieve the desired visual effect for your web page layout.
+
+
+
+:::note Note
+The `border` property can be combined with other border-related properties such as `border-radius` to create more complex border effects like rounded corners.
+:::
+
+## Example for border property
+
+### Example 1: Setting Border Style, Width, and Color
+
+In this example, we set the border style to `dashed`, the width to `3px`, and the color to `blue` for a `
+
+
+```
+
+
+
+
+```css title="styles.css"
+div {
+ border: 3px dashed blue;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+ This is a div element with a dashed border.
+
+
+
+
+By following this example, you can use the `border` property to create borders around elements in your web page layout. Adjusting the border style, width, and color allows you to customize the appearance of the borders to match your design requirements.
+
+:::info try it yourself
+You can experiment with different border styles, widths, and colors to create unique border effects for your web page elements. Try changing the border properties in the example above to see how they affect the appearance of the border around the `
` element.
+:::
+
+## Conclusion
+
+The `border` property in CSS is a powerful tool for creating borders around elements in your web page layout. By setting the border style, width, and color, you can control the appearance of the borders and enhance the visual appeal of your web pages. Experiment with different border styles and colors to create unique designs that make your content stand out.
\ No newline at end of file
diff --git a/docs/css/box-model/box-sizing.md b/docs/css/box-model/box-sizing.md
new file mode 100644
index 0000000..223e0bb
--- /dev/null
+++ b/docs/css/box-model/box-sizing.md
@@ -0,0 +1,160 @@
+---
+id: box-sizing
+title: CSS Box Sizing
+sidebar_label: Box Sizing
+sidebar_position: 2
+keywords: [css box sizing, box sizing, css box model, css box model box sizing]
+description: Learn how the CSS `box-sizing` property can be used to control the sizing behavior of elements in the CSS box model.
+tags: [css, box sizing, css box model, css box model box sizing]
+---
+
+In CSS, the `box-sizing` property is used to control the sizing behavior of elements in the CSS box model. By default, the size of an element is calculated based on its content area, padding, and border. However, the `box-sizing` property allows you to change this behavior and include the padding and border in the total width and height of the element.
+
+
+
+## Syntax
+
+The syntax for the `box-sizing` property is as follows:
+
+```css title="index.css"
+selector {
+ box-sizing: value;
+}
+```
+
+- `selector`: The element to which the box sizing is applied.
+- `box-sizing`: The CSS property used to control the sizing behavior of the element.
+- `value`: Specifies the sizing behavior of the element. It can take one of the following values:
+ - `content-box`: The default value. The width and height of the element are calculated based on the content area only.
+ - `border-box`: The width and height of the element include the padding and border, but not the margin.
+
+The default value of the `box-sizing` property is `content-box`.
+
+## Example
+
+In the following example, the `box-sizing` property is used to set the sizing behavior of a `
` element to `border-box`, which includes the padding and border in the total width and height of the element:
+
+```css title="index.css"
+div {
+ box-sizing: border-box;
+ width: 200px;
+ padding: 20px;
+ border: 1px solid black;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `border-box` sizing behavior to the `
` element, resulting in a total width of `200px` including the padding and border:
+
+```html title="index.html"
+
+```
+
+In this example, the total width of the `
` element will be `200px`, including the padding and border, due to the `border-box` value of the `box-sizing` property.
+
+
+
+:::note Try it yourself
+Experiment with different values of the `box-sizing` property to see how the sizing behavior of elements changes based on the box model.
+
+:::
+
+## Example for Box Sizing
+
+### Example 1: Using `content-box`
+
+In this example, the `box-sizing` property is set to `content-box`, which calculates the width and height of the element based on the content area only:
+
+
+
+
+```html title="index.html"
+
+
+
+
+ Box Sizing Example
+
+
+
+
+
+```
+
+
+
+
+```css title="index.css"
+div {
+ box-sizing: content-box;
+ width: 200px;
+ padding: 20px;
+ border: 1px solid black;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+In this example, the total width of the `
` element will be `242px`, calculated as `200px` for the width, `20px` for the left padding, `20px` for the right padding, and `1px` for the left and right borders, due to the `content-box` value of the `box-sizing` property.
+
+
+
+### Example 2: Using `border-box`
+
+In this example, the `box-sizing` property is set to `border-box`, which includes the padding and border in the total width and height of the element:
+
+
+
+
+```html title="index.html"
+
+
+
+
+ Box Sizing Example
+
+
+
+
+
+```
+
+
+
+
+
+```css title="index.css"
+div {
+ box-sizing: border-box;
+ width: 200px;
+ padding: 20px;
+ border: 1px solid black;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+In this example, the total width of the `
` element will be `200px`, including the padding and border, due to the `border-box` value of the `box-sizing` property.
+
+By using the `box-sizing` property, you can control how the width and height of elements are calculated in the CSS box model, allowing you to create more predictable and consistent layouts in your web pages.
+
+:::tip
+The `box-sizing` property is particularly useful when working with responsive web design, as it helps maintain the integrity of the layout when resizing elements or adjusting padding and borders.
+:::
+
+## Conclusion
+
+The `box-sizing` property in CSS allows you to control the sizing behavior of elements in the CSS box model. By setting the `box-sizing` property to `border-box`, you can include the padding and border in the total width and height of an element, making it easier to create consistent and predictable layouts in your web pages. Experiment with different values of the `box-sizing` property to see how they affect the sizing of elements and improve the responsiveness of your web designs.
\ No newline at end of file
diff --git a/docs/css/box-model/intro.md b/docs/css/box-model/intro.md
new file mode 100644
index 0000000..69204e9
--- /dev/null
+++ b/docs/css/box-model/intro.md
@@ -0,0 +1,81 @@
+---
+id: introdution
+title: Introduction to the CSS Box Model
+sidebar_label: Introduction
+sidebar_position: 1
+keywords: [css box model, box model, css layout, css box model introduction]
+description: Learn about the CSS box model and how it is used to layout elements on a web page.
+tags: [css, box model, css layout, css box model introduction]
+---
+
+import BoxModelDiagram from './script/BoxModelDiagram';
+
+In CSS, the **Box Model** is a fundamental concept that describes how elements are laid out on a web page. It consists of four main components: **content**, **padding**, **border**, and **margin**. Understanding the box model is essential for creating well-structured and visually appealing web layouts.
+
+
+
+The box model is used to calculate the size of an element, including its content area, padding, border, and margin. Each of these components plays a specific role in defining the layout and appearance of an element on the page.
+
+## Structure of the Box Model
+
+The box model can be visualized as a rectangular box that wraps around an element. The box consists of the following components:
+
+
+
+## Components of the Box Model
+
+The four components of the box model are as follows:
+
+1. **Content**: The content area is the innermost part of the box that contains the actual content of the element, such as text, images, or other media.
+2. **Padding**: The padding is the space between the content area and the border. It provides additional space around the content, helping to create separation between the content and the border.
+3. **Border**: The border is the outer edge of the box that surrounds the content and padding. It can be styled with different colors, widths, and styles to create visual effects.
+4. **Margin**: The margin is the space outside the border that separates the element from other elements on the page. It provides spacing between elements, helping to control the layout of the page.
+5. **Width and Height**: The width and height of an element are calculated based on the content area, padding, border, and margin. The total width of an element is the sum of the content width, padding, border, and margin.
+
+## Box Model Example
+
+Let's look at an example to illustrate how the box model works. Consider the following CSS code:
+
+```css title="styles.css"
+.box {
+ width: 200px;
+ height: 100px;
+ padding: 20px;
+ border: 2px solid black;
+ margin: 10px;
+}
+```
+
+In this example, we have defined a box with a width of `200px`, height of `100px`, padding of `20px`, border of `2px`, and margin of `10px`.
+
+The total width of the box can be calculated as follows:
+
+- Content width: `200px`
+- Padding: `20px` (left) + `20px` (right) = `40px`
+- Border: `2px` (left) + `2px` (right) = `4px`
+- Margin: `10px` (left) + `10px` (right) = `20px`
+- Total width: `200px` (content) + `40px` (padding) + `4px` (border) + `20px` (margin) = `264px`
+- Total height: `100px` (content) + `40px` (padding) + `4px` (border) + `20px` (margin) = `164px`
+- Total width and height of the box: `264px` x `164px`
+- Total area of the box: `43,296px`
+- Total perimeter of the box: `952px`
+
+By understanding the box model and how it works, you can create more effective and visually appealing web layouts. The box model is a powerful tool that allows you to control the size, spacing, and appearance of elements on a web page.
+
+In the next sections, we will explore each component of the box model in more detail and learn how to use them effectively in your CSS layouts.
+
+
+
+:::info Key Points
+
+- The CSS Box Model consists of four main components: **content**, **padding**, **border**, and **margin**.
+- The box model is used to calculate the size of an element, including its content area, padding, border, and margin.
+- Each component of the box model plays a specific role in defining the layout and appearance of an element on the page.
+- Understanding the box model is essential for creating well-structured and visually appealing web layouts.
+- The width and height of an element are calculated based on the content area, padding, border, and margin.
+
+:::
+
+## Conclusion
+
+The CSS Box Model is a fundamental concept that describes how elements are laid out on a web page. By understanding the box model and how it works, you can create more effective and visually appealing web layouts. Each component of the box model plays a specific role in defining the layout and appearance of an element on the page. In the next sections, we will explore each component of the box model in more detail and learn how to use them effectively in your CSS layouts.
\ No newline at end of file
diff --git a/docs/css/box-model/margin-callapse.md b/docs/css/box-model/margin-callapse.md
new file mode 100644
index 0000000..f8940e8
--- /dev/null
+++ b/docs/css/box-model/margin-callapse.md
@@ -0,0 +1,128 @@
+---
+id: margin-callapse
+title: "CSS Margin Collapse"
+sidebar_label: "Margin Collapse"
+sidebar_position: 8
+keywords:
+ - css margin collapse
+ - margin collapse
+ - css box model
+ - css box model margin collapse
+description: "Learn how CSS margin collapse works and how to prevent it in your web page layout."
+tags:
+ - css
+ - margin collapse
+ - css margin collapse
+ - css box model
+ - css box model margin collapse
+---
+
+In CSS, margin collapse is a phenomenon where the vertical margins of adjacent elements collapse into a single margin. This can lead to unexpected spacing between elements and affect the layout of your web page. Understanding how margin collapse works and how to prevent it is essential for creating consistent and visually appealing layouts.
+
+
+
+## How Margin Collapse Works
+
+Margin collapse occurs when the top and bottom margins of adjacent elements touch or overlap. In this case, the margins collapse into a single margin that is equal to the larger of the two margins. This behavior is defined in the CSS specification and is a common occurrence in web page layouts.
+
+Here are some key points to keep in mind about margin collapse:
+
+- Margin collapse only occurs between adjacent elements. If there is a non-collapsible element (e.g., an element with a border, padding, or inline content) between two elements, the margins will not collapse.
+- Margin collapse only affects vertical margins. Horizontal margins do not collapse.
+- Margin collapse does not occur between a parent element and its first or last child element. The margins of the parent and child elements do not collapse in this case.
+- Margin collapse does not occur between a parent element and an empty child element. The margins of the parent and empty child elements do not collapse.
+- Margin collapse does not occur between floated elements. The margins of floated elements do not collapse with other elements.
+- Margin collapse does not occur between absolutely positioned elements. The margins of absolutely positioned elements do not collapse with other elements.
+- Margin collapse does not occur between elements with a fixed height. The margins of elements with a fixed height do not collapse with other elements.
+
+## How to Prevent Margin Collapse
+
+To prevent margin collapse and control the spacing between elements in your web page layout, you can use the following techniques:
+
+### 1. Adding Padding or Border
+
+One way to prevent margin collapse is to add padding or a border to the element. By adding padding or a border, you create a non-collapsible space between the element and its adjacent elements, preventing the margins from collapsing.
+
+```css title="index.css"
+.element {
+ padding: 1px;
+}
+```
+
+### 2. Using `display: inline-block`
+
+Another way to prevent margin collapse is to use the `display: inline-block` property on the element. When an element is displayed as an inline-block, its margins do not collapse with adjacent elements, providing more control over the spacing between elements. (for example, when you have a `div` element with class `element` and you want to prevent margin collapse)
+
+```css title="index.css"
+.element {
+ display: inline-block;
+}
+```
+
+### 3. Using `overflow: hidden`
+
+You can also prevent margin collapse by using the `overflow: hidden` property on the parent element. This property creates a new block formatting context for the parent element, preventing the margins of its child elements from collapsing with other elements.
+
+```css title="index.css"
+.parent {
+ overflow: hidden;
+}
+```
+
+By using these techniques, you can prevent margin collapse and control the spacing between elements in your web page layout. This allows you to create more consistent and visually appealing designs by managing the margins of adjacent elements effectively.
+
+
+
+:::note Try it yourself
+Compare this snippet from [CSS Width and Height](/tutorial/css/box-model/width-height) to learn how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout.
+:::
+
+## Example for Margin Collapse
+
+In the following example, margin collapse occurs between two `
` elements with top and bottom margins. The margins collapse into a single margin, creating unexpected spacing between the elements:
+
+
+
+
+ ```html
+
+
+
+
+
+ Margin Collapse Example
+
+
+
+
Element 1
+
Element 2
+
+
+ ```
+
+
+
+ ```css
+ .element {
+ margin: 20px;
+ background-color: lightblue;
+ padding: 10px;
+ }
+ ```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
Element 1
+
Element 2
+
+
+In this example, the top and bottom margins of the two `
` elements collapse into a single margin, creating extra spacing between the elements. This can lead to unexpected layout issues and affect the visual appearance of your web page.
+
+By using the techniques mentioned above, you can prevent margin collapse and control the spacing between elements in your web page layout. This allows you to create more consistent and visually appealing designs by managing the margins of adjacent elements effectively.
+
+## Conclusion
+
+Margin collapse is a common phenomenon in CSS that can affect the spacing between elements in your web page layout. By understanding how margin collapse works and how to prevent it, you can create more consistent and visually appealing designs that provide a better user experience.
\ No newline at end of file
diff --git a/docs/css/box-model/margin.md b/docs/css/box-model/margin.md
new file mode 100644
index 0000000..40ccdc6
--- /dev/null
+++ b/docs/css/box-model/margin.md
@@ -0,0 +1,150 @@
+---
+id: margin
+title: CSS Margin
+sidebar_label: Margin
+sidebar_position: 3
+keywords:
+ [
+ css margin,
+ margin property,
+ css margin property,
+ css spacing,
+ margin shorthand,
+ margin values,
+ ]
+description: Learn how to use the CSS margin property to create space around elements in your web page layout.
+tags: [css, margin, css margin, margin property, css margin property]
+---
+
+In CSS, the `margin` property is used to create space around elements in your web page layout. Margins are the transparent spaces outside the border of an element that separate it from other elements on the page. By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts.
+
+
+
+## Syntax
+
+The syntax for the `margin` property is as follows:
+
+```css title="index.css"
+selector {
+ margin: value;
+}
+```
+
+- `selector`: The element to which the margin is applied.
+- `margin`: The CSS property used to set the margin around an element.
+- `value`: Specifies the margin values for the top, right, bottom, and left sides of the element. It can take one of the following forms:
+ - ``: Specifies a fixed margin value in pixels (e.g., `10px`).
+ - ``: Specifies a margin value as a percentage of the width of the containing element.
+ - `auto`: Adjusts the margin to automatically distribute the space between elements.
+ - `initial`: Sets the margin to its default value.
+ - `inherit`: Inherits the margin value from the parent element.
+ - `unset`: Resets the margin to its inherited value if it inherits from its parent, or to its initial value if not.
+
+The `margin` property can be set using one of the following shorthand values:
+
+- `margin: value;`: Sets the same margin value for all four sides.
+- `margin: vertical horizontal;`: Sets the vertical margin (top and bottom) and horizontal margin (left and right) to different values.
+- `margin: top right bottom left;`: Sets individual margin values for the top, right, bottom, and left sides.
+- `margin: initial;`: Sets the margin to its default value.
+- `margin: inherit;`: Inherits the margin value from the parent element.
+- `margin: unset;`: Resets the margin to its inherited value if it inherits from its parent, or to its initial value if not.
+- `margin-top: value;`: Sets the margin value for the top side.
+- `margin-right: value;`: Sets the margin value for the right side.
+- `margin-bottom: value;`: Sets the margin value for the bottom side.
+- `margin-left: value;`: Sets the margin value for the left side.
+- `margin-block-start: value;`: Sets the margin value for the block-start side (top margin in horizontal writing mode).
+- `margin-block-end: value;`: Sets the margin value for the block-end side (bottom margin in horizontal writing mode).
+
+The default value of the `margin` property is `0`, which means no margin is applied to the element.
+
+## Example
+
+In the following example, the `margin` property is used to set the margin around a `
` element to `20px` on all sides:
+
+```css title="index.css"
+div {
+ margin: 20px;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `20px` margin to the `
` element:
+
+```html title="index.html"
+
This is a div element with a 20px margin around it.
+```
+
+By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.
+
+
+
+:::info Additional Information
+
+**Margin Values:**
+
+- Margins are the transparent spaces around elements that separate them from other elements on the page.
+- The `margin` property is used to set the margin around an element.
+- Margin values can be specified in pixels, percentages, or using the `auto`, `initial`, `inherit`, or `unset` keywords.
+- The default value of the `margin` property is `0`, which means no margin is applied to the element.
+- The `margin` property can be set using shorthand values or individual properties for each side.
+- By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.
+- Margins are part of the CSS box model and are used to create space around elements in the layout.
+
+:::
+
+## Example for Margin
+
+Now, let's look at an example that demonstrates how the `margin` property can be used to create space around an element in a web page layout.
+
+
+
+
+```html
+
+
+
+
+
+
+ Margin Example
+
+
+
+
+
+ This is a div element with a 20px margin around it.
+
+
+
+
+```
+
+
+
+
+
+```css
+div {
+ margin: 20px;
+ padding: 10px;
+ border: 1px solid black;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+ This is a div element with a 20px margin around it.
+
+
+
+
+By following this example, you can use the `margin` property to create space around an element in your web page layout. Adjusting the margin values allows you to control the spacing between elements and create visually appealing designs.
+
+## Conclusion
+
+The `margin` property in CSS is a powerful tool for creating space around elements in your web page layout. By setting the margin values for an element, you can control the spacing between elements and create visually appealing designs. Understanding how to use the `margin` property effectively will help you create well-structured and visually appealing web pages.
\ No newline at end of file
diff --git a/docs/css/box-model/max-width-height.md b/docs/css/box-model/max-width-height.md
new file mode 100644
index 0000000..8746317
--- /dev/null
+++ b/docs/css/box-model/max-width-height.md
@@ -0,0 +1,132 @@
+---
+id: max-width-height
+title: "CSS Max-Width and Max-Height"
+sidebar_label: "Max-Width and Max-Height"
+sidebar_position: 7
+keywords:
+ - css max-width
+ - css max-height
+ - max-width property
+ - max-height property
+ - css sizing
+ - css dimensions
+ - css box model
+ - css box model max-width
+ - css box model max-height
+description: Learn how to use the CSS max-width and max-height properties to set the maximum dimensions of elements in your web page layout.
+tags:
+ - css
+ - max-width
+ - max-height
+ - max-width property
+ - max-height property
+---
+
+In CSS, the `max-width` and `max-height` properties are used to set the maximum dimensions of elements in your web page layout. The `max-width` property specifies the maximum width of an element, while the `max-height` property specifies the maximum height of an element. By adjusting the `max-width` and `max-height` values, you can ensure that elements do not become larger than a certain size, even if their content is larger.
+
+
+
+## Syntax
+
+The syntax for the `max-width` and `max-height` properties is as follows:
+
+```css title="index.css"
+selector {
+ max-width: value;
+ max-height: value;
+}
+```
+
+- `selector`: The element to which the maximum width and height are applied.
+- `max-width`: The CSS property used to set the maximum width of an element.
+- `max-height`: The CSS property used to set the maximum height of an element.
+- `value`: Specifies the maximum width and height values for the element. It can take one of the following forms:
+ - ``: Specifies a fixed maximum width or height value in pixels (e.g., `100px`).
+ - ``: Specifies the maximum width or height value as a percentage of the width or height of the containing element.
+ - `none`: Removes the maximum width or height restriction.
+ - `initial`: Sets the maximum width or height to its default value.
+ - `inherit`: Inherits the maximum width or height value from the parent element.
+ - `unset`: Resets the maximum width or height to its inherited value if it inherits from its parent, or to its initial value if not.
+ - `fit-content`: Specifies that the maximum width or height should be the minimum size needed to fit the content.
+ - `min-content`: Specifies that the maximum width or height should be the minimum size needed to fit the content, but not smaller than the `min-width` or `min-height` value.
+
+The default value of the `max-width` and `max-height` properties is `none`, which means there is no maximum width or height set for the element.
+
+## Example
+
+In the following example, the `max-width` and `max-height` properties are used to set the maximum dimensions of a `
` element to `300px` and `150px`, respectively:
+
+```css title="index.css"
+div {
+ max-width: 300px;
+ max-height: 150px;
+}
+```
+
+In this example, the `
` element will not grow larger than `300px` in width and `150px` in height, even if its content exceeds these dimensions. This can be useful when you want to prevent elements from expanding beyond a certain size in your layout.
+
+By using the `max-width` and `max-height` properties, you can control the maximum dimensions of elements in your web page layout and ensure that they do not become larger than a specified size. This can help you create more consistent and visually appealing designs by limiting the size of elements based on your design requirements.
+
+
+
+:::note Try it yourself
+Experiment with different values of the `max-width` and `max-height` properties to see how the maximum dimensions of elements change based on the box model.
+:::
+
+## Example for `max-width` and `max-height`
+
+In the following example, the `max-width` and `max-height` properties are used to set the maximum dimensions of a `
` element to `300px` and `150px`, respectively:
+
+
+
+
+```html
+
+
+
+
+
+ Max-Width and Max-Height Example
+
+
+
+
+
Max-Width and Max-Height Example with CSS
+
+
+
+```
+
+
+
+
+```css
+div {
+ max-width: 300px;
+ max-height: 150px;
+ background-color: lightblue;
+}
+
+h1, p {
+ padding: 10px;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
Max-Width and Max-Height Example with CSS
+
+
+
+In this example, the `
` element will not grow larger than `300px` in width and `150px` in height, even if its content exceeds these dimensions. The `max-width` and `max-height` properties ensure that the element maintains a maximum size on the page, providing a consistent layout for your web page design.
+
+By experimenting with different values for the `max-width` and `max-height` properties, you can control the maximum dimensions of elements in your web page layout and create visually appealing designs that adapt to various screen sizes and content lengths.
+
+## Conclusion
+
+By using the `max-width` and `max-height` properties, you can set the maximum dimensions of elements in your web page layout, ensuring that they do not become larger than a specified size. This can help you create more consistent and visually appealing designs by limiting the size of elements based on your design requirements. Experiment with different values for the `max-width` and `max-height` properties to see how they affect the layout of your web page and how you can use them to control the dimensions of elements effectively.
\ No newline at end of file
diff --git a/docs/css/box-model/min-width-height.md b/docs/css/box-model/min-width-height.md
new file mode 100644
index 0000000..489b957
--- /dev/null
+++ b/docs/css/box-model/min-width-height.md
@@ -0,0 +1,138 @@
+---
+id: min-width-height
+title: "CSS Min-Width and Min-Height"
+sidebar_label: "Min-Width and Min-Height"
+sidebar_position: 6
+keywords:
+ - css min-width
+ - css min-height
+ - min-width property
+ - min-height property
+ - css sizing
+ - css dimensions
+ - css box model
+ - css box model min-width
+ - css box model min-height
+description: Learn how to use the CSS min-width and min-height properties to set the minimum dimensions of elements in your web page layout.
+tags:
+ - css
+ - min-width
+ - min-height
+ - min-width property
+ - min-height property
+---
+
+In CSS, the `min-width` and `min-height` properties are used to set the minimum dimensions of elements in your web page layout. The `min-width` property specifies the minimum width of an element, while the `min-height` property specifies the minimum height of an element. By adjusting the `min-width` and `min-height` values, you can ensure that elements do not become smaller than a certain size, even if their content is smaller.
+
+
+
+## Syntax
+
+The syntax for the `min-width` and `min-height` properties is as follows:
+
+```css title="index.css"
+selector {
+ min-width: value;
+ min-height: value;
+}
+```
+
+- `selector`: The element to which the minimum width and height are applied.
+- `min-width`: The CSS property used to set the minimum width of an element.
+- `min-height`: The CSS property used to set the minimum height of an element.
+- `value`: Specifies the minimum width and height values for the element. It can take one of the following forms:
+ - ``: Specifies a fixed minimum width or height value in pixels (e.g., `100px`).
+ - ``: Specifies the minimum width or height value as a percentage of the width or height of the containing element.
+ - `auto`: Adjusts the minimum width or height automatically based on the content of the element.
+ - `initial`: Sets the minimum width or height to its default value.
+ - `inherit`: Inherits the minimum width or height value from the parent element.
+ - `unset`: Resets the minimum width or height to its inherited value if it inherits from its parent, or to its initial value if not.
+- `fit-content`: Specifies that the minimum width or height should be the minimum size needed to fit the content.
+- `min-content`: Specifies that the minimum width or height should be the minimum size needed to fit the content, but not smaller than the `min-width` or `min-height` value.
+- `max-content`: Specifies that the minimum width or height should be the maximum size needed to fit the content, but not larger than the `max-width` or `max-height` value.
+
+The default value of the `min-width` and `min-height` properties is `auto`, which means there is no minimum width or height set for the element.
+
+## Example
+
+In the following example, the `min-width` and `min-height` properties are used to set the minimum dimensions of a `
` element to `100px` and `50px`, respectively:
+
+```css title="index.css"
+div {
+ min-width: 100px;
+ min-height: 50px;
+}
+```
+
+In this example, the `
` element will not become smaller than `100px` in width and `50px` in height, even if its content is smaller. This ensures that the element maintains a minimum size on the page.
+
+## Browser Support
+
+The `min-width` and `min-height` properties are supported in all major browsers, including
+
+| Browsers |  |  |  |  |  |
+|----------|:----------------------------------:|:------------------------------------:|:----------------------------------:|:------------------------------:|:--------------------------------:|
+| Versions | Latest | Latest | Latest | Latest | Latest |
+
+For more information on browser support, you can refer to the [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/min-width) and [Can I use](https://caniuse.com/?search=min-width) websites.
+
+By using the `min-width` and `min-height` properties, you can ensure that elements in your web page layout maintain a minimum size, providing a better user experience and preventing content from becoming too small to read or interact with.
+
+
+
+:::info Additional Information
+Compare this snippet from [CSS Width and Height](/tutorial/css/box-model/width-height) to learn how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout.
+:::
+
+## Example for `min-width` and `min-height`
+
+In the following example, the `min-width` and `min-height` properties are used to set the minimum dimensions of a `
` element to `200px` and `100px`, respectively:
+
+
+
+
+```html
+
+
+
+
+
+ Min-Width and Min-Height Example
+
+
+
+
This is a div element with a minimum width of 200px and a minimum height of 100px.
+
+
+```
+
+
+
+
+```css
+div {
+ min-width: 200px;
+ min-height: 100px;
+ background-color: lightblue;
+ padding: 10px;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This is a div element with a minimum width of 200px and a minimum height of 100px.
+
+
+
+In this example, the `
` element will not become smaller than `200px` in width and `100px` in height, even if its content is smaller. The `min-width` and `min-height` properties ensure that the element maintains a minimum size on the page, providing a consistent layout for your web page design.
+
+By experimenting with different values for the `min-width` and `min-height` properties, you can control the minimum dimensions of elements in your web page layout and create visually appealing designs that adapt to various screen sizes and content lengths.
+
+## Conclusion
+
+In this guide, you learned how to use the CSS `min-width` and `min-height` properties to set the minimum dimensions of elements in your web page layout. By setting the `min-width` and `min-height` values, you can ensure that elements maintain a minimum size on the page, providing a better user experience and preventing content from becoming too small to read or interact with. Experiment with different values for the `min-width` and `min-height` properties to create visually appealing designs that adapt to various screen sizes and content lengths.
\ No newline at end of file
diff --git a/docs/css/box-model/padding.md b/docs/css/box-model/padding.md
new file mode 100644
index 0000000..5b1dc15
--- /dev/null
+++ b/docs/css/box-model/padding.md
@@ -0,0 +1,156 @@
+---
+id: padding
+title: CSS Padding
+sidebar_label: Padding
+sidebar_position: 4
+keywords:
+ [
+ css padding,
+ padding property,
+ css padding property,
+ css spacing,
+ padding shorthand,
+ padding values,
+ ]
+description: Learn how to use the CSS padding property to create space inside elements in your web page layout.
+tags: [css, padding, css padding, padding property, css padding property]
+---
+
+In CSS, the `padding` property is used to create space inside elements in your web page layout. Padding is the transparent space inside the border of an element that separates the content from the border. By adjusting the padding values, you can control the spacing between the content and the border of an element to create visually appealing layouts.
+
+
+
+## Syntax
+
+The syntax for the `padding` property is as follows:
+
+```css title="index.css"
+selector {
+ padding: value;
+}
+```
+
+- `selector`: The element to which the padding is applied.
+- `padding`: The CSS property used to set the padding inside an element.
+- `value`: Specifies the padding values for the top, right, bottom, and left sides of the element. It can take one of the following forms:
+ - ``: Specifies a fixed padding value in pixels (e.g., `10px`).
+ - ``: Specifies a padding value as a percentage of the width of the containing element.
+ - `initial`: Sets the padding to its default value.
+ - `inherit`: Inherits the padding value from the parent element.
+ - `unset`: Resets the padding to its inherited value if it inherits from its parent, or to its initial value if not.
+
+The `padding` property can be set using one of the following shorthand values:
+
+- `padding: value;`: Sets the same padding value for all four sides.
+- `padding: vertical horizontal;`: Sets the vertical padding (top and bottom) and horizontal padding (left and right) to different values.
+- `padding: top right bottom left;`: Sets individual padding values for the top, right, bottom, and left sides.
+- `padding: initial;`: Sets the padding to its default value.
+- `padding: inherit;`: Inherits the padding value from the parent element.
+- `padding: unset;`: Resets the padding to its inherited value if it inherits from its parent, or to its initial value if not.
+- `padding-top: value;`: Sets the padding value for the top side.
+- `padding-right: value;`: Sets the padding value for the right side.
+- `padding-bottom: value;`: Sets the padding value for the bottom side.
+- `padding-left: value;`: Sets the padding value for the left side.
+
+The default value of the `padding` property is `0`, which means no padding is applied to the element.
+
+## Example
+
+In the following example, the `padding` property is used to set the padding inside a `
` element to `20px` on all sides:
+
+```css title="index.css"
+div {
+ padding: 20px;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `20px` padding to the `
` element:
+
+```html title="index.html"
+
+
+ This is a div with 20px padding inside.
+
+
+```
+
+By adjusting the padding values, you can create space inside elements and control the spacing between the content and the border of an element in your web page layout.
+
+
+
+## Example for Padding
+
+In this example, we'll explore different ways to set padding values using the `padding` property.
+
+### Example 1: Using Fixed Padding Values
+
+In this example, the `padding` property is used to set fixed padding values for all four sides of a `
` element:
+
+```css title="index.css"
+div {
+ padding: 10px;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `10px` padding to the `
` element:
+
+```html title="index.html"
+
+
+ This is a div with 10px padding on all sides.
+
+
+```
+
+### Example 2: Using Different Padding Values
+
+In this example, the `padding` property is used to set different padding values for the top, right, bottom, and left sides of a `
` element:
+
+```css title="index.css"
+div {
+ padding: 10px 20px 15px 25px;
+}
+```
+
+In the HTML code below, the CSS rule will apply the different padding values to the `
` element:
+
+```html title="index.html"
+
+
+ This is a div with different padding values on each side.
+
+
+```
+
+### Example 3: Using Percentage Padding Values
+
+In this example, the `padding` property is used to set percentage-based padding values for all four sides of a `
` element:
+
+```css title="index.css"
+div {
+ padding: 5% 10% 7% 15%;
+}
+```
+
+In the HTML code below, the CSS rule will apply the percentage-based padding values to the `
` element:
+
+```html title="index.html"
+
+
+ This is a div with percentage-based padding values on all sides.
+
+
+```
+
+By using different padding values, you can create visually appealing layouts with varying amounts of space inside elements in your web page design.
+
+
+
+:::note Try it yourself
+Experiment with different padding values and combinations to see how the spacing inside elements changes based on the padding values applied.
+
+:::
+
+## Conclusion
+
+The `padding` property in CSS allows you to create space inside elements by specifying padding values for the top, right, bottom, and left sides of an element. By adjusting the padding values, you can control the spacing between the content and the border of an element, creating visually appealing layouts in your web page design. Experiment with different padding values to achieve the desired spacing and layout for your web page elements.
\ No newline at end of file
diff --git a/docs/css/box-model/script/BoxModelDiagram.jsx b/docs/css/box-model/script/BoxModelDiagram.jsx
new file mode 100644
index 0000000..037412f
--- /dev/null
+++ b/docs/css/box-model/script/BoxModelDiagram.jsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import '../assets/BoxModelDiagram.css';
+
+const BoxModelDiagram = () => {
+ return (
+
+
+ Margin
+ {/* Border */}
+
+ Border
+ {/* Padding */}
+
+ Padding
+ {/* Content */}
+
+ Content
+
+
+
+
+
+ );
+}
+
+export default BoxModelDiagram;
\ No newline at end of file
diff --git a/docs/css/box-model/width-height.md b/docs/css/box-model/width-height.md
new file mode 100644
index 0000000..b9a1db4
--- /dev/null
+++ b/docs/css/box-model/width-height.md
@@ -0,0 +1,280 @@
+---
+id: width-height
+title: CSS Width and Height
+sidebar_label: Width and Height
+sidebar_position: 5
+keywords:
+ [
+ css width,
+ css height,
+ width property,
+ height property,
+ css sizing,
+ css dimensions,
+ css box model,
+ css box model width,
+ css box model height,
+ ]
+description: Learn how to use the CSS width and height properties to control the dimensions of elements in your web page layout.
+tags: [css, width, height, css width, css height, width property, height property]
+---
+
+In CSS, the `width` and `height` properties are used to control the dimensions of elements in your web page layout. The `width` property specifies the width of an element, while the `height` property specifies the height of an element. By adjusting the `width` and `height` values, you can control the size of elements and create visually appealing layouts.
+
+
+
+## Syntax
+
+The syntax for the `width` and `height` properties is as follows:
+
+```css title="index.css"
+selector {
+ width: value;
+ height: value;
+}
+```
+
+- `selector`: The element to which the width and height are applied.
+- `width`: The CSS property used to set the width of an element.
+- `height`: The CSS property used to set the height of an element.
+- `value`: Specifies the width and height values for the element. It can take one of the following forms:
+ - ``: Specifies a fixed width or height value in pixels (e.g., `100px`).
+ - ``: Specifies the width or height value as a percentage of the width or height of the containing element.
+ - `auto`: Adjusts the width or height automatically based on the content of the element.
+ - `initial`: Sets the width or height to its default value.
+ - `inherit`: Inherits the width or height value from the parent element.
+ - `unset`: Resets the width or height to its inherited value if it inherits from its parent, or to its initial value if not.
+ - `fit-content`: Specifies that the width or height should be the minimum size needed to fit the content.
+ - `min-content`: Specifies that the width or height should be the minimum size needed to fit the content, but not smaller than the `min-width` or `min-height` value.
+ - `max-content`: Specifies that the width or height should be the maximum size needed to fit the content, but not larger than the `max-width` or `max-height` value.
+
+The default value of the `width` and `height` properties is `auto`, which means the width and height are automatically calculated based on the content of the element.
+
+## Example
+
+In the following example, the `width` and `height` properties are used to set the dimensions of a `
` element to `200px` and `100px`, respectively:
+
+```css title="index.css"
+div {
+ width: 200px;
+ height: 100px;
+ background-color: lightblue;
+}
+```
+
+In the HTML code below, the CSS rule will apply the specified width and height values to the `
` element, resulting in a width of `200px` and a height of `100px`:
+
+```html title="index.html"
+
+```
+
+In this example, the `
` element will have a width of `200px` and a height of `100px`, as specified by the `width` and `height` properties.
+
+
+
+:::note Try it yourself
+Experiment with different values of the `width` and `height` properties to see how the dimensions of elements change based on the box model.
+:::
+
+## Example for Width and Height
+
+### Example 1: Setting Fixed Width and Height
+
+In this example, the `width` and `height` properties are set to fixed values of `200px` and `100px`, respectively:
+
+
+
+
+```html
+
+
+
+
+
+ Fixed Width and Height
+
+
+
+
+
+
+```
+
+
+
+
+```css
+div {
+ width: 200px;
+ height: 100px;
+ background-color: lightblue;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+
+In this example, the `
` element will have a fixed width of `200px` and a fixed height of `100px`, resulting in a rectangular box with the specified dimensions.
+
+
+
+### Example 2: Using Percentage Values
+
+In this example, the `width` and `height` properties are set to percentage values of `50%` and `50%`, respectively:
+
+
+
+
+```html
+
+
+
+
+
+
+ Percentage Width and Height
+
+
+
+
+
+
+```
+
+
+
+
+```css
+div {
+ width: 50%;
+ height: 50%;
+ background-color: lightblue;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+
+In this example, the `
` element will have a width and height equal to `50%` of the width and height of the containing element, resulting in a square box that occupies half of the available space.
+
+
+
+### Example 3: Using `auto` Value
+
+In this example, the `width` and `height` properties are set to `auto`, which adjusts the dimensions of the element automatically based on its content:
+
+
+
+
+```html
+
+
+
+
+
+ Auto Width and Height
+
+
+
+
+
This is a div element with auto width and height.
+
+
+
+```
+
+
+
+
+```css
+div {
+ width: auto;
+ height: auto;
+ background-color: lightblue;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
This is a div element with auto width and height.
+
+
+
+In this example, the `
` element will automatically adjust its width and height based on the content inside it, resulting in a box that fits the content without any fixed dimensions.
+
+
+
+### Example 4: Using `min-content` and `max-content`
+
+In this example, the `width` property is set to `min-content` and the `height` property is set to `max-content`, which adjust the dimensions of the element based on the minimum and maximum size needed to fit the content:
+
+
+
+
+```html
+
+
+
+
+
+ Min and Max Content
+
+
+
+
+
This is a div element with min and max content width and height.
+
+
+
+```
+
+
+
+
+```css
+div {
+ width: min-content;
+ height: max-content;
+ background-color: lightblue;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
This is a div element with min and max content width and height.
+
+
+
+In this example, the `
` element will adjust its width to the minimum size needed to fit the content and its height to the maximum size needed to fit the content, resulting in a box that wraps around the content without any extra space.
+
+
+
+By following these examples, you can use the `width` and `height` properties to control the dimensions of elements in your web page layout. Adjusting the width and height values allows you to create visually appealing designs and responsive layouts that adapt to different screen sizes.
+
+## Conclusion
+
+In this guide, you learned how to use the CSS `width` and `height` properties to control the dimensions of elements in your web page layout. By setting the `width` and `height` values, you can adjust the size of elements and create visually appealing designs that enhance the user experience. Experiment with different values and combinations of the `width` and `height` properties to create responsive layouts that adapt to various screen sizes and devices.
\ No newline at end of file
diff --git a/docs/css/colors/_category_.json b/docs/css/colors/_category_.json
new file mode 100644
index 0000000..cc37574
--- /dev/null
+++ b/docs/css/colors/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Colors",
+ "position": 3,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the CSS Colors. CSS colors are used to specify the color of the text, backgrounds, borders, and other elements on a web page. You can specify colors using different methods such as color names, HEX values, RGB values, HSL values, and more."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/colors/color-names.md b/docs/css/colors/color-names.md
new file mode 100644
index 0000000..a1bae0e
--- /dev/null
+++ b/docs/css/colors/color-names.md
@@ -0,0 +1,200 @@
+---
+id: color-names
+title: Color Names
+sidebar_label: Color Names
+tags: [color, css, color-names]
+description: Color names are predefined names for colors that can be used in CSS to style elements.
+keywords:
+ [
+ color names,
+ css color names,
+ css colors,
+ css color names list,
+ ]
+sidebar_position: 1
+---
+
+In CSS, color names are predefined names for colors that can be used to style elements. Color names provide an easy way to specify colors in CSS without having to remember the hexadecimal (hex) or RGB values of the colors. There are 147 color names that are supported by all major browsers, and they can be used to set the color of text, backgrounds, borders, and other CSS properties.
+
+
+
+## Syntax
+
+The syntax for using color names in CSS is as follows:
+
+```css title="index.css"
+selector {
+ color: color-name;
+}
+```
+
+- `selector`: The element to which the color is applied.
+- `color`: The CSS property used to set the color of the text.
+- `color-name`: The predefined name of the color.
+- The color name is used to specify the color of the text, background, border, or other CSS properties.
+
+## Example
+
+In the following example, the color name `red` is used to set the color of the text to red:
+
+```css title="index.css"
+h1 {
+ color: red;
+}
+```
+
+In the HTML code below, the CSS rule will set the color of the `
` element to red:
+
+```html title="index.html"
+
This is a heading
+```
+
+:::info Additional Information
+
+- Color names provide an easy way to specify colors in CSS.
+- There are 147 color names that are supported by all major browsers.
+- Color names can be used to set the color of text, backgrounds, borders, and other CSS properties.
+- Color names are case-insensitive, meaning you can use uppercase, lowercase, or a combination of both when specifying color names.
+- Color names are an alternative to using hexadecimal (hex) or RGB values to specify colors in CSS.
+- Color names are useful for quickly setting the color of elements without having to remember specific color codes.
+- Color names are easy to remember and can be used to create visually appealing designs in CSS.
+- Color names are supported by all major browsers and provide a consistent way to specify colors across different platforms.
+
+:::
+
+
+
+### List of Common Color Names
+
+Here are some common CSS color names:
+
+- **Basic Colors**: `red`, `blue`, `green`, `yellow`, `black`, `white`, `gray`
+- **Shades of Red**: `darkred`, `firebrick`, `indianred`, `tomato`, `lightcoral`
+- **Shades of Blue**: `dodgerblue`, `deepskyblue`, `skyblue`, `lightblue`, `steelblue`
+- **Shades of Green**: `forestgreen`, `darkgreen`, `lightgreen`, `lime`, `darkolivegreen`
+- **Other Colors**: `gold`, `silver`, `peachpuff`, `plum`, `chocolate`, `orchid`, `coral`
+
+You can use these color names in your CSS stylesheets to set the color of elements and create visually appealing designs. Color names provide a convenient way to specify colors in CSS and make it easier to work with colors in web development projects.
+
+
+
+### Example: Using Color Names
+
+In the following example, the color name `blue` is used to set the color of the text to blue:
+
+
+
+```html title="index.html"
+
+
+
+
+
+ Color Names Example
+
+
+
+
Welcome to Color Names
+
This is an example of using color names in CSS.
+
+
+```
+
+
+```css title="styles.css"
+h1 {
+ color: blue;
+}
+
+p {
+ color: darkred;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
Welcome to Color Names
+
This is an example of using color names in CSS.
+
+
+
+In this example, the color names `blue` and `darkred` are used to set the color of the `
` and `
` elements, respectively. The `
` element will have blue text, while the `
` element will have dark red text.
+
+Color names are a convenient way to specify colors in CSS and can be used to create visually appealing designs in web development projects.
+
+
+
+:::note Extra Information
+**1. How many way to use color in CSS?**
+ - There are several ways to specify colors in CSS:
+ - Using color names: Predefined names for colors (e.g., `red`, `blue`, `green`).
+ - Using hexadecimal (hex) values: A six-digit code that represents the RGB values of a color (e.g., `#ff0000` for red).
+ - Using RGB values: An RGB color value is specified with the `rgb()` function, which takes three parameters (e.g., `rgb(255, 0, 0)` for red).
+ - Using RGBA values: An RGBA color value is specified with the `rgba()` function, which takes four parameters (e.g., `rgba(255, 0, 0, 0.5)` for red with 50% opacity).
+ - Using HSL values: An HSL color value is specified with the `hsl()` function, which takes three parameters (e.g., `hsl(0, 100%, 50%)` for red).
+ - Using HSLA values: An HSLA color value is specified with the `hsla()` function, which takes four parameters (e.g., `hsla(0, 100%, 50%, 0.5)` for red with 50% opacity).
+
+**2. What are the advantages of using color names in CSS?**
+
+ - Color names provide an easy and intuitive way to specify colors in CSS.
+ - Color names are easy to remember and use, making it convenient to work with colors in web development projects.
+ - Color names are supported by all major browsers, ensuring consistent color rendering across different platforms.
+ - Color names can be used to set the color of text, backgrounds, borders, and other CSS properties.
+ - Color names are an alternative to using hexadecimal (hex) or RGB values to specify colors in CSS.
+ - Color names are useful for quickly setting the color of elements without having to remember specific color codes.
+ - Color names can be combined with other CSS properties to create visually appealing designs in web development projects.
+
+**3. Are color names case-sensitive in CSS?**
+
+ - No, color names are case-insensitive in CSS, meaning you can use uppercase, lowercase, or a combination of both when specifying color names.
+ - For example, `red`, `RED`, and `Red` are all valid ways to specify the color red using the color name in CSS.
+ - Color names are not case-sensitive, so you can use any combination of uppercase and lowercase letters when specifying color names in CSS.
+
+**4. Can color names be used with other CSS properties?**
+
+ - Yes, color names can be used with other CSS properties to style elements in web pages.
+ - Color names can be combined with properties like `background-color`, `border-color`, `text-decoration`, and more to create visually appealing designs.
+ - Color names can be used to set the color of text, backgrounds, borders, and other CSS properties in web development projects.
+ - By using color names with other CSS properties, you can customize the appearance of elements and create engaging user interfaces.
+
+**5. How many color names are supported in CSS?**
+
+ - There are 147 color names that are supported by all major browsers in CSS.
+ - These color names provide a wide range of colors that can be used to style elements in web pages.
+ - Color names are a convenient way to specify colors in CSS and make it easier to work with colors in web development projects.
+ - Color names are supported by all major browsers, ensuring consistent color rendering across different platforms.
+
+**6. Can color names be used in combination with other color values in CSS?**
+
+ - Yes, color names can be used in combination with other color values like hexadecimal (hex), RGB, RGBA, HSL, and HSLA values in CSS.
+ - Color names can be combined with other color values to create complex color schemes and gradients in web development projects.
+ - By using color names in combination with other color values, you can achieve a wide range of colors and effects in your CSS stylesheets.
+ - Color names provide a simple and intuitive way to work with colors in CSS and can be easily combined with other color values to create visually appealing designs.
+
+**7. Are color names supported by all browsers?**
+
+ - Yes, color names are supported by all major browsers, including Chrome, Firefox, Safari, Edge, and Opera.
+ - Color names provide a consistent way to specify colors in CSS across different platforms and ensure that colors are rendered correctly in web pages.
+ - Color names are widely supported and can be used to set the color of text, backgrounds, borders, and other CSS properties in web development projects.
+ - By using color names, you can create visually appealing designs that are consistent across different browsers and devices.
+
+**8. How can color names be used to create visually appealing designs in CSS?**
+
+ - Color names can be used to set the color of text, backgrounds, borders, and other CSS properties in web pages.
+ - By combining color names with other CSS properties like `background-color`, `border-color`, `text-decoration`, and more, you can create visually appealing designs.
+ - Color names provide a simple and intuitive way to work with colors in CSS and make it easy to create engaging user interfaces.
+ - Color names can be used to create color schemes, gradients, and effects that enhance the visual appeal of web pages.
+ - By using color names creatively in your CSS stylesheets, you can design attractive and user-friendly interfaces for your web development projects.
+
+:::
+
+By using color names in CSS, you can easily set the color of elements in your web pages and create visually appealing designs. Color names provide a simple and intuitive way to work with colors in CSS and are supported by all major browsers.
+
+## Conclusion
+
+Color names are predefined names for colors that can be used in CSS to style elements. By using color names, you can specify the color of text, backgrounds, borders, and other CSS properties without having to remember specific color codes. Color names provide a convenient way to work with colors in CSS and make it easier to create visually appealing designs in web development projects.
\ No newline at end of file
diff --git a/docs/css/colors/css/style.css b/docs/css/colors/css/style.css
new file mode 100644
index 0000000..c50ef89
--- /dev/null
+++ b/docs/css/colors/css/style.css
@@ -0,0 +1,5 @@
+.color-box {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+ }
\ No newline at end of file
diff --git a/docs/css/colors/hex.md b/docs/css/colors/hex.md
new file mode 100644
index 0000000..f8df82d
--- /dev/null
+++ b/docs/css/colors/hex.md
@@ -0,0 +1,180 @@
+---
+id: hex
+title: Hex Color Values
+sidebar_label: Hex Color Values
+tags: [color, hex, css color, hex color]
+description: Hex color values are used to specify colors in CSS using hexadecimal notation.
+keywords:
+ [
+ hex color values,
+ css hex color values,
+ css color values,
+ hex color,
+ ]
+sidebar_position: 3
+---
+
+In CSS, hex color values are used to specify colors using hexadecimal notation. Hex color values are represented by a `#` character followed by a six-digit hexadecimal number. The hexadecimal number is composed of three pairs of digits, each pair representing the intensity of the red, green, and blue color channels, respectively. Hex color values allow you to specify a wide range of colors by adjusting the intensity of the red, green, and blue color channels.
+
+
+
+## Syntax
+
+The syntax for hex color values is as follows:
+
+```css title="index.css"
+selector {
+ color: #RRGGBB;
+}
+```
+
+- `selector`: The element to which the hex color value is applied.
+- `color`: The CSS property used to specify the color of an element.
+- `#`: The `#` character represents the hex color value.
+- `RR`: The intensity of the red color channel (00 to FF).
+- `GG`: The intensity of the green color channel (00 to FF).
+- `BB`: The intensity of the blue color channel (00 to FF).
+
+:::info Additional Information
+**1. Hexadecimal Notation:** Hex color values are represented using hexadecimal notation, which allows you to specify colors using a combination of numbers and letters. (0-9, A-F)
+
+**2. Color Channels:** Hex color values consist of three pairs of digits, each pair representing the intensity of the red, green, and blue color channels, respectively.
+
+**3. Wide Range of Colors:** Hex color values allow you to create a wide range of colors by adjusting the intensity of the red, green, and blue color channels.
+
+**4. Shortened Hex Values:** Hex color values can be shortened if the three pairs of digits are the same. For example, `#FF0000` can be shortened to `#F00` for red.
+
+**5. Transparency:** Hex color values can also include an additional pair of digits to represent the alpha channel for transparency. For example, `#RRGGBBAA` represents a color with transparency.
+
+**6. Browser Support:** Hex color values are widely supported by all modern web browsers.
+
+**7. Color Picker Tools:** There are online tools and color picker applications that allow you to choose colors and generate their corresponding hex values.
+
+By using hex color values, you can easily specify colors in CSS and create visually appealing designs for your web pages.
+
+:::
+
+
+
+## Example
+
+In the following example, the hex color value `#FF0000` is used to specify the color of a `
` element as red:
+
+```css title="index.css"
+h1 {
+ color: #FF0000; /* Red color */
+}
+```
+
+In the HTML code below, the CSS rule will apply the red color to the `
` element:
+
+```html title="index.html"
+
This is a red heading.
+```
+
+By adjusting the hex color value, you can create different colors for your elements in CSS. Hex color values provide a convenient way to specify colors and customize the appearance of your web pages.
+
+## Hex Color Shorthand
+
+Hex color values can be shortened if the three pairs of digits are the same. For example, the hex color value `#FF0000` can be shortened to `#F00` for red. This shorthand notation allows you to specify colors more concisely and reduces the length of the hex color value.
+
+### Example
+
+In the following example, the hex color value `#F00` is used to specify the color of a `
` element as red:
+
+```css title="index.css"
+p {
+ color: #F00; /* Red color */
+}
+```
+
+In the HTML code below, the CSS rule will apply the red color to the `
` element:
+
+```html title="index.html"
+
This is a red paragraph.
+```
+
+By using the shorthand notation for hex color values, you can write CSS code more efficiently and make it easier to specify colors in your stylesheets.
+
+
+
+## Transparency with Hex Color Values
+
+Hex color values can include an additional pair of digits to represent the alpha channel for transparency. The alpha channel specifies the opacity of the color, allowing you to create semi-transparent colors in CSS. Hex color values with transparency are represented by eight digits: `#RRGGBBAA`, where `AA` represents the alpha channel value.
+
+### Example
+
+In the following example, the hex color value `#FF0000CC` is used to specify a semi-transparent red color for a `
` element:
+
+```css title="index.css"
+div {
+ background-color: #FF0000CC; /* Semi-transparent red color */
+}
+```
+
+In the HTML code below, the CSS rule will apply the semi-transparent red color to the background of the `
` element:
+
+```html title="index.html"
+
This is a semi-transparent red div.
+```
+
+By using hex color values with transparency, you can create visually appealing effects and overlay colors with varying levels of opacity in your web designs.
+
+## Example: Using Hex Color Values
+
+In the following example, hex color values are used to specify the colors of different elements in a web page:
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ Hex Color Values Example
+
+
+
+
This is a red heading.
+
This is a blue paragraph.
+
This is a semi-transparent green div.
+
+
+```
+
+
+
+
+```css title="styles.css"
+h1 {
+ color: #FF0000; /* Red color */
+}
+
+p {
+ color: #0000FF; /* Blue color */
+}
+
+div {
+ background-color: #00FF00AA; /* Semi-transparent green color */
+}
+```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
This is a red heading.
+
This is a blue paragraph.
+
This is a semi-transparent green div.
+
+
+
+In this example, the hex color values `#FF0000`, `#0000FF`, and `#00FF00AA` are used to specify the colors of the `
`, `
`, and `
` elements, respectively. The `
` element is styled with a red color, the `
` element with a blue color, and the `
` element with a semi-transparent green background color.
+
+## Conclusion
+
+Hex color values are a popular way to specify colors in CSS using hexadecimal notation. By using hex color values, you can create a wide range of colors by adjusting the intensity of the red, green, and blue color channels. Hex color values provide a convenient and efficient method for specifying colors in your stylesheets and customizing the appearance of your web pages. With the ability to include transparency, hex color values offer additional flexibility in creating visually appealing designs for your websites.
\ No newline at end of file
diff --git a/docs/css/colors/hsl.md b/docs/css/colors/hsl.md
new file mode 100644
index 0000000..24a0fbb
--- /dev/null
+++ b/docs/css/colors/hsl.md
@@ -0,0 +1,142 @@
+---
+id: hsl
+title: HSL Color Values
+sidebar_label: HSL Color Values
+tags: [color, hsl, css color, hsl color]
+description: HSL color values are used to specify colors in CSS using the hue, saturation, and lightness color channels.
+keywords:
+ [
+ hsl color values,
+ css hsl color values,
+ css color values,
+ hsl color,
+ ]
+sidebar_position: 5
+---
+
+import './css/style.css';
+
+In CSS, HSL color values are used to specify colors using the hue, saturation, and lightness color channels. HSL color values are represented by the `hsl()` function, which takes three arguments: the hue, saturation, and lightness color channels. The hue channel is represented by an angle value between 0 and 360 degrees, where 0 represents red, 120 represents green, and 240 represents blue. The saturation and lightness channels are represented by percentage values between 0% and 100%, where 0% represents no color saturation or lightness and 100% represents full color saturation or lightness.
+
+
+
+## Syntax
+
+The syntax for HSL color values is as follows:
+
+```css title="index.css"
+selector {
+ color: hsl(hue, saturation, lightness);
+}
+```
+
+- `selector`: The element to which the HSL color value is applied.
+- `color`: The CSS property used to specify the color of an element.
+- `hsl()`: The function used to specify HSL color values.
+- `hue`: The color hue (0 to 360 degrees).
+- `saturation`: The color saturation (0% to 100%).
+- `lightness`: The color lightness (0% to 100%).
+
+## Example
+
+In the following example, the `hsl()` function is used to specify the color of a `
` element using HSL color values:
+
+```css title="index.css"
+div {
+ color: hsl(120, 100%, 50%); /* Green color with 50% lightness */
+}
+```
+
+In the HTML code below, the CSS rule will apply the green color with 50% lightness to the `
` element:
+
+```html title="index.html"
+
This is a green div.
+```
+
+
+
+:::info Additional Information
+
+- HSL color values are represented by the `hsl()` function in CSS.
+- HSL color values are specified using the hue, saturation, and lightness color channels.
+- The hue channel is represented by an angle value between 0 and 360 degrees.
+- The saturation and lightness channels are represented by percentage values between 0% and 100%.
+- HSL color values provide a more intuitive way to specify colors based on their hue, saturation, and lightness.
+- HSL color values are often used in web design for their ease of use and readability.
+- HSL color values can be used in combination with other color functions and formats in CSS.
+- HSL color values can be used to create a wide range of colors by adjusting the hue, saturation, and lightness values.
+
+:::
+
+## Example with HSL Color
+
+In the following example, we will create a color palette using HSL color values to generate a range of colors with varying hues, saturations, and lightness levels:
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ HSL Color Palette
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+```css title="styles.css"
+.color-box {
+ width: 100px;
+ height: 100px;
+ display: inline-block;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+In the HTML code above, we have created a color palette using HSL color values to generate a range of colors with varying hues. Each `
` element represents a color box with a different hue value ranging from 0 to 330 degrees. The saturation and lightness values are set to 100% and 50%, respectively, to maintain consistent saturation and lightness levels across the color palette.
+
+
+## Conclusion
+
+HSL color values provide a flexible and intuitive way to specify colors in CSS based on their hue, saturation, and lightness. By using HSL color values, you can create visually appealing designs with a wide range of colors and easily adjust the hue, saturation, and lightness levels to achieve the desired color effects. HSL color values are widely supported by all modern web browsers and are commonly used in web design for their ease of use and readability. By mastering HSL color values, you can enhance your web design skills and create stunning color palettes for your web projects.
diff --git a/docs/css/colors/hsla.md b/docs/css/colors/hsla.md
new file mode 100644
index 0000000..1b4df84
--- /dev/null
+++ b/docs/css/colors/hsla.md
@@ -0,0 +1,142 @@
+---
+id: hsla
+title: HSLA Color Values
+sidebar_label: HSLA Color Values
+tags: [color, hsla, css color, hsla color]
+description: HSLA color values are used to specify colors in CSS using the hue, saturation, lightness, and alpha color channels.
+keywords:
+ [
+ hsla color values,
+ css hsla color values,
+ css color values,
+ hsla color,
+ ]
+sidebar_position: 6
+---
+
+In CSS, HSLA color values are used to specify colors using the hue, saturation, lightness, and alpha color channels. HSLA color values are represented by the `hsla()` function, which takes four arguments: the hue, saturation, lightness, and alpha color channels. The hue channel is represented by an angle value between 0 and 360 degrees, where 0 represents red, 120 represents green, and 240 represents blue. The saturation and lightness channels are represented by percentage values between 0% and 100%, where 0% represents no color saturation or lightness and 100% represents full color saturation or lightness. The alpha channel is represented by a decimal value between 0 and 1, where 0 represents full transparency and 1 represents full opacity.
+
+
+
+## Syntax
+
+The syntax for HSLA color values is as follows:
+
+```css title="index.css"
+selector {
+ color: hsla(hue, saturation, lightness, alpha);
+}
+```
+
+- `selector`: The element to which the HSLA color value is applied.
+- `color`: The CSS property used to specify the color of an element.
+- `hsla()`: The function used to specify HSLA color values.
+- `hue`: The color hue (0 to 360 degrees).
+- `saturation`: The color saturation (0% to 100%).
+- `lightness`: The color lightness (0% to 100%).
+- `alpha`: The transparency of the color (0 to 1).
+
+## Example
+
+In the following example, the `hsla()` function is used to specify the color of a `
` element using HSLA color values with partial transparency:
+
+```css title="index.css"
+div {
+ color: hsla(240, 100%, 50%, 0.5); /* Blue color with 50% transparency */
+}
+```
+
+In the HTML code below, the CSS rule will apply the blue color with 50% transparency to the `
` element:
+
+```html title="index.html"
+
This is a partially transparent blue div.
+```
+
+By using HSLA color values, you can create visually appealing color schemes with varying levels of transparency in your web designs.
+
+
+
+:::info Additional Information
+
+**HSLA Color Values:**
+
+- HSLA color values are represented by the `hsla()` function in CSS.
+- HSLA color values are specified using the hue, saturation, lightness, and alpha color channels.
+- The hue channel is represented by an angle value between 0 and 360 degrees.
+- The saturation and lightness channels are represented by percentage values between 0% and 100%.
+- The alpha channel is represented by a decimal value between 0 and 1.
+
+**Benefits of HSLA Color Values:**
+
+- HSLA color values allow you to create colors with varying levels of transparency.
+- HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values.
+- HSLA color values are useful for creating visually appealing designs with semi-transparent elements.
+- HSLA color values can be combined with other CSS properties to create unique color effects.
+- HSLA color values are well-supported in modern web browsers.
+
+By using HSLA color values, you can enhance the visual appearance of your web pages and create engaging user experiences.
+:::
+
+## Example: Using HSLA Color Values
+
+In the following example, HSLA color values are used to specify the colors of different elements in a web page:
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ HSLA Color Values Example
+
+
+
+
This is a semi-transparent blue heading.
+
This is a semi-transparent green paragraph.
+
This is a semi-transparent red div.
+
+
+```
+
+
+
+
+```css title="styles.css"
+h1 {
+ color: hsla(240, 100%, 50%, 0.5); /* Blue color with 50% transparency */
+}
+
+p {
+ color: hsla(120, 100%, 50%, 0.5); /* Green color with 50% transparency */
+}
+
+div {
+ color: hsla(0, 100%, 50%, 0.5); /* Red color with 50% transparency */
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+<>
+
This is a semi-transparent blue heading.
+
This is a semi-transparent green paragraph.
+
This is a semi-transparent red div.
+
+
+
+In the example above, HSLA color values are used to specify the colors of the `
`, `
`, and `
` elements with varying hues and partial transparency. By adjusting the hue, saturation, lightness, and alpha values, you can create visually appealing color combinations for different elements on your web page.
+
+By using HSLA color values, you can enhance the visual appearance of your web designs and create engaging color schemes with varying levels of transparency. HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values, allowing you to create unique color effects and visually appealing designs in your web projects.
+
+If you want to learn more about CSS colors, you can check out our [CSS Colors](/tutorial/category/colors) guide for additional information on color models, color functions, and color formats in CSS.
+
+## Conclusion
+
+HSLA color values are a powerful tool in CSS that allow you to create visually appealing designs with elements that have varying levels of transparency. By using the hue, saturation, lightness, and alpha color channels, you can create colors with precise levels of transparency to achieve the desired visual effect. HSLA color values are widely supported by all modern web browsers and are commonly used in web design to create gradient backgrounds, text shadows, and other visual effects. By mastering HSLA color values, you can enhance the visual appearance of your web pages and create engaging user experiences with unique color schemes and effects.
\ No newline at end of file
diff --git a/docs/css/colors/rgb.md b/docs/css/colors/rgb.md
new file mode 100644
index 0000000..7c346da
--- /dev/null
+++ b/docs/css/colors/rgb.md
@@ -0,0 +1,131 @@
+---
+id: rgb
+title: RGB Color Values
+sidebar_label: RGB Color Values
+tags: [color, rgb, css color, rgb color]
+description: RGB color values are used to specify colors in CSS using the red, green, and blue color channels.
+keywords:
+ [
+ rgb color values,
+ css rgb color values,
+ css color values,
+ rgb color,
+ ]
+sidebar_position: 2
+---
+
+In CSS, RGB color values are used to specify colors using the red, green, and blue color channels. RGB color values are represented by the `rgb()` function, which takes three arguments: the red, green, and blue color channels. Each color channel is represented by an integer value between 0 and 255, where 0 represents no color and 255 represents the maximum intensity of the color channel.
+
+
+
+## Syntax
+
+The syntax for RGB color values is as follows:
+
+```css title="index.css"
+selector {
+ color: rgb(red, green, blue);
+}
+```
+
+- `selector`: The element to which the RGB color value is applied.
+- `color`: The CSS property used to specify the color of an element.
+- `rgb()`: The function used to specify RGB color values.
+- `red`: The intensity of the red color channel (0 to 255).
+- `green`: The intensity of the green color channel (0 to 255).
+- `blue`: The intensity of the blue color channel (0 to 255).
+
+## Example
+
+In the following example, the `rgb()` function is used to specify the color of a `
` element using RGB color values:
+
+```css title="index.css"
+div {
+ color: rgb(255, 0, 0); /* Red color */
+}
+```
+
+In the HTML code below, the CSS rule will apply the red color to the `
` element:
+
+```html title="index.html"
+
This is a red div.
+```
+
+:::info Additional Information
+
+- RGB color values are represented by the `rgb()` function in CSS.
+- RGB color values are specified using the red, green, and blue color channels.
+- Each color channel is represented by an integer value between 0 and 255.
+- RGB color values allow you to create a wide range of colors by adjusting the intensity of the red, green, and blue color channels.
+
+:::
+
+## RGB Color Channels
+
+The RGB color model uses three color channels—red, green, and blue—to create a wide range of colors. Each color channel has an intensity value between 0 and 255, where 0 represents no color and 255 represents the maximum intensity of the color channel. By combining different intensities of the red, green, and blue color channels, you can create millions of unique colors.
+
+### Red Color Channel
+
+The red color channel controls the intensity of red in the color. A value of 0 indicates no red color, while a value of 255 represents the maximum intensity of red.
+
+### Green Color Channel
+
+The green color channel controls the intensity of green in the color. A value of 0 indicates no green color, while a value of 255 represents the maximum intensity of green.
+
+### Blue Color Channel
+
+The blue color channel controls the intensity of blue in the color. A value of 0 indicates no blue color, while a value of 255 represents the maximum intensity of blue.
+
+By adjusting the intensity of each color channel, you can create a wide variety of colors in the RGB color model.
+
+
+
+## Example: Using RGB Color Values
+
+In the following example, the `rgb()` function is used to specify the color of a `` element using RGB color values:
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ RGB Color Example
+
+
+
+ This is red text.
+
+
+```
+
+
+
+
+```css title="styles.css"
+span.red-text {
+ color: rgb(255, 0, 0); /* Red color */
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This is red text.
+
+
+
+In this example, the `rgb(255, 0, 0)` value is used to specify the color of the `` element as red. The text inside the `` element is displayed in red color on the web page.
+
+RGB color values are commonly used in CSS to specify colors for text, backgrounds, borders, and other elements on a web page. By adjusting the intensity of the red, green, and blue color channels, you can create a wide range of colors to style your web pages.
+
+## Conclusion
+
+RGB color values are a fundamental part of CSS that allow you to specify colors using the red, green, and blue color channels. By adjusting the intensity of each color channel, you can create millions of unique colors to style your web pages. RGB color values are versatile and widely used in web development to create visually appealing designs and user interfaces.
\ No newline at end of file
diff --git a/docs/css/colors/rgba.md b/docs/css/colors/rgba.md
new file mode 100644
index 0000000..0b4f07f
--- /dev/null
+++ b/docs/css/colors/rgba.md
@@ -0,0 +1,133 @@
+---
+id: rgba
+title: RGBA Color Values
+sidebar_label: RGBA Color Values
+tags: [color, rgba, css color, rgba color]
+description: RGBA color values are used to specify colors in CSS using the red, green, blue, and alpha color channels.
+keywords:
+ [
+ rgba color values,
+ css rgba color values,
+ css color values,
+ rgba color,
+ ]
+sidebar_position: 4
+---
+
+In CSS, RGBA color values are used to specify colors using the red, green, blue, and alpha color channels. RGBA color values are represented by the `rgba()` function, which takes four arguments: the red, green, blue, and alpha color channels. The red, green, and blue color channels are represented by integer values between 0 and 255, where 0 represents no color and 255 represents the maximum intensity of the color channel. The alpha channel is represented by a decimal value between 0 and 1, where 0 represents full transparency and 1 represents full opacity.
+
+
+
+## Syntax
+
+The syntax for RGBA color values is as follows:
+
+```css title="index.css"
+selector {
+ color: rgba(red, green, blue, alpha);
+}
+```
+
+- `selector`: The element to which the RGBA color value is applied.
+- `color`: The CSS property used to specify the color of an element.
+- `rgba()`: The function used to specify RGBA color values.
+- `red`: The intensity of the red color channel (0 to 255).
+- `green`: The intensity of the green color channel (0 to 255).
+- `blue`: The intensity of the blue color channel (0 to 255).
+- `alpha`: The transparency of the color (0 to 1).
+
+## Example
+
+In the following example, the `rgba()` function is used to specify the color of a `
` element using RGBA color values with partial transparency:
+
+```css title="index.css"
+div {
+ color: rgba(255, 0, 0, 0.5); /* Red color with 50% transparency */
+}
+```
+
+In the HTML code below, the CSS rule will apply the red color with 50% transparency to the `
` element:
+
+```html title="index.html"
+
This is a partially transparent red div.
+```
+
+:::info Additional Information
+
+- RGBA color values are represented by the `rgba()` function in CSS.
+- RGBA color values are specified using the red, green, blue, and alpha color channels.
+- The red, green, and blue color channels are represented by integer values between 0 and 255.
+- The alpha channel is represented by a decimal value between 0 and 1.
+- RGBA color values allow you to create colors with varying levels of transparency.
+- RGBA color values are widely supported by all modern web browsers.
+
+:::
+
+## RGBA Color Channels
+
+The RGBA color model is an extension of the RGB color model that includes an additional alpha channel for transparency. The alpha channel specifies the opacity of the color, allowing you to create colors with varying levels of transparency. The alpha channel is represented by a decimal value between 0 and 1, where 0 represents full transparency and 1 represents full opacity.
+
+The RGBA color model is commonly used in web design to create visually appealing designs with elements that have varying levels of transparency.
+
+
+
+## Example with Gradient Background
+
+In the following example, the `rgba()` function is used to create a gradient background for a `
` element with varying levels of transparency:
+
+
+
+
+```html title="index.html"
+
+
+
+
+
+ RGBA Gradient Background Example
+
+
+
+
This is a gradient background with transparency.
+
+
+```
+
+
+
+
+```css title="styles.css"
+div {
+ background: linear-gradient(rgba(255, 0, 0, 1), rgba(255, 0, 0, 0));
+ color: white;
+ padding: 20px;
+ text-align: center;
+}
+```
+
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+ This is a gradient background with transparency.
+
+
+
+In this example, the `linear-gradient()` function is used to create a gradient background that transitions from a fully opaque red color at the top to a fully transparent red color at the bottom of the `
` element.
+
+:::info Additional Information
+
+- The `linear-gradient()` function is used to create a gradient background in CSS.
+- The `rgba()` function is used to specify colors with varying levels of transparency.
+- The `linear-gradient()` function can be used to create gradients with multiple color stops and directions.
+- The `rgba()` function allows you to create visually appealing designs with elements that have varying levels of transparency.
+- The RGBA color model is widely supported by all modern web browsers.
+
+:::
+
+## Conclusion
+
+RGBA color values are a powerful tool in CSS that allow you to create visually appealing designs with elements that have varying levels of transparency. By using the red, green, blue, and alpha color channels, you can create colors with precise levels of transparency to achieve the desired visual effect. RGBA color values are widely supported by all modern web browsers and are commonly used in web design to create gradient backgrounds, text shadows, and other visual effects.
\ No newline at end of file
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 0000000..f95fc45
--- /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-align.md b/docs/css/fonts-and-text-properties/font-align.md
new file mode 100644
index 0000000..694fcb6
--- /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
new file mode 100644
index 0000000..385375f
--- /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: 2
+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
+
+
+
+
+
+
+### 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
+
+
+
+
+
+
+
+
+:::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
+
+
+
+
+
+
+### 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
+
+
+
+
+
+
+
+
+:::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
+
+
+
+
+
+
+### 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
+
+
+
+
+
+
+:::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
+
+
+
+
+
+
+### 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
+
+
+
+
+
+
+## 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-style.md b/docs/css/fonts-and-text-properties/font-style.md
new file mode 100644
index 0000000..4872339
--- /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
new file mode 100644
index 0000000..ce3a6c1
--- /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: 3
+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
+
+
+
+
+
+
+:::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
+
+
+
+
+
+
+### 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
+
+
+
+
+
+
+:::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
+
+
+
+
+
+
+## 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
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 0000000..7d7521a
--- /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
diff --git a/docs/css/introduction/_category_.json b/docs/css/introduction/_category_.json
new file mode 100644
index 0000000..b490ad0
--- /dev/null
+++ b/docs/css/introduction/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Introduction",
+ "position": 1,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the CSS. CSS stands for Cascading Style Sheets. It is a style sheet language used for describing the presentation of a document written in a markup language like HTML. CSS is a cornerstone technology of the World Wide Web, alongside HTML and JavaScript."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/introduction/comments-in-css.md b/docs/css/introduction/comments-in-css.md
new file mode 100644
index 0000000..2c4c81e
--- /dev/null
+++ b/docs/css/introduction/comments-in-css.md
@@ -0,0 +1,130 @@
+---
+id: comments-in-css
+title: Comments in CSS
+sidebar_label: Comments in CSS
+sidebar_position: 3
+tags:
+ [
+ comments-in-css,
+ css-introduction,
+ css,
+ introduction,
+ css-basics,
+ css-tutorial,
+ css-guide,
+ css-tutorial-for-beginners,
+ learn-css,
+ css-tutorial-for-beginners,
+ css-tutorial-for-beginners-2025,
+ css-tutorial-for-learning,
+ ]
+description: "In this tutorial, you will learn how to add comments to your CSS code to make it more readable and maintainable."
+keywords:
+ [
+ comments in css,
+ css comments,
+ css introduction,
+ css basics,
+ css tutorial,
+ css guide,
+ css tutorial for beginners,
+ learn css,
+ css tutorial for beginners 2025,
+ css tutorial for learning,
+ ]
+---
+
+In this tutorial, you will learn how to add comments to your CSS code to make it more readable and maintainable. Comments are used to explain the purpose of the code, provide context, and make it easier for other developers (or your future self) to understand and modify the code.
+
+
+
+## Comments in CSS
+
+Comments in CSS are similar to comments in other programming languages. They are used to add notes and explanations to your code without affecting the output. Comments can be single-line or multi-line and are ignored by the browser when rendering the page.
+
+### Single-line Comments
+
+Single-line comments start with `//` and continue until the end of the line. They are useful for adding short notes or explanations to your code. Here's an example of a single-line comment in CSS:
+
+```css title="styles.css" showLineNumbers
+/* This is a single-line comment */
+```
+
+### Multi-line Comments
+
+Multi-line comments start with `/*` and end with `*/`. They can span multiple lines and are useful for adding longer notes or explanations to your code. Here's an example of a multi-line comment in CSS:
+
+```css title="styles.css" showLineNumbers
+/*
+This is a multi-line comment
+that spans multiple lines
+*/
+```
+
+### Why Use Comments in CSS
+
+Comments are an essential part of writing clean and maintainable code. Here are some reasons why you should use comments in your CSS code:
+
+- **Explain the Purpose**: Comments help explain the purpose of the code, making it easier for other developers to understand.
+- **Provide Context**: Comments provide context and background information about the code, helping developers make informed decisions.
+- **Document Changes**: Comments document changes made to the code, making it easier to track modifications and updates.
+- **Improve Readability**: Comments improve the readability of the code by breaking it down into logical sections and adding explanations.
+- **Debugging**: Comments can be used to temporarily disable or troubleshoot code without deleting it.
+- **Future Reference**: Comments serve as a reference for future modifications or updates to the code.
+- **Collaboration**: Comments facilitate collaboration among team members by explaining the code and its purpose.
+- **Best Practices**: Using comments is considered a best practice in programming and helps maintain code quality.
+- **Code Documentation**: Comments can be used to generate documentation for the codebase, making it easier to understand and maintain.
+- **Learning**: Comments help beginners learn CSS by providing explanations and examples.
+- **Code Review**: Comments can be used during code reviews to explain the code and suggest improvements.
+- **Maintainability**: Comments improve the maintainability of the code by providing insights into its structure and logic.
+
+By adding comments to your CSS code, you can make it more readable, maintainable, and understandable for yourself and other developers. Comments are a powerful tool for documenting your code and ensuring its quality and longevity.
+
+
+
+## For example
+
+
+
+ ```html showLineNumbers
+
+
+
+ Comments in CSS Example
+
+
+
+
Welcome to CSS Comments
+
This is an example of how comments can be used in CSS.
+
+
+ ```
+
+
+ ```css showLineNumbers
+ /* This is a CSS comment */
+ h1 {
+ color: navy; /* Set the color of the heading */
+ }
+ ```
+
+
+
+Now, let's see how the above example looks in a browser window:
+
+
+ <>
+
Welcome to CSS Comments
+
This is an example of how comments can be used in CSS.
+
+
+
+In this example, we have added comments to the CSS code to explain the purpose of the styles and provide context for the code. The comments help clarify the intent of the code and make it easier to understand and maintain.
+
+By using comments in your CSS code, you can enhance the quality, readability, and maintainability of your stylesheets. Comments are a valuable tool for documenting your code and ensuring that it remains clear and understandable over time.
+
+Now that you have learned how to add comments to your CSS code, you can start using comments to document your stylesheets and make them more accessible and maintainable. Comments are an essential part of writing clean and professional CSS code, and they play a crucial role in improving the quality and readability of your stylesheets.
+
+## Conclusion
+
+In this tutorial, you learned how to add comments to your CSS code to make it more readable and maintainable. Comments are an essential part of writing clean and professional CSS code, and they help explain the purpose of the code, provide context, and improve readability. By using comments in your CSS stylesheets, you can enhance the quality and maintainability of your code and make it easier for other developers to understand and modify.
\ No newline at end of file
diff --git a/docs/css/introduction/how-to-add-css-to-html.md b/docs/css/introduction/how-to-add-css-to-html.md
new file mode 100644
index 0000000..4ee4157
--- /dev/null
+++ b/docs/css/introduction/how-to-add-css-to-html.md
@@ -0,0 +1,180 @@
+---
+id: how-to-add-css-to-html
+title: How to Add CSS to HTML
+sidebar_label: How to Add CSS to HTML
+sidebar_position: 2
+tags:
+ [
+ how-to-add-css-to-html,
+ css-introduction,
+ css,
+ introduction,
+ css-basics,
+ css-tutorial,
+ css-guide,
+ css-tutorial-for-beginners,
+ learn-css,
+ css-tutorial-for-beginners,
+ css-tutorial-for-beginners-2025,
+ css-tutorial-for-learning,
+ ]
+description: "In this tutorial, you will learn how to add CSS to an HTML document using internal, external, and inline styles."
+keywords:
+ [
+ how to add css to html,
+ add css to html,
+ css introduction,
+ css basics,
+ css tutorial,
+ css guide,
+ css tutorial for beginners,
+ learn css,
+ css tutorial for beginners 2025,
+ css tutorial for learning,
+ ]
+---
+
+In this tutorial, you will learn how to add CSS to an HTML document using internal, external, and inline styles. CSS (Cascading Style Sheets) is a style sheet language that is used to describe the look and formatting of a document written in HTML or XML. It allows you to style web pages and user interfaces, making it easier to create visually appealing and responsive websites.
+
+
+
+## How to Add CSS to HTML
+
+There are three ways to add CSS to an HTML document:
+
+### 1. Internal CSS
+
+Internal CSS is added within the `
+
+
+
Welcome to My Website
+
This is an example of internal CSS.
+
+
+```
+
+In this example, the background color of the `` element is set to `lightblue`, and the color and alignment of the `
` element are defined using internal CSS.
+
+When you run this HTML document in a web browser. It will display the content with the styles defined in the internal CSS.
+
+
+ <>
+
Welcome to My Website
+
This is an example of internal CSS.
+
+
+
+
+
+### 2. External CSS
+
+External CSS is added in a separate CSS file and linked to an HTML document using the `` element in the `` section. It allows you to define styles that can be shared across multiple documents. Here's an example of how to add external CSS to an HTML document:
+
+```html title="index.html"
+
+
+
+ External CSS Example
+
+
+
+
Welcome to My Website
+
This is an example of external CSS.
+
+
+```
+
+And create a separate CSS file named `styles.css` with the following content:
+
+```css title="styles.css"
+body {
+ background-color: lightblue;
+}
+
+h1 {
+ color: navy;
+ text-align: center;
+}
+```
+
+In this example, the CSS styles are defined in a separate file named `styles.css`, which is linked to the HTML document using the `` element. The styles defined in the external CSS file are applied to the elements in the HTML document.
+
+
+
+When you run this HTML document in a web browser. It will display the content with the styles defined in the external CSS.
+
+
+ <>
+
Welcome to My Website
+
This is an example of external CSS.
+
+
+
+### 3. Inline CSS
+
+Inline CSS is added directly to an HTML element using the `style` attribute. It allows you to define styles that apply only to that specific element. Here's an example of how to add inline CSS to an HTML document:
+
+```html title="index.html"
+
+
+
+ Inline CSS Example
+
+
+
Welcome to My Website
+
This is an example of inline CSS.
+
+
+```
+
+In this example, the color and alignment of the `
` element and the color of the `
` element are defined using inline CSS.
+
+When you run this HTML document in a web browser. It will display the content with the styles defined in the inline CSS.
+
+
+ <>
+
Welcome to My Website
+
This is an example of inline CSS.
+
+
+
+By using internal, external, and inline CSS, you can style web pages and user interfaces to create visually appealing and responsive websites.
+
+
+
+:::note
+1. Make sure the `styles.css` file is in the same directory as the `index.html` file.
+2. The `` element should be placed in the `
` section of the HTML document.
+3. The `href` attribute of the `` element should point to the location of the external CSS file.
+4. `` where:
+ - `rel="stylesheet"` specifies the relationship between the HTML document and the linked CSS file.
+ - `href="styles.css"` specifies the location of the external CSS file.
+5. The `style` attribute is used to add inline CSS to an HTML element.
+6. The `style` attribute contains one or more CSS property-value pairs separated by a semicolon.
+7. The CSS property is followed by a colon (`:`) and the property value.
+8. The CSS property-value pairs are enclosed in double quotes (`"`).
+9. The CSS property-value pairs are separated by a semicolon (`;`).
+10. The `style` attribute is added directly to the HTML element.
+11. The `style` attribute overrides any styles applied to the element using internal or external CSS.
+12. The `style` attribute is not recommended for large-scale styling as it can make the HTML document harder to maintain.
+:::
+
+## Conclusion
+
+In this tutorial, you learned how to add CSS to an HTML document using internal, external, and inline styles. Internal CSS is added within the `
+
+
+
+
+In this example, the `button:hover` pseudo-class selector is used to change the background color of the button to `lightblue` when the user hovers over it. The button in the HTML code changes its background color to `lightblue` when the user hovers over it.
+
+Pseudo-class selectors are a powerful feature of CSS that allow you to style elements based on their state or position in the document. By using pseudo-class selectors, you can create interactive and dynamic styles for your web pages.
+
+## Related Resources
+
+- [CSS Pseudo-Classes - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes)
+- [CSS Pseudo-Classes - W3Schools](https://www.w3schools.com/css/css_pseudo_classes.asp)
+- [CSS Selectors - CSS-Tricks](https://css-tricks.com/almanac/selectors/)
+- [CSS Selectors Level 4 - W3C Specification](https://www.w3.org/TR/selectors-4/)
+- [CSS Selectors - Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors)
\ No newline at end of file
diff --git a/docs/css/selectors/pseudo-elements-selectors.mdx b/docs/css/selectors/pseudo-elements-selectors.mdx
new file mode 100644
index 0000000..fb9e99e
--- /dev/null
+++ b/docs/css/selectors/pseudo-elements-selectors.mdx
@@ -0,0 +1,143 @@
+---
+id: pseudo-elements-selectors
+title: "Pseudo-Elements Selectors"
+sidebar_label: "Pseudo-Elements Selectors"
+sidebar_position: 5
+tags:
+ [
+ "pseudo-elements selectors",
+ "css pseudo-elements selectors",
+ "css selectors",
+ "css pseudo-elements",
+ ]
+description: "Pseudo-elements selectors are used to style parts of an element that are not part of the document tree."
+keywords:
+ [
+ pseudo elements selectors,
+ css pseudo elements selectors,
+ css selectors,
+ css pseudo-elements,
+ ]
+hide_table_of_contents: true
+---
+
+In CSS, pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document.
+
+
+
+
+## Syntax
+
+The syntax for pseudo-elements selectors is as follows:
+
+```css title="index.css"
+selector::pseudo-element {
+ /* CSS properties */
+}
+```
+
+- `selector`: The element to which the pseudo-element is applied.
+- `pseudo-element`: The pseudo-element to be styled.
+- `CSS properties`: The CSS properties to be applied to the pseudo-element.
+- `::`: The `::` characters represent the pseudo-elements selector.
+- The `::` characters are used to style parts of an element that are not part of the document tree.
+- Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text.
+
+## Example
+
+In the following example, the `::first-letter` pseudo-element selector is used to style the first letter of the text inside an `
` element:
+
+```css title="index.css"
+h1::first-letter {
+ font-size: 2em;
+ color: red;
+}
+```
+
+In the HTML code below, the CSS rule will apply the `font-size: 2em` and `color: red` properties to the first letter of the text inside the `
` element:
+
+```html title="index.html"
+
Welcome to CSS
+```
+
+The first letter of the text "Welcome to CSS" will be styled with a font size of `2em` and a color of `red`.
+
+:::info Additional Information
+
+- Pseudo-elements selectors are used to style parts of an element that are not part of the document tree.
+- Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element.
+- Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document.
+- Pseudo-elements selectors are used to create effects like drop caps, text underlines, and more.
+- Pseudo-elements selectors are less specific than class selectors and more specific than element selectors.
+- Pseudo-elements selectors are useful for adding decorative elements to text or styling specific parts of an element.
+- Pseudo-elements selectors can be combined with other selectors to create complex styles.
+- Pseudo-elements selectors are supported in all modern browsers.
+- Pseudo-elements selectors are used to style parts of an element that are not part of the document tree.
+- Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text.
+
+:::
+
+
+
+
+## Example: Using Pseudo-Elements Selectors
+
+In the following example, the `::first-line` pseudo-element selector is used to style the first line of text inside a `
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+```
+
+
+```css title="styles.css"
+p::first-line {
+ font-weight: bold;
+ font-size: 1.2em;
+}
+```
+
+
+
+Now, you can see the output of the above code in the Browser Window like this:
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
+ tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+In the above example, the CSS rule will apply the `font-weight: bold` and `font-size: 1.2em` properties to the first line of text inside the `
` element.
+
+
+
+
+## Conclusion
+
+Pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document. Pseudo-elements selectors are useful for adding decorative elements to text or styling specific parts of an element. Pseudo-elements selectors can be combined with other selectors to create complex styles. Pseudo-elements selectors are supported in all modern browsers. Pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text.
\ No newline at end of file
diff --git a/docs/css/selectors/simple-selectors/_category_.json b/docs/css/selectors/simple-selectors/_category_.json
new file mode 100644
index 0000000..ecebf79
--- /dev/null
+++ b/docs/css/selectors/simple-selectors/_category_.json
@@ -0,0 +1,8 @@
+{
+ "label": "Simple Selectors",
+ "position": 1,
+ "link": {
+ "type": "generated-index",
+ "description": "In this section, you will learn about the simple selectors in CSS. Simple selectors are the most basic type of selectors. They are used to select elements based on their type, class, id, or attribute. Simple selectors are the building blocks of more complex selectors."
+ }
+ }
\ No newline at end of file
diff --git a/docs/css/selectors/simple-selectors/class-selector.mdx b/docs/css/selectors/simple-selectors/class-selector.mdx
new file mode 100644
index 0000000..61b8945
--- /dev/null
+++ b/docs/css/selectors/simple-selectors/class-selector.mdx
@@ -0,0 +1,445 @@
+---
+id: class-selector
+title: Class Selector
+sidebar_label: Class Selector
+sidebar_position: 2
+description: "The class selector is used to select elements on a web page based on their class attribute."
+keywords:
+ [
+ class selector,
+ css class selector,
+ css selectors,
+ css basics,
+ css tutorial,
+ css guide,
+ css tutorial for beginners,
+ learn css,
+ css tutorial for beginners 2025,
+ css tutorial for learning,
+ ]
+hide_table_of_contents: true
+tags:
+ - 'css-selectors'
+ - 'class-selector'
+ - 'css'
+ - 'selectors'
+ - 'simple-selectors'
+---
+
+In CSS, the class selector is used to select elements on a web page based on their class attribute. It is denoted by a dot (`.`) followed by the class name.
+
+
+
+
+## What is a Class Selector?
+
+A class selector selects all elements on a web page that have a specified class attribute. It targets HTML elements based on the value of their `class` attribute. For example, to select all elements with the class `highlight`, you would use the following CSS rule:
+
+```css title="styles.css"
+.highlight {
+ background-color: yellow;
+}
+```
+
+In this example, the CSS rule selects all elements with the class `highlight` and sets their background color to yellow. The class selector is denoted by a dot (`.`) followed by the class name (`highlight` in this case) and curly braces `{}` containing the CSS properties and values to apply to the selected elements.
+
+## Syntax of the Class Selector
+
+The syntax of the class selector is
+
+```css title="styles.css"
+.classname {
+ property: value;
+}
+```
+
+where `.classname` represents the class selector, and `property: value;` represents the CSS properties and values to apply to the selected elements.
+
+:::tip Key Points to Remember
+1. **Reusability:** Classes are reusable and can be applied to multiple elements across your HTML document.
+2. **Combining Classes:** You can assign multiple classes to a single HTML element by separating class names with spaces.
+3. **Higher Specificity:** Class selectors are more specific than element selectors but less specific than ID selectors.
+:::
+
+By using class selectors, you can style specific groups of elements based on their class attributes, making it a powerful tool for styling web pages.
+
+## Example
+
+
+
+ ```html showLineNumbers
+
+
+
+
+
+ CSS Class Selector
+
+
+
+
+
+
+
+
+
+In the above example, we have used the class selector to style different elements on the web page based on their class attributes. The `highlight` class is used to style paragraphs with a highlighted background color, the `bold` class is used to make text bold, and the `card` class is used to style a card-like container. The `btn` class is used to style buttons, and the `btn-primary` class is used to style primary buttons differently.
+
+
+
+
+By using class selectors, you can apply consistent styles to elements with the same class across your web page, making it easier to maintain and update the styles.
+
+## Multiple Classes
+
+You can assign multiple classes to a single HTML element by separating class names with spaces. This allows you to combine styles from different classes on the same element. For example:
+
+```html title="index.html"
+
+```
+
+In this example, the button element has both the `btn` and `btn-primary` classes applied to it. This allows you to style the button using styles from both classes.
+
+## Tips & Tricks for Using Class Selectors
+
+1. **Use Descriptive Names:** Choose meaningful class names to make your code more readable and maintainable. For example, use `btn-primary` instead of `blue-button`.
+ - For example:
+
+
+ ```
+
+ ```css title="styles.css" showLineNumbers
+ .card {
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 20px;
+ margin: 20px 0;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+ }
+
+ .card-title {
+ font-size: 1.5rem;
+ color: #007bff;
+ }
+
+ .card-content {
+ font-size: 1rem;
+ color: #555;
+ }
+ ```
+
+7. **Debugging Tip:** Use browser developer tools to inspect elements and check which styles are being applied to them. This can help you troubleshoot styling issues and conflicts.
+
+By following these tips and best practices, you can effectively use class selectors to style your web pages and create maintainable CSS code.
+
+
+
+
+## Advanced Usage of Class Selectors
+
+### Combining Class Selectors
+
+You can combine multiple class selectors to create more specific styles for elements that have both classes applied. For example:
+
+```css title="styles.css"
+.btn {
+ padding: 10px 20px;
+ border-radius: 5px;
+}
+
+.btn-primary {
+ background-color: blue;
+ color: white;
+}
+
+.btn.btn-primary {
+ font-weight: bold;
+}
+```
+
+In this example, the `.btn.btn-primary` selector targets elements that have both the `btn` and `btn-primary` classes applied to them. This allows you to create more specific styles for elements with multiple classes.
+
+### Pseudo-Classes with Class Selectors
+
+You can also use pseudo-classes in combination with class selectors to style elements based on their state or interaction. For example:
+
+```css title="styles.css"
+.btn {
+ padding: 10px 20px;
+ border-radius: 5px;
+}
+
+.btn:hover {
+ background-color: #3498db;
+ color: white;
+}
+```
+
+In this example, the `.btn:hover` selector applies styles to the button when it is hovered over by the user. Pseudo-classes can be a powerful way to add interactivity to your web page using class selectors.
+
+
+
+
+### Nesting Class Selectors
+
+While CSS does not support true nesting of selectors, you can simulate nesting by chaining class selectors together. For example:
+
+```css title="styles.css"
+.card {
+ border: 1px solid #ccc;
+ border-radius: 10px;
+ padding: 20px;
+ margin: 20px 0;
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.card .card-title {
+ font-size: 1.5rem;
+ color: #007bff;
+}
+
+.card .card-content {
+ font-size: 1rem;
+ color: #555;
+}
+```
+
+In this example, the `.card .card-title` and `.card .card-content` selectors simulate nesting by targeting elements with the `card-title` and `card-content` classes that are descendants of elements with the `card` class.
+
+### Attribute Selectors with Class Selectors
+
+You can also use attribute selectors in combination with class selectors to target elements based on their attributes. For example:
+
+```css title="styles.css"
+.btn {
+ padding: 10px 20px;
+ border-radius: 5px;
+}
+
+.btn[type="submit"] {
+ background-color: #2ecc71;
+ color: white;
+}
+
+.btn[type="reset"] {
+ background-color: #e74c3c;
+ color: white;
+}
+```
+
+In this example, the `.btn[type="submit"]` and `.btn[type="reset"]` selectors target buttons with the `btn` class and specific `type` attributes, applying different styles based on the button type.
+
+
+
+
+By using these advanced techniques, you can create more complex and specific styles for your web page using class selectors.
+
+## When to Use Class Selectors
+
+Class selectors are ideal for styling groups of elements that share common styles or characteristics. Here are some scenarios where class selectors are commonly used:
+
+1. **Reusable Styles:** Use class selectors to create reusable styles that can be applied to multiple elements across your web page.
+2. **Component Styling:** Apply class selectors to style components or sections of your web page consistently.
+3. **Button Styling:** Use class selectors to style buttons with different variations (e.g., primary, secondary, success, danger).
+4. **Card Components:** Style card-like components with class selectors to create consistent layouts.
+5. **Navigation Menus:** Apply class selectors to style navigation menus, links, and buttons for a cohesive design.
+6. **Form Elements:** Use class selectors to style form elements like input fields, checkboxes, and radio buttons.
+7. **Alert Messages:** Style alert messages, notifications, or banners with class selectors for a consistent look and feel.
+
+By using class selectors in these scenarios, you can create a more organized and maintainable CSS structure for your web page.
+
+## Conclusion
+
+The class selector in CSS is a powerful tool for selecting and styling elements based on their class attributes. By using class selectors, you can apply consistent styles to groups of elements across your web page, making it easier to maintain and update the styles. It allows you to create reusable styles that can be applied to multiple elements, improving the consistency and maintainability of your CSS code.
\ No newline at end of file
diff --git a/docs/css/selectors/simple-selectors/element-selector.mdx b/docs/css/selectors/simple-selectors/element-selector.mdx
new file mode 100644
index 0000000..927cbc3
--- /dev/null
+++ b/docs/css/selectors/simple-selectors/element-selector.mdx
@@ -0,0 +1,176 @@
+---
+id: element-selector
+title: Element Selector
+sidebar_label: Element Selector
+sidebar_position: 1
+tags:
+ [
+ css,
+ selectors
+ ]
+description: "The element selector in CSS is used to select and style HTML elements based on their tag names."
+keywords:
+ [
+ element selector,
+ css element selector,
+ css selectors,
+ css basics,
+ css tutorial,
+ css guide,
+ css tutorial for beginners,
+ learn css,
+ css tutorial for beginners 2025,
+ css tutorial for learning,
+ ]
+hide_table_of_contents: true
+---
+
+In CSS, the element selector is used to select elements on a web page based on their element type. It is one of the simplest and most commonly used selectors in CSS.
+
+
+
+
+## What is an Element Selector?
+
+An element selector selects all elements on a web page that match a specified element type. It targets HTML elements based on their tag name. For example, to select all `
` elements on a page, you would use the following CSS rule:
+
+```css title="styles.css"
+p {
+ color: red;
+}
+```
+
+In this example, the CSS rule selects all `
` elements and sets their text color to red. The element selector is denoted by the tag name (`p` in this case) followed by curly braces `{}` containing the CSS properties and values to apply to the selected elements.
+
+## Syntax of the Element Selector
+
+The syntax of the element selector is as follows:
+
+```css title="styles.css"
+element {
+ property: value;
+}
+```
+
+Where:
+
+- `element`: Represents the tag name of the HTML element you want to target.
+- `property`: Refers to the CSS property you want to apply to the selected elements.
+- `value`: Specifies the value of the CSS property.
+- `{}`: Encloses the CSS properties and values to be applied to the selected elements.
+- `;`: Separates multiple CSS properties within the rule.
+
+The element selector can be used to style various HTML elements, such as headings (`