diff --git a/docs/css/backgrounds/background-color.md b/docs/css/backgrounds/background-color.mdx similarity index 96% rename from docs/css/backgrounds/background-color.md rename to docs/css/backgrounds/background-color.mdx index 09793e9..4d08033 100644 --- a/docs/css/backgrounds/background-color.md +++ b/docs/css/backgrounds/background-color.mdx @@ -4,7 +4,7 @@ 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, @@ -12,11 +12,13 @@ keywords: 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. +
## 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. +
:::info Additional Information diff --git a/docs/css/backgrounds/background-image/background-attachment.md b/docs/css/backgrounds/background-image/background-attachment.mdx similarity index 96% rename from docs/css/backgrounds/background-image/background-attachment.md rename to docs/css/backgrounds/background-image/background-attachment.mdx index 010adf2..7feb556 100644 --- a/docs/css/backgrounds/background-image/background-attachment.md +++ b/docs/css/backgrounds/background-image/background-attachment.mdx @@ -4,7 +4,7 @@ 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, @@ -12,11 +12,13 @@ keywords: 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. +
## 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. +
:::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. +
## Conclusion diff --git a/docs/css/backgrounds/background-image/background-position.md b/docs/css/backgrounds/background-image/background-position.mdx similarity index 97% rename from docs/css/backgrounds/background-image/background-position.md rename to docs/css/backgrounds/background-image/background-position.mdx index bad87f9..36cec36 100644 --- a/docs/css/backgrounds/background-image/background-position.md +++ b/docs/css/backgrounds/background-image/background-position.mdx @@ -4,7 +4,7 @@ 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, @@ -12,11 +12,13 @@ keywords: 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. +
## 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. +
:::note Try it yourself diff --git a/docs/css/backgrounds/background-image/background-repeat.md b/docs/css/backgrounds/background-image/background-repeat.mdx similarity index 97% rename from docs/css/backgrounds/background-image/background-repeat.md rename to docs/css/backgrounds/background-image/background-repeat.mdx index a7a43fa..e701aee 100644 --- a/docs/css/backgrounds/background-image/background-repeat.md +++ b/docs/css/backgrounds/background-image/background-repeat.mdx @@ -4,7 +4,7 @@ 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, @@ -12,11 +12,13 @@ keywords: 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. +
## 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 `
` 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 diff --git a/docs/css/backgrounds/background-image/background-size.md b/docs/css/backgrounds/background-image/background-size.mdx similarity index 97% rename from docs/css/backgrounds/background-image/background-size.md rename to docs/css/backgrounds/background-image/background-size.mdx index 035a54d..a517c75 100644 --- a/docs/css/backgrounds/background-image/background-size.md +++ b/docs/css/backgrounds/background-image/background-size.mdx @@ -4,7 +4,7 @@ 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, @@ -12,11 +12,13 @@ keywords: 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. +
## 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. +
:::tip additional information diff --git a/docs/css/box-model/border-radius.md b/docs/css/box-model/border-radius.mdx similarity index 97% rename from docs/css/box-model/border-radius.md rename to docs/css/box-model/border-radius.mdx index cd84261..ddeb552 100644 --- a/docs/css/box-model/border-radius.md +++ b/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. +
## 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. +
:::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. diff --git a/docs/css/box-model/border.md b/docs/css/box-model/border.mdx similarity index 97% rename from docs/css/box-model/border.md rename to docs/css/box-model/border.mdx index e669a3c..7bef3e4 100644 --- a/docs/css/box-model/border.md +++ b/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. +
## Syntax @@ -72,6 +74,7 @@ div { 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. diff --git a/docs/css/box-model/box-sizing.md b/docs/css/box-model/box-sizing.mdx similarity index 96% rename from docs/css/box-model/box-sizing.md rename to docs/css/box-model/box-sizing.mdx index 223e0bb..82ebe70 100644 --- a/docs/css/box-model/box-sizing.md +++ b/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. +
## 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 `
` 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. @@ -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 `
` 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` diff --git a/docs/css/box-model/intro.md b/docs/css/box-model/intro.mdx similarity index 96% rename from docs/css/box-model/intro.md rename to docs/css/box-model/intro.mdx index 69204e9..8fdba74 100644 --- a/docs/css/box-model/intro.md +++ b/docs/css/box-model/intro.mdx @@ -4,8 +4,9 @@ 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'; @@ -13,6 +14,7 @@ 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. @@ -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. +
:::info Key Points diff --git a/docs/css/box-model/margin-callapse.md b/docs/css/box-model/margin-callapse.mdx similarity index 99% rename from docs/css/box-model/margin-callapse.md rename to docs/css/box-model/margin-callapse.mdx index f8940e8..7fbe038 100644 --- a/docs/css/box-model/margin-callapse.md +++ b/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. +
## 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. +
:::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. diff --git a/docs/css/box-model/margin.md b/docs/css/box-model/margin.mdx similarity index 97% rename from docs/css/box-model/margin.md rename to docs/css/box-model/margin.mdx index 40ccdc6..08fb79b 100644 --- a/docs/css/box-model/margin.md +++ b/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. +
## Syntax @@ -76,6 +78,7 @@ In the HTML code below, the CSS rule will apply the `20px` margin to the `
` 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 diff --git a/docs/css/box-model/max-width-height.md b/docs/css/box-model/max-width-height.mdx similarity index 96% rename from docs/css/box-model/max-width-height.md rename to docs/css/box-model/max-width-height.mdx index 8746317..3417146 100644 --- a/docs/css/box-model/max-width-height.md +++ b/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. +
## Syntax @@ -68,6 +70,7 @@ In this example, the `
` 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. +
:::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. diff --git a/docs/css/box-model/min-width-height.md b/docs/css/box-model/min-width-height.mdx similarity index 97% rename from docs/css/box-model/min-width-height.md rename to docs/css/box-model/min-width-height.mdx index 489b957..7c01c10 100644 --- a/docs/css/box-model/min-width-height.md +++ b/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. +
## 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. +
:::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. diff --git a/docs/css/box-model/padding.md b/docs/css/box-model/padding.mdx similarity index 97% rename from docs/css/box-model/padding.md rename to docs/css/box-model/padding.mdx index 5b1dc15..02b3432 100644 --- a/docs/css/box-model/padding.md +++ b/docs/css/box-model/padding.mdx @@ -12,13 +12,15 @@ keywords: padding shorthand, padding values, ] -description: Learn how to use the CSS padding property to create space inside elements in your web page layout. +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] +hide_table_of_contents: true --- 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 @@ -77,6 +79,7 @@ In the HTML code below, the CSS rule will apply the `20px` padding to the `
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 @@ -145,6 +148,7 @@ In the HTML code below, the CSS rule will apply the percentage-based padding val 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. diff --git a/docs/css/box-model/width-height.md b/docs/css/box-model/width-height.mdx similarity index 97% rename from docs/css/box-model/width-height.md rename to docs/css/box-model/width-height.mdx index b9a1db4..f5b3590 100644 --- a/docs/css/box-model/width-height.md +++ b/docs/css/box-model/width-height.mdx @@ -15,13 +15,15 @@ keywords: 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. +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] +hide_table_of_contents: true --- 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 @@ -71,6 +73,7 @@ In the HTML code below, the CSS rule will apply the specified width and height v 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. @@ -124,6 +127,7 @@ 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 @@ -172,6 +176,7 @@ 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 @@ -222,6 +227,7 @@ Now, you can see the output of the above code in the Browser Window like this: 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` @@ -272,6 +278,7 @@ Now, you can see the output of the above code in the Browser Window like this: 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. diff --git a/docs/css/colors/color-names.md b/docs/css/colors/color-names.mdx similarity index 99% rename from docs/css/colors/color-names.md rename to docs/css/colors/color-names.mdx index 5db5930..02feb1f 100644 --- a/docs/css/colors/color-names.md +++ b/docs/css/colors/color-names.mdx @@ -3,7 +3,7 @@ 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. +description: "Color names are predefined names for colors that can be used in CSS to style elements." keywords: [ color names, diff --git a/docs/css/colors/hex.md b/docs/css/colors/hex.mdx similarity index 96% rename from docs/css/colors/hex.md rename to docs/css/colors/hex.mdx index f8df82d..03cdc46 100644 --- a/docs/css/colors/hex.md +++ b/docs/css/colors/hex.mdx @@ -3,7 +3,7 @@ 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. +description: "Hex color values are used to specify colors in CSS using hexadecimal notation. Learn how to use hex color values to create a wide range of colors for your web designs." keywords: [ hex color values, @@ -12,11 +12,13 @@ keywords: hex color, ] sidebar_position: 3 +hide_table_of_contents: true --- 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 @@ -55,6 +57,7 @@ By using hex color values, you can easily specify colors in CSS and create visua ::: +
## Example @@ -97,6 +100,7 @@ In the HTML code below, the CSS rule will apply the red color to the `

