mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-06-05 21:04:28 +08:00
fix(curriculum): correct CSS description and grammar in review-basic-css (#67728)
This commit is contained in:
parent
4c5e27b8d8
commit
643e1493c7
@ -9,7 +9,7 @@ dashedName: review-basic-css
|
||||
|
||||
## CSS Basics
|
||||
|
||||
- **What is CSS?**: Cascading Style Sheets (CSS) is a markup language used to apply styles to HTML elements. CSS is used for colors, background images, layouts and more.
|
||||
- **What is CSS?**: Cascading Style Sheets (CSS) is a stylesheet language used to apply styles to HTML elements. CSS is used for colors, background images, layouts, and more.
|
||||
- **Basic Anatomy of a CSS Rule**: A CSS rule is made up of two main parts: a selector and a declaration block. A selector is a pattern used in CSS to identify and target specific HTML elements for styling. A declaration block applies a set of styles for a given selector or selectors.
|
||||
|
||||
Here is the general syntax of a CSS rule:
|
||||
@ -38,7 +38,7 @@ Here is an example of inline CSS:
|
||||
|
||||
:::
|
||||
|
||||
- **Internal CSS**: These styles are written within the `<style>` tags inside the `head` section of an HTML document. This can be useful for creating short code examples, but usually you will not need be using internal CSS.
|
||||
- **Internal CSS**: These styles are written within the `<style>` tags inside the `head` section of an HTML document. This can be useful for creating short code examples, but usually you will not need to be using internal CSS.
|
||||
- **External CSS**: These styles are written in a separate CSS file and linked to the HTML document using the `link` element in the `head` section. For most projects, you will use an external CSS file over internal or inline CSS.
|
||||
|
||||
## Working With the `width` and `height` Properties
|
||||
@ -144,9 +144,9 @@ ul ~ p {
|
||||
|
||||
## Inline, Block, and Inline-Block Level Elements
|
||||
|
||||
- **Inline Level Elements**: Inline elements only take up as much width as they need and do not start on a new line. These elements flow within the content, allowing text and other inline elements to appear alongside them. Common inline elements are `span`, `anchor`, and `img` elements.
|
||||
- **Block Level Elements**: Block-level elements start on a new line and take up the full width available to them by default, stretching across the width of their container. Some common block-level elements are `div`, `paragraph`, and `section` elements.
|
||||
- **Inline-Block Level Elements**: You can set an element to `inline-block` by using the `display` property. These elements behave like inline elements but can have a `width` and `height` set like block-level elements.
|
||||
- **Inline Level Elements**: Inline elements only take up as much width as they need and do not start on a new line. These elements flow within the content, allowing text and other inline elements to appear alongside them. Common inline elements are `span`, `a`, and `img` elements.
|
||||
- **Block Level Elements**: Block-level elements start on a new line and take up the full width available to them by default, stretching across the width of their container. Some common block-level elements are `div`, `p`, and `section` elements.
|
||||
- **Inline-Block Level Elements**: You can set an element to `inline-block` by using the `display` property. These elements behave like inline elements but can have a `width` and `height` set like block-level elements.
|
||||
|
||||
## Margin and Padding
|
||||
|
||||
@ -159,12 +159,12 @@ ul ~ p {
|
||||
|
||||
- **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. 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).
|
||||
- **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.
|
||||
- **ID Selectors**: ID selectors are defined by a hash symbol (`#`) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).
|
||||
- **`!important` keyword**: used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using `!important` because it can make your CSS harder to maintain and debug.
|
||||
- **ID Selectors**: ID selectors are defined by a hash symbol (`#`) followed by the ID name. ID selectors have a very high specificity, higher than type selectors and class selectors, but lower than inline styles. The specificity value for an ID selector is (0, 1, 0, 0).
|
||||
- **`!important` keyword**: Used to give a style rule the highest priority, allowing it to override any other declarations for a property. When used, it forces the browser to apply the specified style, regardless of the specificity of other selectors. You should be cautious when using `!important` because it can make your CSS harder to maintain and debug.
|
||||
- **Cascade Algorithm**: An algorithm used to decide which CSS rules to apply when there are multiple styles targeting the same element. It ensures that the most appropriate styles are used, based on a set of well-defined rules.
|
||||
- **CSS Inheritance**: The process by which styles are passed down from parent elements to their children. Inheritance allows you to define styles at a higher level in the document tree and have them apply to multiple elements without explicitly specifying them for each element.
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user