diff --git a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672aa62178d5ff57fe4f98e0.md b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672aa62178d5ff57fe4f98e0.md index 932bb857d87..5a223e8cece 100644 --- a/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672aa62178d5ff57fe4f98e0.md +++ b/curriculum/challenges/english/blocks/lecture-css-specificity-the-cascade-algorithm-and-inheritance/672aa62178d5ff57fe4f98e0.md @@ -183,7 +183,7 @@ Here is another example of an inline style: ::: -Internal CSS is defined within a `style` element in the `head` section of the HTML document. It has lower specificity than inline styles but can override external styles. +Internal CSS is defined within a `style` element in the `head` section of the HTML document. It has lower specificity than inline styles. Both internal and external CSS share the same specificity level — the specificity is determined by the selectors used, not by where the CSS is defined. When two rules share equal specificity, the one that appears later in the document wins. So if an external stylesheet is linked after an internal `style` block, the external rules take precedence. If it's linked before, the internal rules win. The specificity value for internal styles is determined by the selectors used. For example, an ID selector within internal CSS has a specificity value of `(0, 1, 0, 0)`. @@ -204,9 +204,9 @@ The specificity value for internal styles is determined by the selectors used. F ::: -In this example, the text will be blue unless an inline style or a more specific external style is applied. +In this example, the text will be blue unless an inline style or a more specific selector is applied. -External CSS is linked via a `link` element in the `head` section and is written in separate `.css` files. It has the lowest specificity but provides the best maintainability for larger projects. +External CSS is linked via a `link` element in the `head` section and is written in separate `.css` files. Like internal CSS, the specificity of external styles is determined by the selectors used. External CSS provides the best maintainability for larger projects. The specificity value for external styles is also determined by the selectors used. For example, a class selector within external CSS has a specificity value of `(0, 0, 1, 0)`. @@ -229,7 +229,7 @@ The specificity value for external styles is also determined by the selectors us ::: -In this example, the text color is defined in the `styles.css` file and will be applied unless overridden by internal or inline styles. +In this example, the text color is defined in the `styles.css` file and will be applied unless overridden by a more specific selector or an inline style. # --questions-- diff --git a/curriculum/challenges/english/blocks/review-basic-css/671a887a7e62c75e9ab1ee4a.md b/curriculum/challenges/english/blocks/review-basic-css/671a887a7e62c75e9ab1ee4a.md index 0672d7d28c1..a66ee7feaf8 100644 --- a/curriculum/challenges/english/blocks/review-basic-css/671a887a7e62c75e9ab1ee4a.md +++ b/curriculum/challenges/english/blocks/review-basic-css/671a887a7e62c75e9ab1ee4a.md @@ -158,8 +158,8 @@ ul ~ p { ## CSS Specificity - **Inline CSS Specificity**: Inline CSS has the highest specificity because it is applied directly to the element. It overrides any internal or external CSS. The specificity value for inline styles is (1, 0, 0, 0). -- **Internal CSS Specificity**: Internal CSS is defined within a `style` element in the `head` section of the HTML document. It has lower specificity than inline styles but can override external styles. -- **External CSS Specificity**: External CSS is linked via a `link` element in the `head` section and is written in separate `.css` files. It has the lowest specificity but provides the best maintainability for larger projects. +- **Internal CSS Specificity**: Internal CSS is defined within a `style` element in the `head` section of the HTML document. It has lower specificity than inline styles. Both internal and external CSS share the same specificity level, which is determined by their selectors, not their location. +- **External CSS Specificity**: External CSS is linked via a `link` element in the `head` section and is written in separate `.css` files. Like internal CSS, its specificity is determined by the selectors used. When two rules have equal specificity, source order determines the winner — the rule that appears later in the document takes precedence. External CSS provides the best maintainability for larger projects. - **Universal Selector (`*`)**: a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0). - **Type Selectors**: These selectors target elements based on their tag name. Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1). - **Class Selectors**: These selectors are defined by a period (`.`) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles. diff --git a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md index a451911e365..1050b7a9885 100644 --- a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md +++ b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md @@ -55,8 +55,8 @@ Review the concepts below to prepare for the upcoming exam. ## CSS Specificity - **Inline CSS Specificity**: Inline CSS has the highest specificity because it is applied directly to the element. It overrides any internal or external CSS. The specificity value for inline styles is (1, 0, 0, 0). -- **Internal CSS Specificity**: Internal CSS is defined within a `style` element in the `head` section of the HTML document. It has lower specificity than inline styles but can override external styles. -- **External CSS Specificity**: External CSS is linked via a `link` element in the `head` section and is written in separate `.css` files. It has the lowest specificity but provides the best maintainability for larger projects. +- **Internal CSS Specificity**: Internal CSS is defined within a `style` element in the `head` section of the HTML document. It has lower specificity than inline styles. Both internal and external CSS share the same specificity level, which is determined by their selectors, not their location. +- **External CSS Specificity**: External CSS is linked via a `link` element in the `head` section and is written in separate `.css` files. Like internal CSS, its specificity is determined by the selectors used. When two rules have equal specificity, source order determines the winner — the rule that appears later in the document takes precedence. External CSS provides the best maintainability for larger projects. - **Universal Selector (`*`)**: This is a special type of CSS selector that matches any element in the document. It is often used to apply a style to all elements on the page, which can be useful for resetting or normalizing styles across different browsers. The universal selector has the lowest specificity value of any selector. It contributes 0 to all parts of the specificity value (0, 0, 0, 0). - **Type Selectors**: These selectors target elements based on their tag name. Type selectors have a relatively low specificity compared to other selectors. The specificity value for a type selector is (0, 0, 0, 1). - **Class Selectors**: These selectors are defined by a period (`.`) followed by the class name. The specificity value for a class selector is (0, 0, 1, 0). This means that class selectors can override type selectors, but they can be overridden by ID selectors and inline styles.