` eleme 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 diff --git a/docs/css/colors/hsl.md b/docs/css/colors/hsl.mdx similarity index 97% rename from docs/css/colors/hsl.md rename to docs/css/colors/hsl.mdx index 24a0fbb..3922063 100644 --- a/docs/css/colors/hsl.md +++ b/docs/css/colors/hsl.mdx @@ -3,7 +3,7 @@ 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. +description: "HSL color values are used to specify colors in CSS using the hue, saturation, and lightness color channels." keywords: [ hsl color values, @@ -12,6 +12,7 @@ keywords: hsl color, ] sidebar_position: 5 +hide_table_of_contents: true --- import './css/style.css'; @@ -19,6 +20,7 @@ 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 @@ -54,6 +56,7 @@ In the HTML code below, the CSS rule will apply the green color with 50% lightne ``` +
:::info Additional Information diff --git a/docs/css/colors/hsla.md b/docs/css/colors/hsla.mdx similarity index 97% rename from docs/css/colors/hsla.md rename to docs/css/colors/hsla.mdx index 1b4df84..c52dcc4 100644 --- a/docs/css/colors/hsla.md +++ b/docs/css/colors/hsla.mdx @@ -3,7 +3,7 @@ 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. +description: "HSLA color values are used to specify colors in CSS using the hue, saturation, lightness, and alpha color channels." keywords: [ hsla color values, @@ -12,11 +12,13 @@ keywords: hsla color, ] sidebar_position: 6 +hide_table_of_contents: true --- 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 @@ -55,6 +57,7 @@ In the HTML code below, the CSS rule will apply the blue color with 50% transpar By using HSLA color values, you can create visually appealing color schemes with varying levels of transparency in your web designs. +
:::info Additional Information diff --git a/docs/css/colors/rgb.md b/docs/css/colors/rgb.mdx similarity index 96% rename from docs/css/colors/rgb.md rename to docs/css/colors/rgb.mdx index 7c346da..f03152a 100644 --- a/docs/css/colors/rgb.md +++ b/docs/css/colors/rgb.mdx @@ -3,7 +3,7 @@ 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. +description: "RGB color values are used to specify colors in CSS using the red, green, and blue color channels." keywords: [ rgb color values, @@ -12,11 +12,13 @@ keywords: rgb color, ] sidebar_position: 2 +hide_table_of_contents: true --- 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 @@ -79,6 +81,7 @@ The blue color channel controls the intensity of blue in the color. A value of 0 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 diff --git a/docs/css/colors/rgba.md b/docs/css/colors/rgba.mdx similarity index 97% rename from docs/css/colors/rgba.md rename to docs/css/colors/rgba.mdx index 0b4f07f..5d9146c 100644 --- a/docs/css/colors/rgba.md +++ b/docs/css/colors/rgba.mdx @@ -3,7 +3,7 @@ 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. +description: "RGBA color values are used to specify colors in CSS using the red, green, blue, and alpha color channels." keywords: [ rgba color values, @@ -12,11 +12,13 @@ keywords: rgba color, ] sidebar_position: 4 +hide_table_of_contents: true --- 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 @@ -70,6 +72,7 @@ The RGBA color model is an extension of the RGB color model that includes an add 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 diff --git a/docs/css/fonts-and-text-properties/font-align.md b/docs/css/fonts-and-text-properties/font-align.mdx similarity index 98% rename from docs/css/fonts-and-text-properties/font-align.md rename to docs/css/fonts-and-text-properties/font-align.mdx index 694fcb6..9a50992 100644 --- a/docs/css/fonts-and-text-properties/font-align.md +++ b/docs/css/fonts-and-text-properties/font-align.mdx @@ -4,18 +4,20 @@ 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. +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 +hide_table_of_contents: true --- 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. @@ -84,6 +86,7 @@ The `text-align` property can be applied to various text elements, such as headi ::: +
### 2. Justifying Text @@ -160,6 +163,7 @@ Experiment with different text alignment values to see how they affect the layou ::: +
### 4. Aligning Text to the Left diff --git a/docs/css/fonts-and-text-properties/font-size.md b/docs/css/fonts-and-text-properties/font-size.mdx similarity index 98% rename from docs/css/fonts-and-text-properties/font-size.md rename to docs/css/fonts-and-text-properties/font-size.mdx index 385375f..ca74116 100644 --- a/docs/css/fonts-and-text-properties/font-size.md +++ b/docs/css/fonts-and-text-properties/font-size.mdx @@ -9,7 +9,7 @@ keywords: - 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. +description: "Learn how to set the font size of text using the CSS font-size property." tags: - css - font size @@ -17,11 +17,13 @@ tags: - css text size - css font size property - css font size example +hide_table_of_contents: true --- 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 @@ -39,6 +41,7 @@ selector { - 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. @@ -123,6 +126,7 @@ You can also set the font size using ems (`em`) as the unit of measurement. The +
:::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. @@ -197,6 +201,7 @@ You can also use rems (`rem`) as a relative unit of measurement for font size. T +
:::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. @@ -276,6 +281,7 @@ Viewport units (`vw`, `vh`, `vmin`, `vmax`) are relative to the size of the view ::: +
### 7. Setting the Font Size Using Absolute Units diff --git a/docs/css/fonts-and-text-properties/font-style.md b/docs/css/fonts-and-text-properties/font-style.mdx similarity index 96% rename from docs/css/fonts-and-text-properties/font-style.md rename to docs/css/fonts-and-text-properties/font-style.mdx index 4872339..c5f1879 100644 --- a/docs/css/fonts-and-text-properties/font-style.md +++ b/docs/css/fonts-and-text-properties/font-style.mdx @@ -9,7 +9,7 @@ keywords: - 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. +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 @@ -17,11 +17,13 @@ tags: - css font style property - css font style values - css text properties +hide_table_of_contents: true --- 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 @@ -97,6 +99,7 @@ Experiment with different font styles to see how they affect the appearance of t ::: +
## Inheriting Font Style diff --git a/docs/css/fonts-and-text-properties/font-weight.md b/docs/css/fonts-and-text-properties/font-weight.mdx similarity index 97% rename from docs/css/fonts-and-text-properties/font-weight.md rename to docs/css/fonts-and-text-properties/font-weight.mdx index ce3a6c1..47481f3 100644 --- a/docs/css/fonts-and-text-properties/font-weight.md +++ b/docs/css/fonts-and-text-properties/font-weight.mdx @@ -9,7 +9,7 @@ keywords: - 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. +description: "Learn how to use the CSS `font-weight` property to control the thickness of text in your web page." tags: - css - font weight @@ -17,11 +17,13 @@ tags: - css bold text - css font weight property - css font weight values +hide_table_of_contents: true --- 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 @@ -84,6 +86,7 @@ The `font-weight` property can be applied to various text elements, such as head ::: +
### 2. Using Numeric Values for Font Weight 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.mdx similarity index 97% rename from docs/css/fonts-and-text-properties/generic-vs-specific-font-families.md rename to docs/css/fonts-and-text-properties/generic-vs-specific-font-families.mdx index 7d7521a..a264a31 100644 --- 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.mdx @@ -9,7 +9,7 @@ keywords: - 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. +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 @@ -18,11 +18,13 @@ tags: - css specific font families - css font-family property - css font-family values +hide_table_of_contents: true --- 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 diff --git a/docs/css/introduction/comments-in-css.md b/docs/css/introduction/comments-in-css.mdx similarity index 100% rename from docs/css/introduction/comments-in-css.md rename to docs/css/introduction/comments-in-css.mdx diff --git a/docs/css/introduction/how-to-add-css-to-html.md b/docs/css/introduction/how-to-add-css-to-html.mdx similarity index 100% rename from docs/css/introduction/how-to-add-css-to-html.md rename to docs/css/introduction/how-to-add-css-to-html.mdx diff --git a/docs/css/introduction/what-is-css.md b/docs/css/introduction/what-is-css.mdx similarity index 100% rename from docs/css/introduction/what-is-css.md rename to docs/css/introduction/what-is-css.mdx diff --git a/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md b/docs/css/selectors/combinator-selectors/adjacent-sibling-selector.mdx similarity index 100% rename from docs/css/selectors/combinator-selectors/adjacent-sibling-selector.md rename to docs/css/selectors/combinator-selectors/adjacent-sibling-selector.mdx diff --git a/docs/css/selectors/combinator-selectors/child-selector.md b/docs/css/selectors/combinator-selectors/child-selector.mdx similarity index 100% rename from docs/css/selectors/combinator-selectors/child-selector.md rename to docs/css/selectors/combinator-selectors/child-selector.mdx diff --git a/docs/css/selectors/combinator-selectors/descendant-selector.md b/docs/css/selectors/combinator-selectors/descendant-selector.mdx similarity index 100% rename from docs/css/selectors/combinator-selectors/descendant-selector.md rename to docs/css/selectors/combinator-selectors/descendant-selector.mdx diff --git a/docs/css/selectors/combinator-selectors/general-sibling-selector.md b/docs/css/selectors/combinator-selectors/general-sibling-selector.mdx similarity index 100% rename from docs/css/selectors/combinator-selectors/general-sibling-selector.md rename to docs/css/selectors/combinator-selectors/general-sibling-selector.mdx