-
\ No newline at end of file
diff --git a/docs/CSS/css-flexbox.md b/docs/CSS/css-flexbox.md
deleted file mode 100644
index e6998b421..000000000
--- a/docs/CSS/css-flexbox.md
+++ /dev/null
@@ -1,184 +0,0 @@
-# CSS Flexbox
-
-## Introduction
-Flexbox, or the Flexible Box Layout, is a CSS layout module designed to make it easier to design flexible and responsive layout structures without using floats or positioning.
-
-## Basic Concepts
-
-### Flex Container
-A flex container is an element with `display: flex`. The children of this container become flex items.
-
-```css
-.container {
- display: flex;
-}
-```
-
--Flex Items:
-The direct children of a flex container automatically become flex items.
-
-```html
-
-
Item 1
-
Item 2
-
Item 3
-
-```
-
-# Flexbox Properties:
-## Container Properties:
-### flex-direction:
-
--Defines the direction of the flex items.
--Possible values: row, row-reverse, column, column-reverse.
-
-```css
-.container {
- flex-direction: row; /* default */
-}
-```
-
-### flex-wrap:
-
--Specifies whether flex items should wrap or not.
--Possible values: nowrap, wrap, wrap-reverse.
-
-```css
-.container {
- flex-wrap: wrap;
-}
-```
-
-### justify-content:
--Defines the alignment along the main axis.
--Possible values: flex-start, flex-end, center, space-between, space-around, space-evenly.
-
-```css
-.container {
- justify-content: center;
-}
-```
-### align-items:
--Defines the default behavior for how flex items are laid out along the cross axis.
--Possible values: flex-start, flex-end, center, baseline, stretch
-
-```css
-.container {
- align-items: stretch; /* default */
-}
-```
-
-### align-content:
-
--Aligns a flex container’s lines within the flex container when there is extra space in the cross-axis.
--Possible values: flex-start, flex-end, center, space-between, space-around, stretch.
-
-```css
-.container {
- align-content: stretch; /* default */
-}
-```
-
-# Item Properties
-### order
-
--Controls the order in which flex items appear in the flex container.
-```css
-.item {
- order: 1; /* default is 0 */
-}
-```
-
-### flex-grow
-
--Defines the ability for a flex item to grow if necessary.
-
-```css
-.item {
- flex-grow: 1; /* default is 0 */
-}
-```
-
-### lex-shrink
-
--Defines the ability for a flex item to shrink if necessary.
-```css
-.item {
- flex-shrink: 1; /* default is 1 */
-}
-```
-
-## Basic Flexbox Layout
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Conclusion:
-Flexbox is a powerful layout tool that simplifies the process of creating complex layouts and responsive designs. With its various properties, you can control the arrangement, alignment, and spacing of elements efficiently.
diff --git a/docs/CSS/css-grid.md b/docs/CSS/css-grid.md
deleted file mode 100644
index 960d92eae..000000000
--- a/docs/CSS/css-grid.md
+++ /dev/null
@@ -1,177 +0,0 @@
-# CSS Grid
-
-## Introduction
-CSS Grid Layout is a powerful tool for creating two-dimensional layouts on the web. It allows you to design complex web layouts with rows and columns, making it easier to create responsive designs.
-
-## Basic Concepts
-
-### Grid Container
-A grid container is an element with `display: grid`. The children of this container become grid items.
-
-```css
-.container {
- display: grid;
-}
-```
-
-### Grid Items
-The direct children of a grid container automatically become grid items.
-
-```html
-
-
Item 1
-
Item 2
-
Item 3
-
-```
-## Grid Properties
-### Container Properties
-#### grid-template-columns and grid-template-rows
-
-Defines the columns and rows of the grid.
-
-```css
-.container {
- grid-template-columns: repeat(3, 1fr); /* 3 equal columns */
- grid-template-rows: 100px 200px; /* 2 rows with specific heights */
-}
-```
-
-#### grid-gap
-
-Defines the gaps (gutters) between rows and columns.
-```css
-.container {
- grid-gap: 10px; /* gap between rows and columns */
-}
-```
-
-#### grid-template-areas
-
-Defines named grid areas.
-
-
-```css
-.container {
- grid-template-areas:
- 'header header header'
- 'sidebar content content'
- 'footer footer footer';
-}
-```
-## Item Properties
-#### grid-column and grid-row
-
-Specifies the start and end lines for the item.
-```css
-.item {
- grid-column: 1 / 3; /* spans from column line 1 to 3 */
- grid-row: 1 / 2; /* spans from row line 1 to 2 */
-}
-```
-
-#### grid-area
-
-Specifies a grid item’s size and location within the grid by referencing the name of a grid area.
-
-```css
-.item {
- grid-area: header;
-}
-```
-# Examples
-## Basic Grid Layout
-```html
-
-
-
-
-
-
-
-
-
-
Item 1
-
Item 2
-
Item 3
-
Item 4
-
Item 5
-
-
-
-```
-
-## Grid Layout with Areas
-
-```html
-
-
-
-
-
-
-
-
-
-
Header
-
Sidebar
-
Content
-
-
-
-
-```
-
-# Conclusion
-CSS Grid is a powerful tool for creating complex and responsive web layouts. By understanding its various properties, you can design flexible and efficient layouts with ease.
-
-
-This guide covers the essential properties, concepts, and examples to help users understand and apply CSS Grid in their projects.
diff --git a/docs/CSS/css-margins.md b/docs/CSS/css-margins.md
deleted file mode 100644
index 80cb4ea84..000000000
--- a/docs/CSS/css-margins.md
+++ /dev/null
@@ -1,220 +0,0 @@
-# CSS Margins
-
-Margins are used to create space around elements, outside of any defined borders.
-
-This element has a margin of 70px.
-
-The CSS margin properties are used to create space around elements, outside of any defined borders.
-
-With CSS, you have full control over the margins. There are properties for setting the margin for each side of an element (top, right, bottom, and left).
-
-## Margin - Individual Sides
-
-CSS has properties for specifying the margin for each side of an element:
-
-- `margin-top`
-- `margin-right`
-- `margin-bottom`
-- `margin-left`
-
-All the margin properties can have the following values:
-
-- `auto` - the browser calculates the margin
-- `length` - specifies a margin in px, pt, cm, etc.
-- `%` - specifies a margin in % of the width of the containing element
-- `inherit` - specifies that the margin should be inherited from the parent element
-
-Tip: Negative values are allowed.
-
-### Example
-
-Set different margins for all four sides of a `
- This paragraph has different margins for all four sides.
-
-
-## Margin - Shorthand Property
-
-To shorten the code, it is possible to specify all the margin properties in one property.
-
-The `margin` property is a shorthand property for the following individual margin properties:
-
-- `margin-top`
-- `margin-right`
-- `margin-bottom`
-- `margin-left`
-
-### If the margin property has four values:
-
-```css
-margin: 25px 50px 75px 100px;
-```
-
-- `top` margin is 25px
-- `right` margin is 50px
-- `bottom` margin is 75px
-- `left` margin is 100px
-
-### Example
-
-Use the margin shorthand property with four values:
-
-```css
-p {
- margin: 25px 50px 75px 100px;
-}
-```
-
-#### Output
-
-
- This paragraph uses the margin shorthand with four values.
-
-
-### If the margin property has three values:
-
-```css
-margin: 25px 50px 75px;
-```
-
-- `top` margin is 25px
-- `right` and `left` margins are 50px
-- `bottom` margin is 75px
-
-### Example
-
-Use the margin shorthand property with three values:
-
-```css
-p {
- margin: 25px 50px 75px;
-}
-```
-
-#### Output
-
-
- This paragraph uses the margin shorthand with three values.
-
-
-### If the margin property has two values:
-
-```css
-margin: 25px 50px;
-```
-
-- `top` and `bottom` margins are 25px
-- `right` and `left` margins are 50px
-
-### Example
-
-Use the margin shorthand property with two values:
-
-```css
-p {
- margin: 25px 50px;
-}
-```
-
-#### Output
-
-
- This paragraph uses the margin shorthand with two values.
-
-
-### If the margin property has one value:
-
-```css
-margin: 25px;
-```
-
-- all four margins are 25px
-
-### Example
-
-Use the margin shorthand property with one value:
-
-```css
-p {
- margin: 25px;
-}
-```
-
-#### Output
-
-
- This paragraph uses the margin shorthand with one value.
-
-
-## The `auto` Value
-
-You can set the `margin` property to `auto` to horizontally center the element within its container.
-
-The element will then take up the specified width, and the remaining space will be split equally between the left and right margins.
-
-### Example
-
-Use `margin: auto`:
-
-```css
-div {
- width: 300px;
- margin: auto;
- border: 1px solid red;
-}
-```
-
-#### Output
-
-
- This div is centered horizontally with `margin: auto`.
-
-
-## The `inherit` Value
-
-This example lets the left margin of the `
- This paragraph inherits its left margin from the parent div.
-
-
-
-## All CSS Margin Properties
-
-| Property | Description |
-| ------------- | ----------------------------------------------------------------- |
-| `margin` | A shorthand property for setting all the margin properties in one declaration |
-| `margin-bottom` | Sets the bottom margin of an element |
-| `margin-left` | Sets the left margin of an element |
-| `margin-right` | Sets the right margin of an element |
-| `margin-top` | Sets the top margin of an element |
\ No newline at end of file
diff --git a/docs/CSS/css-outline.md b/docs/CSS/css-outline.md
deleted file mode 100644
index 951ec4a77..000000000
--- a/docs/CSS/css-outline.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# CSS Outlines
-
-An outline is a line drawn outside the element's border.
-An outline is a line that is drawn around elements, OUTSIDE the borders, to make the element "stand out".
-
-CSS has the following outline properties:
-
-- `outline-style`
-- `outline-color`
-- `outline-width`
-- `outline-offset`
-- `outline`
-
-Note: Outline differs from borders! Unlike border, the outline is drawn outside the element's border, and may overlap other content. Also, the outline is NOT a part of the element's dimensions; the element's total width and height are not affected by the width of the outline.
-
-## CSS Outline Style
-
-The `outline-style` property specifies the style of the outline, and can have one of the following values:
-
-- `dotted` - Defines a dotted outline
-- `dashed` - Defines a dashed outline
-- `solid` - Defines a solid outline
-- `double` - Defines a double outline
-- `groove` - Defines a 3D grooved outline
-- `ridge` - Defines a 3D ridged outline
-- `inset` - Defines a 3D inset outline
-- `outset` - Defines a 3D outset outline
-- `none` - Defines no outline
-- `hidden` - Defines a hidden outline
-
-The following example shows the different outline-style values:
-
-```css
-p.dotted {outline-style: dotted;}
-p.dashed {outline-style: dashed;}
-p.solid {outline-style: solid;}
-p.double {outline-style: double;}
-p.groove {outline-style: groove;}
-p.ridge {outline-style: ridge;}
-p.inset {outline-style: inset;}
-p.outset {outline-style: outset;}
-```
-
-#### Output
-
-
A dotted outline.
-
A dashed outline.
-
A solid outline.
-
A double outline.
-
A groove outline. The effect depends on the outline-color value.
-
A ridge outline. The effect depends on the outline-color value.
-
An inset outline. The effect depends on the outline-color value.
-
An outset outline. The effect depends on the outline-color value.
-
-## CSS Outline Width
-
-The `outline-width` property specifies the width of the outline, and can have one of the following values:
-
-- `thin` (typically 1px)
-- `medium` (typically 3px)
-- `thick` (typically 5px)
-- A specific size (in px, pt, cm, em, etc)
-
-The following example shows some outlines with different widths:
-
-```css
-p.ex1 {
- border: 1px solid black;
- outline-style: solid;
- outline-color: red;
- outline-width: thin;
-}
-
-p.ex2 {
- border: 1px solid black;
- outline-style: solid;
- outline-color: red;
- outline-width: medium;
-}
-
-p.ex3 {
- border: 1px solid black;
- outline-style: solid;
- outline-color: red;
- outline-width: thick;
-}
-
-p.ex4 {
- border: 1px solid black;
- outline-style: solid;
- outline-color: red;
- outline-width: 4px;
-}
-```
-
-#### Output
-
-
A thin outline.
-
A medium outline.
-
A thick outline.
-
A 4px thick outline.
-
-## CSS Outline Color
-
-The `outline-color` property is used to set the color of the outline.
-
-The color can be set by:
-
-- Name - specify a color name, like "red"
-- HEX - specify a hex value, like "#ff0000"
-- RGB - specify an RGB value, like "rgb(255,0,0)"
-- HSL - specify an HSL value, like "hsl(0, 100%, 50%)"
-- invert - performs a color inversion (which ensures that the outline is visible, regardless of color background)
-
-The following example shows some different outlines with different colors. Also notice that these elements also have a thin black border inside the outline:
-
-```css
-p.ex1 {
- border: 2px solid black;
- outline-style: solid;
- outline-color: red;
-}
-
-p.ex2 {
- border: 2px solid black;
- outline-style: dotted;
- outline-color: blue;
-}
-
-p.ex3 {
- border: 2px solid black;
- outline-style: outset;
- outline-color: grey;
-}
-```
-
-#### Output
-
-
A solid red outline.
-
A dotted blue outline.
-
An outset grey outline.
-
-## CSS Outline - Shorthand property
-
-The `outline` property is a shorthand property for setting the following individual outline properties:
-
-- `outline-width`
-- `outline-style` (required)
-- `outline-color`
-
-The outline property is specified as one, two, or three values from the list above. The order of the values does not matter.
-
-The following example shows some outlines specified with the shorthand outline property:
-
-```css
-p.ex1 {outline: dashed;}
-p.ex2 {outline: dotted red;}
-p.ex3 {outline: 5px solid yellow;}
-p.ex4 {outline: thick ridge pink;}
-```
-
-#### Output
-
-
A dashed outline.
-
A dotted red outline.
-
A 5px solid yellow outline.
-
A thick ridge pink outline.
-
\ No newline at end of file
diff --git a/docs/CSS/css-padding.md b/docs/CSS/css-padding.md
deleted file mode 100644
index a37d1273e..000000000
--- a/docs/CSS/css-padding.md
+++ /dev/null
@@ -1,198 +0,0 @@
-# CSS Padding
-
-Padding is used to create space around an element's content, inside of any defined borders. The CSS padding properties are used to generate space around an element's content, inside of any defined borders.
-
-With CSS, you have full control over the padding. There are properties for setting the padding for each side of an element (top, right, bottom, and left).
-
-## Padding - Individual Sides
-
-CSS has properties for specifying the padding for each side of an element:
-
-- `padding-top`
-- `padding-right`
-- `padding-bottom`
-- `padding-left`
-
-All the padding properties can have the following values:
-
-- `length` - specifies a padding in px, pt, cm, etc.
-- `%` - specifies a padding in % of the width of the containing element
-- `inherit` - specifies that the padding should be inherited from the parent element
-
-Note: Negative values are not allowed.
-
-### Example
-
-Set different padding for all four sides of a `
- This div has different padding for all four sides.
-
-
-## Padding - Shorthand Property
-
-To shorten the code, it is possible to specify all the padding properties in one property.
-
-The `padding` property is a shorthand property for the following individual padding properties:
-
-- `padding-top`
-- `padding-right`
-- `padding-bottom`
-- `padding-left`
-
-### If the padding property has four values:
-
-```css
-padding: 25px 50px 75px 100px;
-```
-
-- `top` padding is 25px
-- `right` padding is 50px
-- `bottom` padding is 75px
-- `left` padding is 100px
-
-### Example
-
-Use the padding shorthand property with four values:
-
-```css
-div {
- padding: 25px 50px 75px 100px;
-}
-```
-
-#### Output
-
-
- This div uses the padding shorthand with four values.
-
-
-### If the padding property has three values:
-
-```css
-padding: 25px 50px 75px;
-```
-
-- `top` padding is 25px
-- `right` and `left` paddings are 50px
-- `bottom` padding is 75px
-
-### Example
-
-Use the padding shorthand property with three values:
-
-```css
-div {
- padding: 25px 50px 75px;
-}
-```
-
-#### Output
-
-
- This div uses the padding shorthand with three values.
-
-
-### If the padding property has two values:
-
-```css
-padding: 25px 50px;
-```
-
-- `top` and `bottom` paddings are 25px
-- `right` and `left` paddings are 50px
-
-### Example
-
-Use the padding shorthand property with two values:
-
-```css
-div {
- padding: 25px 50px;
-}
-```
-
-#### Output
-
-
- This div uses the padding shorthand with two values.
-
-
-### If the padding property has one value:
-
-```css
-padding: 25px;
-```
-
-- all four paddings are 25px
-
-### Example
-
-Use the padding shorthand property with one value:
-
-```css
-div {
- padding: 25px;
-}
-```
-
-#### Output
-
-
- This div uses the padding shorthand with one value.
-
-
-## Padding and Element Width
-
-The CSS `width` property specifies the width of the element's content area. The content area is the portion inside the padding, border, and margin of an element (the box model).
-
-So, if an element has a specified width, the padding added to that element will be added to the total width of the element. This is often an undesirable result.
-
-### Example
-
-Here, the `
` element is given a width of 300px. However, the actual width of the `
` element will be 350px (300px + 25px of left padding + 25px of right padding):
-
-```css
-div {
- width: 300px;
- padding: 25px;
-}
-```
-
-#### Output
-
-
- This div's total width is 350px due to padding.
-
-
-To keep the width at 300px, no matter the amount of padding, you can use the `box-sizing` property. This causes the element to maintain its actual width; if you increase the padding, the available content space will decrease.
-
-### Example
-
-Use the `box-sizing` property to keep the width at 300px, no matter the amount of padding:
-
-```css
-div {
- width: 300px;
- padding: 25px;
- box-sizing: border-box;
-}
-```
-
-#### Output
-
-
- This div's total width remains 300px due to box-sizing.
-
-
\ No newline at end of file
diff --git a/docs/CSS/css-transitions.md b/docs/CSS/css-transitions.md
deleted file mode 100644
index fc290e3c9..000000000
--- a/docs/CSS/css-transitions.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# CSS Transitions
-
-## Introduction
-
-CSS transitions provide a way to control the speed of animation changes to CSS properties. This can enhance the user experience by making the changes appear smooth and visually appealing.
-
-## Basic Concepts
-
-### What is a Transition?
-
-A transition is a way to animate a property change over a given duration.
-
-```css
-.element {
- transition: property duration timing-function delay;
-}
-```
-## Transition Properties
-
-### transition-property
-
-Specifies the name of the CSS property the transition effect is for.
-Example: width, height, background-color, etc
-
-```css
-.element {
- transition-property: background-color;
-}
-```
-
-### transition-duration
-
-Specifies the duration over which the transition should occur.
-Example: 1s, 200ms, etc
-
-```css
-.element {
- transition-duration: 1s;
-}
-```
-
-### transition-timing-function
-
-Specifies the speed curve of the transition effect.
-Example: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier(n,n,n,n)
-
-```css
-.element {
- transition-timing-function: ease-in-out;
-}
-```
-
-### transition-delay
-
-Specifies when the transition effect will start.
-Example: 0s, 1s, etc.
-
-```css
-.element {
- transition-delay: 0.5s;
-}
-```
-
-
-## Shorthand Property
-
-You can combine all the individual transition properties into one shorthand property.
-
-```css
-.element {
- transition: background-color 1s ease-in-out 0.5s;
-}
-```
-
-## Basic Transition
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Transition Multiple Properties
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Delayed Transition
-
-```html
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Conclusion
-CSS transitions provide a simple way to create smooth animations and improve the user experience. Using the various transition properties, you can control your animations' timing, speed, and behaviour to create visually appealing effects.
diff --git a/docs/CSS/introduction/_category_.json b/docs/CSS/introduction/_category_.json
new file mode 100644
index 000000000..b490ad00f
--- /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 000000000..4be6437a8
--- /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 000000000..5b239b7c0
--- /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 `
+
+
+