diff --git a/docs/css/advanced-features/cascade-layers.mdx b/docs/css/advanced-features/cascade-layers.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/cascade-layers.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/advanced-features/css-functions.mdx b/docs/css/advanced-features/css-functions.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/css-functions.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/advanced-features/css-layers.mdx b/docs/css/advanced-features/css-layers.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/css-layers.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/advanced-features/css-variables.mdx b/docs/css/advanced-features/css-variables.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/css-variables.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/advanced-features/inheritance.mdx b/docs/css/advanced-features/inheritance.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/inheritance.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/advanced-features/shadow-dom.mdx b/docs/css/advanced-features/shadow-dom.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/shadow-dom.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/advanced-features/specificity.mdx b/docs/css/advanced-features/specificity.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/advanced-features/specificity.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-attachment.mdx b/docs/css/background/background-attachment.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-attachment.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-color.mdx b/docs/css/background/background-color.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-color.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-gradient.mdx b/docs/css/background/background-gradient.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-gradient.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-image.mdx b/docs/css/background/background-image.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-image.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-position.mdx b/docs/css/background/background-position.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-position.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-repeat.mdx b/docs/css/background/background-repeat.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-repeat.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-shorthand.mdx b/docs/css/background/background-shorthand.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-shorthand.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/background/background-size.mdx b/docs/css/background/background-size.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/background/background-size.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/backgrounds/background-color.mdx b/docs/css/backgrounds/background-color.mdx deleted file mode 100644 index 4d08033..0000000 --- a/docs/css/backgrounds/background-color.mdx +++ /dev/null @@ -1,116 +0,0 @@ ---- -id: background-color -title: Background Color -sidebar_label: Background Color -sidebar_position: 1 -tags: [background, color, css background, background color] -description: "Learn how to set the background color of an element in CSS using the background-color property." -keywords: - [ - background color, - css background color, - background-color property, - css background-color, - ] -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 - -The syntax for the `background-color` property is as follows: - -```css title="index.css" -selector { - background-color: color; -} -``` - -- `selector`: The element to which the background color is applied. -- `background-color`: The CSS property used to set the background color of an element. -- `color`: The color value used to specify the background color. -- The `color` value can be specified using various color formats, such as hexadecimal, RGB, RGBA, HSL, and HSLA. -- The `color` value can also be specified using color keywords like `red`, `blue`, `green`, etc. - -## Example - -In the following example, the `background-color` property is used to set the background color of a `
` element to a light blue color using the hexadecimal color format: - -```css title="index.css" -div { - background-color: #ADD8E6; /* Light blue color */ -} -``` - -In the HTML code below, the CSS rule will apply the light blue color to the background of the `
` element: - -```html title="index.html" -
This is a div with a light blue background.
-``` - -By using the `background-color` property, you can customize the background color of elements on your web page to create visually appealing designs. - - -
- -:::info Additional Information - -- The `background-color` property sets the background color of an element, covering the entire content area of the element. -- The `background-color` property can be combined with other background properties like `background-image`, `background-repeat`, `background-position`, etc., to create more complex background effects. -- When setting the background color of an element, ensure that there is enough contrast between the background color and the text color to ensure readability and accessibility. - -::: - -## Example for Background Color - -In this example, we will set the background color of a `
` element using the `background-color` property with an RGB color value: - - - - -```html showLineNumbers - - - - - - Background Color Example - - - -
This is a div with a light green background.
- - -``` - - - - -```css showLineNumbers {2} -div { - background-color: rgb(144, 238, 144); /* Light green color */ -} -``` - - - - -Now, you can see the output of the above code in the Browser Window like this: - - -<> -
This is a div with a light green background.
- - - -In this example, the `background-color` property is used to set the background color of the `
` element to a light green color using the RGB color format. - -By specifying the background color using the `background-color` property, you can enhance the visual appearance of your web pages and create engaging user experiences. - -## Conclusion - -The `background-color` property in CSS allows you to set the background color of an element using various color formats. By customizing the background color of elements on your web page, you can create visually appealing designs and improve the overall user experience. \ No newline at end of file diff --git a/docs/css/backgrounds/background-image/background-attachment.mdx b/docs/css/backgrounds/background-image/background-attachment.mdx deleted file mode 100644 index 7feb556..0000000 --- a/docs/css/backgrounds/background-image/background-attachment.mdx +++ /dev/null @@ -1,138 +0,0 @@ ---- -id: background-attachment -title: Background Attachment -sidebar_label: Background Attachment -sidebar_position: 4 -tags: [background, css background, background attachment, background-attachment property] -description: "Learn how to set the background attachment behavior of an element in CSS using the background-attachment property." -keywords: - [ - background attachment, - css background attachment, - background-attachment property, - css background-attachment, - ] -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 - -The syntax for the `background-attachment` property is as follows: - -```css title="index.css" -selector { - background-attachment: value; -} -``` - -- `selector`: The element to which the background attachment behavior is applied. -- `background-attachment`: The CSS property used to set the background attachment behavior of an element. -- `value`: Specifies the attachment behavior of the background image. It can take one of the following values: - - `scroll`: The background image scrolls along with the content when the content is scrolled. - - `fixed`: The background image remains fixed within the viewport as the content is scrolled. - - `local`: The background image scrolls along with the element's contents, rather than the entire page. - - `initial`: Sets the background attachment behavior to its default value. -- The default value of the `background-attachment` property is `scroll`. - -## Example - -In the following example, the `background-attachment` property is used to set the background attachment behavior of a `
` element to `fixed`, which makes the background image remain fixed within the viewport as the content is scrolled: - -```css title="index.css" -div { - background-image: url('path/to/background-image.jpg'); - background-attachment: fixed; -} -``` - -In the HTML code below, the CSS rule will apply the `fixed` background attachment behavior to the background image of the `
` element: - -```html title="index.html" -
This is a div with a fixed background image.
-``` - -By using the `background-attachment` property, you can control how the background image behaves when the content is scrolled, allowing you to create various visual effects on your web page. - - -
- -:::info Additional Information - -- The `background-attachment` property is often used in combination with the `background-image` property to set a background image and define its attachment behavior. -- The `background-attachment` property can be used to create effects like parallax scrolling, where the background image moves at a different speed than the content, creating a sense of depth. - -::: - -## Example for background-attachment property - -In this example, we have a `
` element with a background image that has the `background-attachment` property set to `fixed`. This makes the background image remain fixed within the viewport as the content is scrolled: - - - - -```html showLineNumbers - - - - - - Background Attachment Example - - - -
-

Fixed Background Image

-

This is a div with a fixed background image.

-
- - -``` - - - - -```css showLineNumbers {3} -div { - background-image: url('/assets/jpeg-image.jpg'); - background-attachment: fixed; - color: white; - text-align: center; - padding: 20px; -} - -h1 { - font-size: 2em; - margin-bottom: 0; -} - -p { - font-size: 1.2em; - margin-top: 0; -} -``` - - - - -Now, you can see the output of the above code in the Browser Window like this: - - -<> -

Fixed Background Image

-

This is a div with a fixed background image.

- - - -In this example, the background image remains fixed within the viewport as the content is scrolled, creating a visually appealing effect on the web page. - - -
- -## Conclusion - -The `background-attachment` property in CSS allows you to control the attachment behavior of the background image of an element. By setting the `background-attachment` property to `fixed`, `scroll`, `local`, or `initial`, you can create various visual effects on your web page. Experiment with different values of the `background-attachment` property to achieve the desired background image behavior for your elements. \ No newline at end of file diff --git a/docs/css/backgrounds/background-image/background-position.mdx b/docs/css/backgrounds/background-image/background-position.mdx deleted file mode 100644 index 36cec36..0000000 --- a/docs/css/backgrounds/background-image/background-position.mdx +++ /dev/null @@ -1,147 +0,0 @@ ---- -id: background-position -title: Background Position -sidebar_label: Background Position -sidebar_position: 3 -tags: [background, css background, background position, background-position property] -description: "Learn how to set the position of the background image of an element in CSS using the background-position property." -keywords: - [ - background position, - css background position, - background-position property, - css background-position, - ] -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 - -The syntax for the `background-position` property is as follows: - -```css title="index.css" -selector { - background-position: value; -} -``` - -- `selector`: The element to which the background position is applied. -- `background-position`: The CSS property used to set the position of the background image of an element. -- `value`: Specifies the position of the background image. It can take one of the following values: - - `top`: Aligns the top edge of the background image with the top edge of the background area. - - `bottom`: Aligns the bottom edge of the background image with the bottom edge of the background area. - - `left`: Aligns the left edge of the background image with the left edge of the background area. - - `right`: Aligns the right edge of the background image with the right edge of the background area. - - `center`: Aligns the background image in the center of the background area. - - ``: Specifies the position of the background image as a percentage of the background area. - - ``: Specifies the position of the background image using a length value (e.g., `10px`, `20%`). - - `initial`: Sets the background position to its default value. - - `inherit`: Inherits the background position from the parent element. - -The default value of the `background-position` property is `0% 0%`, which aligns the top left corner of the background image with the top left corner of the background area. - -## Example - -In the following example, the `background-position` property is used to set the position of the background image of a `
` element to `center`, which aligns the background image in the center of the background area: - -```css title="index.css" -div { - background-image: url("path/to/background-image.jpg"); - background-position: center; -} -``` - -In the HTML code below, the CSS rule will apply the `center` background position to the background image of the `
` element: - -```html title="index.html" -
-

- This is a div with a background image that is centered within the background area. -

-
-``` - -By using the `background-position` property, you can control the placement of the background image within the element's background area, allowing you to create visually appealing designs on your web page. - - -
- -:::note Try it yourself - -You can experiment with different values of the `background-position` property to position the background image in various ways within the background area of an element. Try changing the `background-position` value to `top`, `bottom`, `left`, `right`, or a specific length or percentage to see how the background image placement changes. - -::: - - -## Example for Background Position - -In this example, we will demonstrate how to use the `background-position` property to position the background image of a `
` element to the top right corner of the background area. - -### Step 1: Create an HTML File - -Create an HTML file named `index.html` and add the following code: - -```html title="index.html" showLineNumbers - - - - - - Background Position Example - - - -
-

- This is a div with a background image positioned at the top right corner. -

-
- - -``` - -### Step 2: Create a CSS File - -Create a CSS file named `styles.css` and add the following code to set the background image and position: - -```css title="styles.css" showLineNumbers {3} -div { - background-image: url("/assets/jpeg-image.jpg"); - background-position: top right; - height: 200px; - width: 400px; - border: 1px solid #333; - background-size: cover; color: #fff; -} - -p { - padding: 10px; -} -``` - -### Step 3: Add a Background Image - -Place an image file named `jpeg-image.jpg` in the `assets` directory of your project. - -### Step 4: View the Output in a Browser - -Open the `index.html` file in a web browser to see the output. You will see a `
` element with a background image positioned at the top right corner of the background area. - - -
-

- This is a div with a background image positioned at the top right corner. -

-
- - -By following these steps, you can use the `background-position` property to position the background image of an element at the top right corner of the background area. - -## Conclusion - -The `background-position` property in CSS allows you to control the placement of the background image within the background area of an element. By specifying the position using keywords, percentages, or length values, you can create visually appealing designs by positioning the background image as desired. \ No newline at end of file diff --git a/docs/css/backgrounds/background-image/background-repeat.mdx b/docs/css/backgrounds/background-image/background-repeat.mdx deleted file mode 100644 index e701aee..0000000 --- a/docs/css/backgrounds/background-image/background-repeat.mdx +++ /dev/null @@ -1,140 +0,0 @@ ---- -id: background-repeat -title: Background Repeat -sidebar_label: Background Repeat -sidebar_position: 2 -tags: [background, css background, background repeat, background-repeat property] -description: "Learn how to control the repetition of a background image in CSS using the background-repeat property." -keywords: - [ - background repeat, - css background repeat, - background-repeat property, - css background-repeat, - ] -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 - -The syntax for the `background-repeat` property is as follows: - -```css title="index.css" -selector { - background-repeat: value; -} -``` - -- `selector`: The element to which the background repeat is applied. -- `background-repeat`: The CSS property used to control the repetition of the background image. -- `value`: Specifies how the background image should be repeated. It can take one of the following values: - - `repeat`: The background image is repeated both horizontally and vertically to fill the background area. - - `repeat-x`: The background image is repeated horizontally to fill the background area. - - `repeat-y`: The background image is repeated vertically to fill the background area. - - `no-repeat`: The background image is displayed only once without any repetition. - - `initial`: Sets the background repeat to its default value. - - `inherit`: Inherits the background repeat value from the parent element. - -The default value of the `background-repeat` property is `repeat`. - -## Example - -In the following example, the `background-repeat` property is used to set the repetition of the background image of a `
` element to `repeat`, which repeats the background image both horizontally and vertically to fill the background area: - -```css title="index.css" -div { - background-image: url("path/to/background-image.jpg"); - background-repeat: repeat; -} -``` - -In the HTML code below, the CSS rule will apply the `repeat` background repeat to the background image of the `
` element: - -```html title="index.html" -
-

- This is a div with a background image that repeats both horizontally and vertically to fill the background area. -

-
-``` - -In this example, the background image will be repeated in both the horizontal and vertical directions to fill the background area of the `
` element. You can adjust the `background-repeat` property to control how the background image is repeated based on your design requirements. - - -
- -:::note Try it yourself - -Experiment with different values of the `background-repeat` property to see how the background image repetition changes. You can use values like `repeat-x`, `repeat-y`, and `no-repeat` to achieve different visual effects. - -::: - -## Example: Using `background-repeat` with `background-size` - -You can combine the `background-repeat` property with the `background-size` property to create more complex background image effects. For example, you can repeat a background image in one direction while scaling it to cover the background area. Here's an example: - -This example demonstrates the use of the `background-size` property to set the size of the background image of an element: - - - - -```html showLineNumbers - - - - - - Background Repeat Example - - - -
-

- This is a div with a background image that repeats horizontally and scales to cover the background area. -

-
- - -``` - - - - -```css showLineNumbers {3} -div { - background-image: url("/assets/jpeg-image.jpg"); - background-repeat: repeat-x; - background-size: cover; -} - -p { - color: white; - font-size: 1.5rem; - text-align: center; - padding: 20px; -} -``` - - - - -Now, you can see the output of the above code in the Browser Window like this: - - -

- This is a div with a background image that repeats horizontally and scales to cover the background area. -

- - -In this example, the `background-repeat` property is set to `repeat-x`, which repeats the background image horizontally to fill the background area of the `
` element. The `background-size` property is set to `cover`, which scales the background image to cover the entire background area while maintaining its aspect ratio. - -By combining the `background-repeat` and `background-size` properties, you can create visually appealing background effects for your web pages. - -## Conclusion - -The `background-repeat` property in CSS allows you to control how a background image is repeated within the background area of an element. By setting the `background-repeat` property to different values like `repeat`, `repeat-x`, `repeat-y`, or `no-repeat`, you can achieve various background image repetition effects based on your design requirements. Experiment with different values of the `background-repeat` property to create visually interesting background patterns for your web pages. \ No newline at end of file diff --git a/docs/css/backgrounds/background-image/background-size.mdx b/docs/css/backgrounds/background-image/background-size.mdx deleted file mode 100644 index a517c75..0000000 --- a/docs/css/backgrounds/background-image/background-size.mdx +++ /dev/null @@ -1,137 +0,0 @@ ---- -id: background-size -title: Background Size -sidebar_label: Background Size -sidebar_position: 1 -tags: [background, css background, background size, background-size property] -description: "Learn how to set the size of the background image of an element in CSS using the background-size property." -keywords: - [ - background size, - css background size, - background-size property, - css background-size, - ] -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 - -The syntax for the `background-size` property is as follows: - -```css title="index.css" -selector { - background-size: value; -} -``` - -- `selector`: The element to which the background size is applied. -- `background-size`: The CSS property used to set the size of the background image of an element. -- `value`: Specifies the size of the background image. It can take one of the following values: - - `auto`: The browser automatically scales the background image to its original size. - - `cover`: The background image is scaled to cover the entire background area, maintaining its aspect ratio. - - `contain`: The background image is scaled to fit within the background area while maintaining its aspect ratio. - - ``: Specifies the width and height of the background image using a length value (e.g., `200px`, `50%`). - - ``: Specifies the width and height of the background image as a percentage of the background area. - - `initial`: Sets the background size to its default value. - - `inherit`: Inherits the background size from the parent element. - -The default value of the `background-size` property is `auto`. - -## Example - -In the following example, the `background-size` property is used to set the size of the background image of a `
` element to `cover`, which scales the background image to cover the entire background area while maintaining its aspect ratio: - -```css title="index.css" -div { - background-image: url("path/to/background-image.jpg"); - background-size: cover; -} -``` - -In the HTML code below, the CSS rule will apply the `cover` background size to the background image of the `
` element: - -```html title="index.html" -
- This is a div with a background image that covers the entire background area. -
-``` - -By using the `background-size` property, you can control how the background image is displayed within the element's background area, allowing you to create visually appealing designs on your web page. - - -
- -:::tip additional information - -**Aspect Ratio**: The aspect ratio of an image is the ratio of its width to its height. When using the `cover` or `contain` values for the `background-size` property, the aspect ratio of the background image is maintained while scaling to fit the background area. - -**Length Values**: Length values (e.g., `200px`, `50%`) can be used to specify the width and height of the background image. When using length values, the background image is scaled to the specified dimensions. - -The `background-size` property is particularly useful when working with responsive web design, as it allows you to control how the background image adapts to different screen sizes and devices. -::: - -## Example for background-size property - -This example demonstrates the use of the `background-size` property to set the size of the background image of an element: - - - - -```html showLineNumbers - - - - - - Background Size Example - - - -
-

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis - sit amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices - ultricies. Nullam nec nunc nec nunc ultrices ultricies. -

-
- - -``` - - - - -```css showLineNumbers {3} -div { - background-image: url("/assets/jpeg-image.jpg"); - background-size: cover; - padding: 20px; - color: white; - text-align: center; -} -``` - - - - -Now, you can see the output of the above code in the Browser Window like this: - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac felis sit - amet nunc ultrices ultricies. Nullam nec nunc nec nunc ultrices ultricies. - Nullam nec nunc nec nunc ultrices ultricies. -

- - -In this example, the `background-size` property is set to `cover`, which scales the background image to cover the entire background area of the `
` element while maintaining its aspect ratio. - -## Conclusion - -The `background-size` property in CSS allows you to control the size of the background image of an element, enabling you to create visually appealing designs on your web page. By specifying the size of the background image using values like `cover`, `contain`, or length values, you can customize how the background image is displayed within the background area of an element. \ No newline at end of file diff --git a/docs/css/basics/cascading-order.mdx b/docs/css/basics/cascading-order.mdx new file mode 100644 index 0000000..85d3902 --- /dev/null +++ b/docs/css/basics/cascading-order.mdx @@ -0,0 +1,99 @@ +--- +title: "The Cascade, Specificity, and Inheritance" +sidebar_label: "Cascade Order" +description: "Understand the three core principles (C-S-I) that determine which CSS rule wins when conflicts occur, making it the most fundamental concept in CSS." +keywords: [CSS Cascade, CSS Specificity, CSS Inheritance, Rule Conflict, Important rule, important, CodeHarborHub CSS] +--- + +You now know three different places to put your CSS: **Inline**, **Internal**, and **External**. But what happens when you set an element's color to blue in an external file and then try to set it to red using an internal style? + +The browser uses three fundamental principles, often called the **C-S-I** (Cascade, Specificity, Inheritance), to decide which rule wins and is actually applied. This is the **most crucial concept** in CSS. + +## 1. The Cascade: Where Does the Style Come From? + +The **Cascade** determines the order in which CSS rules are processed and how conflicts are resolved based on the **source and order** of the styles. + +In a conflict, the browser looks at the following sources, in order of increasing importance: + +### A. Origin and Importance (The !important Rule) + +| Order | Source | Description | +| :--- | :--- | :--- | +| **1 (Lowest)** | Browser Defaults | The default styling applied by the browser (e.g., links are blue and underlined). | +| **2** | User Stylesheets | Styles set by the user (rare, used for accessibility purposes). | +| **3** | Author Stylesheets | **Your code** (External, Internal, and most Inline styles). | +| **4 (Highest)** | `!important` | Any rule followed by `!important` overrides almost everything else. **Avoid using this** unless absolutely necessary, as it breaks the natural flow of the cascade. | + +### B. Order of Appearance + +If two rules have the exact same **Origin** (e.g., both are in your external file) and the same **Specificity** (covered next), the rule that appears **later** in the stylesheet or the HTML document **wins**. + +```css title="styles.css" +/* Rule 1 appears first */ +p { color: red; } + +/* Rule 2 appears later and has the same specificity, so it wins */ +p { color: blue; } +/* The paragraph will be blue. */ +```` + +## 2. Specificity: Who is More Precise? + +When multiple rules target the same element, **Specificity** is the unique score assigned to a CSS selector that determines which rule is applied. The selector with the **higher score always wins**, regardless of the order it appears in the stylesheet. + +### Specificity Scoring + +Specificity is calculated using a four-digit number, often written as `(A, B, C, D)`. + +| Category | Score | Example | Notes | +| :--- | :--- | :--- | :--- | +| **A: Inline** | 1000 | `

` | Always wins over non-inline styles. | +| **B: IDs** | 100 | `#main-header` | A unique identifier. | +| **C: Classes, Attributes, Pseudo-classes** | 10 | `.card`, `[type="text"]`, `:hover` | Includes most common selectors. | +| **D: Elements, Pseudo-elements** | 1 | `p`, `h1`, `::before` | The lowest score. | + +### Specificity Example + +Let's look at a common conflict: + +| Selector | Calculation | Specificity Score | +| :--- | :--- | :--- | +| `h1` | (0, 0, 0, 1) | **1** (Element) | +| `.page-title` | (0, 0, 1, 0) | **10** (Class) | +| `#header h1` | (0, 1, 0, 1) | **101** (ID + Element) | + +**Result:** The style from `#header h1` will win and be applied, even if `.page-title` appears after it in the CSS file, simply because **101 is greater than 10**. + +:::tip Analogy + +Specificity is like a bidding war. An **Inline Style** is a million dollars (1000). An **ID** is a thousand dollars (100). A **Class** is a hundred dollars (10). Whoever bids more wins! + +::: + +----- + +## 3. Inheritance: Passing Down the Genes + +**Inheritance** is the third principle, determining how styles flow down the document tree from parent elements to their children. + +Some properties are naturally **inherited** (passed down), while others are not. + +### Properties that Inherit + + * **Text and Font properties** generally inherit: `color`, `font-family`, `font-size`, `line-height`, `text-align`. + * If you set the `font-family` on the `` element, all paragraphs and headings inside the `` will automatically use that font. + +### Properties that Do Not Inherit + + * **Box Model properties** generally do not inherit: `margin`, `padding`, `border`, `width`, `height`. + * If you set a `border: 2px solid black;` on the `

`, its child elements will *not* automatically get that border. This makes sense, as you wouldn't want every nested element to inherit its parent's spacing\! + +### Controlling Inheritance + +You can force any property to inherit or not using these special keywords: + +| Keyword | Purpose | +| :--- | :--- | +| `inherit` | Forces a child element to take the computed value of the parent element (even if it normally wouldn't inherit). | +| `initial` | Resets the property to its default browser value. | +| `unset` | Resets the property to either the inherited value (if it's an inherited property) or the initial value (if it's not). | diff --git a/docs/css/basics/external.mdx b/docs/css/basics/external.mdx new file mode 100644 index 0000000..0078355 --- /dev/null +++ b/docs/css/basics/external.mdx @@ -0,0 +1,116 @@ +--- +title: External Stylesheets +description: "Learn the industry-standard method of linking CSS using the link tag. Understand the crucial benefits of separation of concerns, caching, and scalability." +keywords: [CSS External Style, External CSS, link tag, best practice CSS, Frontend Development Scalability, CodeHarborHub CSS] +sidebar_label: External Styles +--- + +You've explored **Inline** (least scalable) and **Internal** (single-page only) CSS methods. Now we arrive at the recommended, industry-standard approach for modern web development: **External Stylesheets**. + +External stylesheets are CSS rules saved in a **separate file** (usually named `style.css` or similar) and then connected to the HTML document using the `` tag. + +## How to Implement External Styles + +This method achieves true **separation of concerns** by keeping your presentation code entirely separate from your structural HTML code. + +### 1. Create the CSS File + +First, create a new text file with the `.css` extension (e.g., `styles.css`) in your project folder. This file contains **only** pure CSS rules—no HTML tags are needed. + +```css title="styles.css" +/* This file contains styles for ALL HTML pages linked to it */ +body { + font-family: Arial, sans-serif; + line-height: 1.6; + background-color: #f4f4f9; +} + +h1 { + color: #3f51b5; + text-align: center; +} + +.card { + border: 1px solid #ccc; + padding: 20px; + margin: 15px; + box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.1); +} +``` + +### 2. Link the CSS File to HTML + +Next, you connect this external file to your HTML document using the **`` tag**, placed within the `` section. + +```html title="index.html" + + + + + External CSS Demo + + + + +
+

External CSS is the Best!

+

This content is structured with HTML, but its entire look comes from the separate 'styles.css' file.

+
+ + +``` + +### Key Attributes of the `` Tag + +| Attribute | Value | Purpose | +| :--- | :--- | :--- | +| `rel` | `"stylesheet"` | Specifies the relationship between the HTML and the linked file (tells the browser it's a style sheet). | +| `href` | `styles.css` | Specifies the path (location) of the external CSS file. | + +----- + +## The Crucial Advantages + +External Stylesheets are the gold standard because they solve the maintenance and performance issues of the other two methods. + +### 1. True Separation of Concerns + +By keeping HTML and CSS completely separate, your files become cleaner, easier to read, and more focused on their respective jobs. + +:::success Design System Scalability + +This separation is fundamental to building large, maintainable projects and design systems. You can hire a design team to work *only* on the CSS, and a content team to work *only* on the HTML, without interference. + +::: + +### 2. Global Control and Scalability + +You can link the **same `styles.css` file** to every single HTML page on your website. If you decide to change the main headline color from blue to green, you only have to edit **one line** in the external CSS file, and the change instantly appears across your entire site. + +### 3. Browser Caching and Performance + +This is a major performance benefit: + +1. When a user visits your first page (`index.html`), the browser downloads the HTML and the linked `styles.css`. +2. The browser then **caches (saves) the `styles.css` file**. +3. When the user navigates to the second page (`about.html`), the browser loads the HTML but **re-uses the already-cached `styles.css` file**, resulting in much faster loading times for subsequent pages. + +## The Cascade in Action + +Now that you know the three ways to add styles, let's briefly look at the order in which the browser decides which style to apply. This is called the **Cascade**: + +| Order | Method | Example | +| :--- | :--- | :--- | +| **Highest Priority (Wins)** | **Inline Styles** | Style declared directly in the `style` attribute. | +| **Middle Priority** | **Internal Stylesheets** | CSS declared inside the ` + + + +

Welcome to Embedded CSS!

+

This page uses internal styling defined in the head section.

+ + +``` + +### Key Difference from Inline + +With internal styles, you use the standard CSS **ruleset** structure (`selector { property: value; }`). This means you can target **multiple elements** (like all `p` tags or all elements with the class `.main-header`) with a single rule, which inline styles cannot do. + +## Advantages and Disadvantages + +Internal stylesheets are a significant improvement over inline styles, but they still have limitations compared to external files. + +### Advantages (The Upside) + + * **Reusability within the Page:** You can write a style once and apply it to many elements on that single HTML page. This is much more efficient than repeating inline styles. + * **Centralized Styling:** All visual rules for the page are located in one clean section (``), making them easy to find and modify. + * **Access to Full CSS:** Unlike inline styles, you can use advanced CSS features like **Media Queries**, **Animations**, and **Pseudo-classes**. + +### Disadvantages (The Downside) + +:::caution Scalability and Cache + +The biggest drawback is **lack of reusability across multiple documents**. If your website has five pages, you must copy and paste the ` - - -

Welcome to My Website -

This is an example of internal CSS.

- - -``` - -In this example, the background color of the `` element is set to `lightblue`, and the color and alignment of the `

` element are defined using internal CSS. - -When you run this HTML document in a web browser. It will display the content with the styles defined in the internal CSS. - - - <> -

Welcome to My Website

-

This is an example of internal CSS.

- - - - -
- -### 2. External CSS - -External CSS is added in a separate CSS file and linked to an HTML document using the `` element in the `` section. It allows you to define styles that can be shared across multiple documents. Here's an example of how to add external CSS to an HTML document: - -```html title="index.html" - - - - External CSS Example - - - -

Welcome to My Website -

This is an example of external CSS.

- - -``` - -And create a separate CSS file named `styles.css` with the following content: - -```css title="styles.css" -body { - background-color: lightblue; -} - -h1 { - color: navy; - text-align: center; -} -``` - -In this example, the CSS styles are defined in a separate file named `styles.css`, which is linked to the HTML document using the `` element. The styles defined in the external CSS file are applied to the elements in the HTML document. - - -
- -When you run this HTML document in a web browser. It will display the content with the styles defined in the external CSS. - - - <> -

Welcome to My Website

-

This is an example of external CSS.

- - - -### 3. Inline CSS - -Inline CSS is added directly to an HTML element using the `style` attribute. It allows you to define styles that apply only to that specific element. Here's an example of how to add inline CSS to an HTML document: - -```html title="index.html" - - - - Inline CSS Example - - -

Welcome to My Website

-

This is an example of inline CSS.

- - -``` - -In this example, the color and alignment of the `

` element and the color of the `

` element are defined using inline CSS. - -When you run this HTML document in a web browser. It will display the content with the styles defined in the inline CSS. - - - <> -

Welcome to My Website

-

This is an example of inline CSS.

- - - -By using internal, external, and inline CSS, you can style web pages and user interfaces to create visually appealing and responsive websites. - - -
- -:::note -1. Make sure the `styles.css` file is in the same directory as the `index.html` file. -2. The `` element should be placed in the `` section of the HTML document. -3. The `href` attribute of the `` element should point to the location of the external CSS file. -4. `` where: - - `rel="stylesheet"` specifies the relationship between the HTML document and the linked CSS file. - - `href="styles.css"` specifies the location of the external CSS file. -5. The `style` attribute is used to add inline CSS to an HTML element. -6. The `style` attribute contains one or more CSS property-value pairs separated by a semicolon. -7. The CSS property is followed by a colon (`:`) and the property value. -8. The CSS property-value pairs are enclosed in double quotes (`"`). -9. The CSS property-value pairs are separated by a semicolon (`;`). -10. The `style` attribute is added directly to the HTML element. -11. The `style` attribute overrides any styles applied to the element using internal or external CSS. -12. The `style` attribute is not recommended for large-scale styling as it can make the HTML document harder to maintain. -::: - -## Conclusion - -In this tutorial, you learned how to add CSS to an HTML document using internal, external, and inline styles. Internal CSS is added within the ` - -

- - -In this example, the `button:hover` pseudo-class selector is used to change the background color of the button to `lightblue` when the user hovers over it. The button in the HTML code changes its background color to `lightblue` when the user hovers over it. - -Pseudo-class selectors are a powerful feature of CSS that allow you to style elements based on their state or position in the document. By using pseudo-class selectors, you can create interactive and dynamic styles for your web pages. - -## Related Resources - -- [CSS Pseudo-Classes - MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) -- [CSS Pseudo-Classes - W3Schools](https://www.w3schools.com/css/css_pseudo_classes.asp) -- [CSS Selectors - CSS-Tricks](https://css-tricks.com/almanac/selectors/) -- [CSS Selectors Level 4 - W3C Specification](https://www.w3.org/TR/selectors-4/) -- [CSS Selectors - Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) \ No newline at end of file diff --git a/docs/css/selectors/pseudo-classes.mdx b/docs/css/selectors/pseudo-classes.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/selectors/pseudo-classes.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/selectors/pseudo-elements-selectors.mdx b/docs/css/selectors/pseudo-elements-selectors.mdx deleted file mode 100644 index 0b42790..0000000 --- a/docs/css/selectors/pseudo-elements-selectors.mdx +++ /dev/null @@ -1,140 +0,0 @@ ---- -title: "Pseudo-Elements Selectors" -sidebar_label: "Pseudo-Elements Selectors" -tags: - [ - "pseudo-elements selectors", - "css pseudo-elements selectors", - "css selectors", - "css pseudo-elements", - ] -description: "Pseudo-elements selectors are used to style parts of an element that are not part of the document tree." -keywords: - [ - pseudo elements selectors, - css pseudo elements selectors, - css selectors, - css pseudo-elements, - ] ---- - -In CSS, pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document. - - -
- -## Syntax - -The syntax for pseudo-elements selectors is as follows: - -```css title="index.css" -selector::pseudo-element { - /* CSS properties */ -} -``` - -- `selector`: The element to which the pseudo-element is applied. -- `pseudo-element`: The pseudo-element to be styled. -- `CSS properties`: The CSS properties to be applied to the pseudo-element. -- `::`: The `::` characters represent the pseudo-elements selector. -- The `::` characters are used to style parts of an element that are not part of the document tree. -- Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text. - -## Example - -In the following example, the `::first-letter` pseudo-element selector is used to style the first letter of the text inside an `

` element: - -```css title="index.css" -h1::first-letter { - font-size: 2em; - color: red; -} -``` - -In the HTML code below, the CSS rule will apply the `font-size: 2em` and `color: red` properties to the first letter of the text inside the `

` element: - -```html title="index.html" -

Welcome to CSS

-``` - -The first letter of the text "Welcome to CSS" will be styled with a font size of `2em` and a color of `red`. - -:::info Additional Information - -- Pseudo-elements selectors are used to style parts of an element that are not part of the document tree. -- Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. -- Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document. -- Pseudo-elements selectors are used to create effects like drop caps, text underlines, and more. -- Pseudo-elements selectors are less specific than class selectors and more specific than element selectors. -- Pseudo-elements selectors are useful for adding decorative elements to text or styling specific parts of an element. -- Pseudo-elements selectors can be combined with other selectors to create complex styles. -- Pseudo-elements selectors are supported in all modern browsers. -- Pseudo-elements selectors are used to style parts of an element that are not part of the document tree. -- Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text. - -::: - - -
- -## Example: Using Pseudo-Elements Selectors - -In the following example, the `::first-line` pseudo-element selector is used to style the first line of text inside a `

` element: - - - -```html title="index.html" - - - - - - Pseudo-Elements Selectors Example - - - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. - Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. -

- - -``` - - -```css title="styles.css" -p::first-line { - font-weight: bold; - font-size: 1.2em; -} -``` - - - -Now, you can see the output of the above code in the Browser Window like this: - - -
- -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod - tempor incididunt ut labore et dolore magna aliqua. -

-
- - -In the above example, the CSS rule will apply the `font-weight: bold` and `font-size: 1.2em` properties to the first line of text inside the `

` element. - - -
- -## Conclusion - -Pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are represented by double colons `::` followed by the name of the pseudo-element. Pseudo-elements selectors allow you to style specific parts of an element, such as the first letter or line of a block of text, without adding extra markup to the HTML document. Pseudo-elements selectors are useful for adding decorative elements to text or styling specific parts of an element. Pseudo-elements selectors can be combined with other selectors to create complex styles. Pseudo-elements selectors are supported in all modern browsers. Pseudo-elements selectors are used to style parts of an element that are not part of the document tree. Pseudo-elements selectors are used to style specific parts of an element, such as the first letter or line of a block of text. \ No newline at end of file diff --git a/docs/css/selectors/pseudo-elements.mdx b/docs/css/selectors/pseudo-elements.mdx new file mode 100644 index 0000000..e345ed2 --- /dev/null +++ b/docs/css/selectors/pseudo-elements.mdx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/docs/css/selectors/simple-selectors/class-selector.mdx b/docs/css/selectors/simple-selectors/class-selector.mdx deleted file mode 100644 index 52baf38..0000000 --- a/docs/css/selectors/simple-selectors/class-selector.mdx +++ /dev/null @@ -1,442 +0,0 @@ ---- -title: Class Selector -sidebar_label: Class Selector -description: "The class selector is used to select elements on a web page based on their class attribute." -keywords: - [ - class selector, - css class selector, - css selectors, - css basics, - css tutorial, - css guide, - css tutorial for beginners, - learn css, - css tutorial for beginners 2025, - css tutorial for learning, - ] -tags: - - 'css-selectors' - - 'class-selector' - - 'css' - - 'selectors' - - 'simple-selectors' ---- - -In CSS, the class selector is used to select elements on a web page based on their class attribute. It is denoted by a dot (`.`) followed by the class name. - - -
- -## What is a Class Selector? - -A class selector selects all elements on a web page that have a specified class attribute. It targets HTML elements based on the value of their `class` attribute. For example, to select all elements with the class `highlight`, you would use the following CSS rule: - -```css title="styles.css" -.highlight { - background-color: yellow; -} -``` - -In this example, the CSS rule selects all elements with the class `highlight` and sets their background color to yellow. The class selector is denoted by a dot (`.`) followed by the class name (`highlight` in this case) and curly braces `{}` containing the CSS properties and values to apply to the selected elements. - -## Syntax of the Class Selector - -The syntax of the class selector is - -```css title="styles.css" -.classname { - property: value; -} -``` - -where `.classname` represents the class selector, and `property: value;` represents the CSS properties and values to apply to the selected elements. - -:::tip Key Points to Remember -1. **Reusability:** Classes are reusable and can be applied to multiple elements across your HTML document. -2. **Combining Classes:** You can assign multiple classes to a single HTML element by separating class names with spaces. -3. **Higher Specificity:** Class selectors are more specific than element selectors but less specific than ID selectors. -::: - -By using class selectors, you can style specific groups of elements based on their class attributes, making it a powerful tool for styling web pages. - -## Example - - - - ```html showLineNumbers - - - - - - CSS Class Selector - - - -

Welcome to the CSS Tutorial!

-

This paragraph has a highlighted style.

-

This paragraph is both highlighted and bold.

-
-

Card Title

-

This is some content inside a card.

-
- - - - - ``` - - - ```css showLineNumbers - /* Basic styling for the title */ - .title { - font-size: 2rem; - color: #2c3e50; - text-align: center; - } - - /* Highlighted text styling */ - .highlight { - background-color: #f9f871; - color: #333; - padding: 5px; - border-radius: 5px; - } - - /* Add bold text styling */ - .bold { - font-weight: bold; - } - - /* Card styles */ - .card { - border: 1px solid #ccc; - border-radius: 10px; - padding: 20px; - margin: 20px 0; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - - .card-title { - font-size: 1.5rem; - color: #007bff; - } - - .card-content { - font-size: 1rem; - color: #555; - } - - /* Button styling */ - .btn { - background-color: #2ecc71; - color: white; - border: none; - padding: 10px 15px; - font-size: 14px; - border-radius: 5px; - cursor: pointer; - } - - /* Additional styling for primary buttons */ - .btn-primary { - background-color: #3498db; - } - - .btn:hover { - opacity: 0.8; - } - ``` - - - -Now, you can see the output of the above code in the Browser Window like this: - - - <> -

Welcome to the CSS Tutorial!

-

This paragraph has a highlighted style.

-

This paragraph is both highlighted and bold.

-
-

Card Title

-

This is some content inside a card.

-
-   - - - - -In the above example, we have used the class selector to style different elements on the web page based on their class attributes. The `highlight` class is used to style paragraphs with a highlighted background color, the `bold` class is used to make text bold, and the `card` class is used to style a card-like container. The `btn` class is used to style buttons, and the `btn-primary` class is used to style primary buttons differently. - - -
- -By using class selectors, you can apply consistent styles to elements with the same class across your web page, making it easier to maintain and update the styles. - -## Multiple Classes - -You can assign multiple classes to a single HTML element by separating class names with spaces. This allows you to combine styles from different classes on the same element. For example: - -```html title="index.html" - -``` - -In this example, the button element has both the `btn` and `btn-primary` classes applied to it. This allows you to style the button using styles from both classes. - -## Tips & Tricks for Using Class Selectors - -1. **Use Descriptive Names:** Choose meaningful class names to make your code more readable and maintainable. For example, use `btn-primary` instead of `blue-button`. - - For example: - -
- ```css title="Bad Example" showLineNumbers - .blue-button { - background-color: blue; - color: white; - padding: 10px 20px; - border-radius: 5px; - } - ``` - - ```css title="Good Example" showLineNumbers - .btn-primary { - background-color: blue; - color: white; - padding: 10px 20px; - border-radius: 5px; - } - ``` -
- -2. **Avoid Inline Styles:** Instead of using inline styles, apply styles using class selectors to keep your CSS separate from your HTML. - - For example: - - ```html title="Bad Example" showLineNumbers - - ``` - - ```html title="Good Example" showLineNumbers - - ``` - -3. **Avoid Over-Nesting:** Try to keep your class selectors flat and avoid deep nesting to maintain a clear and concise style structure. - - For example: - - ```css title="Bad Example" showLineNumbers - .card .content .title { - font-size: 1.5rem; - color: #333; - } - ``` - - ```css title="Good Example" showLineNumbers - .card-title { - font-size: 1.5rem; - color: #333; - } - ``` - -4. **Combine Classes:** Use multiple classes on an element to combine styles and create reusable components. - - For example: - - ```html title="index.html" showLineNumbers - - ``` - - ```css title="styles.css" showLineNumbers - .btn { - padding: 10px 20px; - border-radius: 5px; - } - - .btn-primary { - background-color: blue; - color: white; - } - ``` - -5. **Utility Classes:** Consider using utility classes for common styles like margins, padding, and text alignment to keep your CSS concise and modular. - - For example: - - ```html title="index.html" showLineNumbers -
-

Centered Text

-
- ``` - - ```css title="styles.css" showLineNumbers - .flex { - display: flex; - } - - .justify-center { - justify-content: center; - } - - .items-center { - align-items: center; - } - - .p-4 { - padding: 1rem; - } - - .text-center { - text-align: center; - } - ``` - -6. **CSS Framework-Like Approach:** Adopt a framework-like approach with predefined class structures for buttons, grids, cards, etc. - - For example: - - ```html title="index.html" showLineNumbers -
-

Card Title

-

This is some content inside a card.

-
- ``` - - ```css title="styles.css" showLineNumbers - .card { - border: 1px solid #ccc; - border-radius: 10px; - padding: 20px; - margin: 20px 0; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); - } - - .card-title { - font-size: 1.5rem; - color: #007bff; - } - - .card-content { - font-size: 1rem; - color: #555; - } - ``` - -7. **Debugging Tip:** Use browser developer tools to inspect elements and check which styles are being applied to them. This can help you troubleshoot styling issues and conflicts. - -By following these tips and best practices, you can effectively use class selectors to style your web pages and create maintainable CSS code. - - -
- -## Advanced Usage of Class Selectors - -### Combining Class Selectors - -You can combine multiple class selectors to create more specific styles for elements that have both classes applied. For example: - -```css title="styles.css" -.btn { - padding: 10px 20px; - border-radius: 5px; -} - -.btn-primary { - background-color: blue; - color: white; -} - -.btn.btn-primary { - font-weight: bold; -} -``` - -In this example, the `.btn.btn-primary` selector targets elements that have both the `btn` and `btn-primary` classes applied to them. This allows you to create more specific styles for elements with multiple classes. - -### Pseudo-Classes with Class Selectors - -You can also use pseudo-classes in combination with class selectors to style elements based on their state or interaction. For example: - -```css title="styles.css" -.btn { - padding: 10px 20px; - border-radius: 5px; -} - -.btn:hover { - background-color: #3498db; - color: white; -} -``` - -In this example, the `.btn:hover` selector applies styles to the button when it is hovered over by the user. Pseudo-classes can be a powerful way to add interactivity to your web page using class selectors. - - -
- -### Nesting Class Selectors - -While CSS does not support true nesting of selectors, you can simulate nesting by chaining class selectors together. For example: - -```css title="styles.css" -.card { - border: 1px solid #ccc; - border-radius: 10px; - padding: 20px; - margin: 20px 0; - box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); -} - -.card .card-title { - font-size: 1.5rem; - color: #007bff; -} - -.card .card-content { - font-size: 1rem; - color: #555; -} -``` - -In this example, the `.card .card-title` and `.card .card-content` selectors simulate nesting by targeting elements with the `card-title` and `card-content` classes that are descendants of elements with the `card` class. - -### Attribute Selectors with Class Selectors - -You can also use attribute selectors in combination with class selectors to target elements based on their attributes. For example: - -```css title="styles.css" -.btn { - padding: 10px 20px; - border-radius: 5px; -} - -.btn[type="submit"] { - background-color: #2ecc71; - color: white; -} - -.btn[type="reset"] { - background-color: #e74c3c; - color: white; -} -``` - -In this example, the `.btn[type="submit"]` and `.btn[type="reset"]` selectors target buttons with the `btn` class and specific `type` attributes, applying different styles based on the button type. - - -
- -By using these advanced techniques, you can create more complex and specific styles for your web page using class selectors. - -## When to Use Class Selectors - -Class selectors are ideal for styling groups of elements that share common styles or characteristics. Here are some scenarios where class selectors are commonly used: - -1. **Reusable Styles:** Use class selectors to create reusable styles that can be applied to multiple elements across your web page. -2. **Component Styling:** Apply class selectors to style components or sections of your web page consistently. -3. **Button Styling:** Use class selectors to style buttons with different variations (e.g., primary, secondary, success, danger). -4. **Card Components:** Style card-like components with class selectors to create consistent layouts. -5. **Navigation Menus:** Apply class selectors to style navigation menus, links, and buttons for a cohesive design. -6. **Form Elements:** Use class selectors to style form elements like input fields, checkboxes, and radio buttons. -7. **Alert Messages:** Style alert messages, notifications, or banners with class selectors for a consistent look and feel. - -By using class selectors in these scenarios, you can create a more organized and maintainable CSS structure for your web page. - -## Conclusion - -The class selector in CSS is a powerful tool for selecting and styling elements based on their class attributes. By using class selectors, you can apply consistent styles to groups of elements across your web page, making it easier to maintain and update the styles. It allows you to create reusable styles that can be applied to multiple elements, improving the consistency and maintainability of your CSS code. \ No newline at end of file diff --git a/docs/css/selectors/simple-selectors/element-selector.mdx b/docs/css/selectors/simple-selectors/element-selector.mdx deleted file mode 100644 index ad6d94c..0000000 --- a/docs/css/selectors/simple-selectors/element-selector.mdx +++ /dev/null @@ -1,173 +0,0 @@ ---- -title: Element Selector -sidebar_label: Element Selector -tags: - [ - css, - selectors - ] -description: "The element selector in CSS is used to select and style HTML elements based on their tag names." -keywords: - [ - element selector, - css element selector, - css selectors, - css basics, - css tutorial, - css guide, - css tutorial for beginners, - learn css, - css tutorial for beginners 2025, - css tutorial for learning, - ] ---- - -In CSS, the element selector is used to select elements on a web page based on their element type. It is one of the simplest and most commonly used selectors in CSS. - - -
- -## What is an Element Selector? - -An element selector selects all elements on a web page that match a specified element type. It targets HTML elements based on their tag name. For example, to select all `

` elements on a page, you would use the following CSS rule: - -```css title="styles.css" -p { - color: red; -} -``` - -In this example, the CSS rule selects all `

` elements and sets their text color to red. The element selector is denoted by the tag name (`p` in this case) followed by curly braces `{}` containing the CSS properties and values to apply to the selected elements. - -## Syntax of the Element Selector - -The syntax of the element selector is as follows: - -```css title="styles.css" -element { - property: value; -} -``` - -Where: - -- `element`: Represents the tag name of the HTML element you want to target. -- `property`: Refers to the CSS property you want to apply to the selected elements. -- `value`: Specifies the value of the CSS property. -- `{}`: Encloses the CSS properties and values to be applied to the selected elements. -- `;`: Separates multiple CSS properties within the rule. - -The element selector can be used to style various HTML elements, such as headings (`

`, `

`, etc.), paragraphs (`

`), links (``), lists (`