Reformate Docs

docs/css/backgrounds/background-color.md → docs/css/backgrounds/background-color.mdx

@@ -4,19 +4,21 @@ 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.
+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,
   ]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -53,6 +55,7 @@ In the HTML code below, the CSS rule will apply the light blue color to the back
 By using the `background-color` property, you can customize the background color of elements on your web page to create visually appealing designs.
 
 <AdsComponent />
+<br />
 
 :::info Additional Information
 

docs/css/backgrounds/background-image/background-attachment.md → docs/css/backgrounds/background-image/background-attachment.mdx

@@ -4,19 +4,21 @@ 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.
+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,
   ]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -57,6 +59,7 @@ In the HTML code below, the CSS rule will apply the `fixed` background attachmen
 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.
 
 <AdsComponent />
+<br />
 
 :::info Additional Information
 
@@ -128,6 +131,7 @@ Now, you can see the output of the above code in the Browser Window like this:
 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.
 
 <AdsComponent />
+<br />
 
 ## Conclusion
 

docs/css/backgrounds/background-image/background-position.md → docs/css/backgrounds/background-image/background-position.mdx

@@ -4,19 +4,21 @@ 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.
+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,
   ]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -67,6 +69,7 @@ In the HTML code below, the CSS rule will apply the `center` background position
 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.
 
 <AdsComponent />
+<br />
 
 :::note Try it yourself
 

docs/css/backgrounds/background-image/background-repeat.md → docs/css/backgrounds/background-image/background-repeat.mdx

@@ -4,19 +4,21 @@ 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.
+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,
   ]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -64,6 +66,7 @@ In the HTML code below, the CSS rule will apply the `repeat` background repeat t
 In this example, the background image will be repeated in both the horizontal and vertical directions to fill the background area of the `<div>` element. You can adjust the `background-repeat` property to control how the background image is repeated based on your design requirements. 
 
 <AdsComponent />
+<br />
 
 :::note Try it yourself
 

docs/css/backgrounds/background-image/background-size.md → docs/css/backgrounds/background-image/background-size.mdx

@@ -4,19 +4,21 @@ 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.
+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,
   ]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -63,6 +65,7 @@ In the HTML code below, the CSS rule will apply the `cover` background size to t
 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.
 
 <AdsComponent />
+<br />
 
 :::tip additional information
 

docs/css/box-model/border-radius.md → docs/css/box-model/border-radius.mdx

@@ -12,13 +12,15 @@ keywords:
     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.
+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]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -71,6 +73,7 @@ In the HTML code above, the CSS rule will apply the specified `border-radius` va
 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.
 
 <AdsComponent />
+<br />
 
 :::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.

docs/css/box-model/border.md → docs/css/box-model/border.mdx

@@ -14,13 +14,15 @@ keywords:
     css border shorthand,
     border values,
   ]
-description: Learn how to use the CSS border property to create borders around elements in your web page layout.
+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]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -72,6 +74,7 @@ div {
 In this example, the border around the `<div>` 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.
 
 <AdsComponent />
+<br />
 
 :::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.

docs/css/box-model/box-sizing.md → docs/css/box-model/box-sizing.mdx

@@ -4,13 +4,15 @@ 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.
+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]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -52,6 +54,7 @@ In the HTML code below, the CSS rule will apply the `border-box` sizing behavior
 In this example, the total width of the `<div>` element will be `200px`, including the padding and border, due to the `border-box` value of the `box-sizing` property.
 
 <AdsComponent />
+<br />
 
 :::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.
@@ -104,6 +107,7 @@ Now, you can see the output of the above code in the Browser Window like this:
 In this example, the total width of the `<div>` 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.
 
 <AdsComponent />
+<br />
 
 ### Example 2: Using `border-box`
 

docs/css/box-model/intro.md → docs/css/box-model/intro.mdx

@@ -4,15 +4,17 @@ 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.
+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]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 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.
 
@@ -65,6 +67,7 @@ By understanding the box model and how it works, you can create more effective a
 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.
 
 <AdsComponent />
+<br />
 
 :::info Key Points
 

docs/css/box-model/margin-callapse.md → docs/css/box-model/margin-callapse.mdx

@@ -15,11 +15,13 @@ tags:
     - css margin collapse
     - css box model
     - css box model margin collapse
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## How Margin Collapse Works
 
@@ -72,6 +74,7 @@ You can also prevent margin collapse by using the `overflow: hidden` property on
 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.
 
 <AdsComponent />
+<br />
 
 :::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.

docs/css/box-model/margin.md → docs/css/box-model/margin.mdx

@@ -12,13 +12,15 @@ keywords:
     margin shorthand,
     margin values,
   ]
-description: Learn how to use the CSS margin property to create space around elements in your web page layout.
+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]
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -76,6 +78,7 @@ In the HTML code below, the CSS rule will apply the `20px` margin to the `<div>`
 By adjusting the margin values, you can control the spacing between elements and create visually appealing layouts in your web page design.
 
 <AdsComponent />
+<br />
 
 :::info Additional Information
 

docs/css/box-model/max-width-height.md → docs/css/box-model/max-width-height.mdx

@@ -13,18 +13,20 @@ keywords:
   - 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.
+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
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -68,6 +70,7 @@ In this example, the `<div>` element will not grow larger than `300px` in width
 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.
 
 <AdsComponent />
+<br />
 
 :::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.

docs/css/box-model/min-width-height.md → docs/css/box-model/min-width-height.mdx

@@ -13,18 +13,20 @@ keywords:
   - 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.
+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
+hide_table_of_contents: true
 ---
 
 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.
 
 <AdsComponent />
+<br />
 
 ## Syntax
 
@@ -79,6 +81,7 @@ For more information on browser support, you can refer to the [MDN Web Docs](htt
 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.
 
 <AdsComponent />
+<br />
 
 :::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.