codeharborhub · ajay-dhangar · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025 · Oct 23, 2025
@@ -1,12 +1,9 @@
 ---
-id: introdution
 title: Introduction to the CSS Box Model
 sidebar_label: Introduction
-sidebar_position: 1
 keywords: [css box model, box model, css layout, css box model introduction]
 description: "Learn about the CSS box model and how it is used to layout elements on a web page."
 tags: [css, box model, css layout, css box model introduction]
-hide_table_of_contents: true
 ---
 
 import BoxModelDiagram from './script/BoxModelDiagram';

@@ -138,7 +138,7 @@ In the example above, HSLA color values are used to specify the colors of the `<
 
 By using HSLA color values, you can enhance the visual appearance of your web designs and create engaging color schemes with varying levels of transparency. HSLA color values provide a flexible way to specify colors based on hue, saturation, lightness, and alpha values, allowing you to create unique color effects and visually appealing designs in your web projects.
 
-If you want to learn more about CSS colors, you can check out our [CSS Colors](/tutorial/category/colors) guide for additional information on color models, color functions, and color formats in CSS.
+If you want to learn more about CSS colors, you can check out our [CSS Colors](/tutorial/css/colors/color-names) guide for additional information on color models, color functions, and color formats in CSS.
 
 ## Conclusion
 

@@ -1,8 +1,6 @@
 ---
-id: font-align
 title: "CSS Font Alignment"
 sidebar_label: "Font Alignment"
-sidebar_position: 8
 tags: ["css", "font alignment", "css font alignment", "css text alignment", "css text properties"]
 description: "Learn how to use the CSS `text-align` property to align text within a container on your web page."
 keywords:
@@ -11,7 +9,6 @@ keywords:
   - 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.

@@ -1,8 +1,6 @@
 ---
-id: font-size
 title: "CSS Font Size"
 sidebar_label: "Font Size"
-sidebar_position: 2
 keywords:
   - css font size
   - font size css
@@ -17,7 +15,6 @@ 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.

@@ -1,8 +1,6 @@
 ---
-id: font-style
 title: "CSS Font Style"
 sidebar_label: "Font Style"
-sidebar_position: 7
 keywords:
   - css font style
   - css font style property
@@ -17,7 +15,6 @@ 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.

@@ -1,8 +1,6 @@
 ---
-id: font-weight
 title: "CSS Font Weight"
 sidebar_label: "Font Weight"
-sidebar_position: 3
 keywords:
   - css font weight
   - font weight css
@@ -17,7 +15,6 @@ 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.

@@ -1,8 +1,6 @@
 ---
-id: generic-vs-specific-font-families
 title: "CSS Generic vs. Specific Font Families"
 sidebar_label: "Generic vs. Specific Font Families"
-sidebar_position: 1
 keywords:
   - css font families
   - css generic font families
@@ -18,7 +16,6 @@ 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.

@@ -1,8 +1,6 @@
 ---
-id: comments-in-css
-title: Comments in CSS
+title: "Comments in CSS"
 sidebar_label: Comments in CSS
-sidebar_position: 3
 tags:
   [
     comments-in-css,
@@ -32,7 +30,6 @@ keywords:
     css tutorial for beginners 2025,
     css tutorial for learning,
   ]
-hide_table_of_contents: true
 ---
 
 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.

@@ -1,8 +1,5 @@
 ---
-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
+title: "How to Add CSS to HTML"
 tags:
   [
     how-to-add-css-to-html,
@@ -32,7 +29,6 @@ keywords:
     css tutorial for beginners 2025,
     css tutorial for learning,
   ]
-hide_table_of_contents: true
 ---
 
 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.

@@ -1,8 +1,6 @@
 ---
-id: what-is-css
 title: What is CSS
 sidebar_label: What is CSS
-sidebar_position: 1
 tags:
   [
     what-is-css,
@@ -33,7 +31,6 @@ keywords:
     css tutorial for beginners 2025,
     css tutorial for learning,
   ]
-hide_table_of_contents: true
 ---
 
 In this tutorial, you will learn what is CSS, why it is used, and how it works. CSS 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. CSS is an essential tool for web developers and designers, and it is used by millions of websites around the world.

@@ -1,8 +1,6 @@
 ---
-id: opacity
 title: "CSS Opacity"
 sidebar_label: "Opacity"
-sidebar_position: 8
 keywords:
   - css opacity
   - opacity css
@@ -17,7 +15,6 @@ tags:
     - css transparency
     - css alpha
     - css rgba
-hide_table_of_contents: true
 ---
 
 In CSS, the `opacity` property is used to set the transparency of an element. It can take a value from `0.0` (fully transparent) to `1.0` (fully opaque). The `opacity` property affects the entire element, including its text and any child elements. By adjusting the opacity of an element, you can create visually appealing effects such as transparent overlays, faded images, and subtle text highlights.
@@ -192,7 +189,7 @@ By using the `opacity` property in CSS, you can create various visual effects on
 
 :::note Try it yourself
 
-Compare this snippet from [CSS Box Model](/tutorial/category/box-model) to learn how to use the CSS box model to control the layout and spacing of elements on your web page.
+Compare this snippet from [CSS Box Model](/tutorial/css/box-model/intro) to learn how to use the CSS box model to control the layout and spacing of elements on your web page.
 
 :::
 

@@ -1,8 +1,6 @@
 ---
-id: attribute-selectors
 title: Attribute Selectors
 sidebar_label: Attribute Selectors
-sidebar_position: 2
 tags: ['css-selectors', 'attribute-selectors', 'css', 'selectors']
 description: "Grouping selectors with attribute selectors in CSS allows you to apply the same styles to multiple selectors based on their attributes."
 keywords:
@@ -17,7 +15,6 @@ keywords:
   - 'css'
   - 'selectors'
   - 'simple selectors'
-hide_table_of_contents: true
 ---
 
 In CSS, you can group multiple selectors together to apply the same styles to all of them. This is called grouping selectors. Grouping selectors can help you write more concise and maintainable CSS code.

@@ -1,8 +1,6 @@
 ---
-id: adjacent-sibling-selector
 title: Adjacent Sibling Selector
 sidebar_label: Adjacent Sibling Selector
-position: 3
 tags: [selector, combinator, adjacent-sibling]
 description: "Adjacent sibling selector is used to select an element that is immediately preceded by another element."
 keywords:
@@ -13,7 +11,6 @@ keywords:
     css combinator,
     css adjacent sibling combinator,
   ]
-hide_table_of_contents: true
 ---
 
 In CSS, the adjacent sibling selector is used to select an element that is immediately preceded by another element. The adjacent sibling selector is represented by the `+` character between two selectors.

@@ -1,12 +1,9 @@
 ---
-id: child-selector
 title: Child Selector
 sidebar_label: Child Selector
-sidebar_position: 2
 tags: [selector, combinator, child]
 description: "Child selector is used to select an element that is a direct child of another element."
 keywords: [child selector, css child selector, css selector, css combinator, css child combinator]
-hide_table_of_contents: true
 ---
 
 In CSS, the child selector is used to select an element that is a direct child of another element. The child selector is represented by the `>` character between two selectors.

@@ -1,12 +1,9 @@
 ---
-id: descendant-selector
 title: Descendant Selector
 sidebar_label: Descendant Selector
-sidebar_position: 1
 tags: [selector, combinator, descendant]
 description: "Descendant selector is used to select an element that is a descendant of another element."
 keywords: [descendant selector, css descendant selector, css selector, css combinator, css descendant combinator]
-hide_table_of_contents: true
 ---
 
 In CSS, the descendant selector is used to select an element that is a descendant of another element. The descendant selector is represented by a whitespace character (` `) between two selectors.

@@ -1,8 +1,6 @@
 ---
-id: general-sibling-selector
 title: General Sibling Selector
 sidebar_label: General Sibling Selector
-position: 4
 tags: [selector, combinator, general-sibling]
 description: "General sibling selector is used to select an element that is preceded by another element."
 keywords:
@@ -13,7 +11,6 @@ keywords:
     css combinator,
     css general sibling combinator,
   ]
-hide_table_of_contents: true
 ---
 
 In CSS, the general sibling selector is used to select an element that is preceded by another element. The general sibling selector is represented by the `~` character between two selectors.

@@ -1,8 +1,5 @@
 ---
-id: compound-selectors
-title: Compound Selectors
-sidebar_label: Compound Selectors
-sidebar_position: 4
+title: "Compound Selectors"
 tags: [selector, compound]
 description: "Compound selectors are used to select elements based on multiple conditions."
 keywords:
@@ -12,7 +9,6 @@ keywords:
     css selectors,
     css compound,
   ]
-hide_table_of_contents: true
 ---
 
 In CSS, compound selectors are used to select elements based on multiple conditions. Compound selectors are created by combining two or more simple selectors. Compound selectors allow you to target elements based on multiple conditions, such as the presence of a class and an attribute, or the type of an element and its state.

@@ -1,5 +1,4 @@
 ---
-id: pseudo-class-selectors
 title: "Pseudo-Class Selectors"
 sidebar_label: "Pseudo-Class Selectors"
 tags: ["selector", "pseudo-class"]
@@ -11,8 +10,6 @@ keywords:
     "css selectors",
     "css pseudo-class",
   ]
-sidebar_position: 6
-hide_table_of_contents: true
 ---
 
 In CSS, pseudo-class selectors are used to style elements based on their state or position in the document. Pseudo-class selectors are represented by a colon `:` followed by the name of the pseudo-class. Pseudo-class selectors allow you to style elements based on user interaction, such as hovering over an element, or based on the position of an element in the document tree, such as the first child of a parent element.