From df7da4546a9222d9880f67654446f13561bbc617 Mon Sep 17 00:00:00 2001 From: majestic-owl448 <26656284+majestic-owl448@users.noreply.github.com> Date: Wed, 10 Dec 2025 18:15:16 +0100 Subject: [PATCH] fix(curriculum): fix typos and small adjustments in CSS chapter Review (#64462) --- .../review-css/671a9a0a140c2b9d6a75629f.md | 30 +++++++++---------- 1 file changed, 15 insertions(+), 15 deletions(-) diff --git a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md index 1b2381d0406..131f8838614 100644 --- a/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md +++ b/curriculum/challenges/english/blocks/review-css/671a9a0a140c2b9d6a75629f.md @@ -11,7 +11,7 @@ Review the concepts below to prepare for the upcoming exam. ## 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 markup 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. - **`meta name="viewport"` Element**: This `meta` element gives the browser instructions on how to control the page's dimensions and scaling on different devices, particularly on mobile phones and tablets. - **Default Browser Styles**: Each HTML element will have default browser styles applied to them. This usually includes items like default margins and paddings. @@ -42,7 +42,7 @@ Review the concepts below to prepare for the upcoming exam. ## 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 that 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. +- **Block Level Elements**: Block-level elements 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 @@ -57,7 +57,7 @@ Review the concepts below to prepare for the upcoming exam. - **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. -- **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). +- **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. - **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). @@ -74,9 +74,9 @@ Review the concepts below to prepare for the upcoming exam. - **Scale**: This refers to comparing the dimensions or size of one element to that of another. - **Hierarchy**: This establishes the order of importance of the elements in a design. It's about making sure that the most important information is noticed first. - **Contrast**: This is the process of creating clear distinctions between the elements. You can do this through variations in color, size, shape, texture, or any other visual characteristic. Strong contrast is also helpful for improving readability. -- **White Space(negative space)**: This is the empty space in a design. It's the area surrounding the elements. -- **UI(User Interface)**: UI includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons. -- **UX(User Experience)**: UX is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable. +- **White Space (Negative Space)**: This is the empty space in a design. It's the area surrounding the elements. +- **UI (User Interface)**: UI includes the visual and interactive elements that users can see on their screens, like icons, images, text, menus, links, and buttons. +- **UX (User Experience)**: UX is about how users feel when using a product or service. An application with a well-designed user experience is intuitive, easy to use, efficient, accessible, and enjoyable. - **Design Brief**: This is a document that outlines the objectives, goals, and requirements of a project. It is a roadmap that guides the design process and ensures that the final product meets the needs of the client. - **Vector Based Design**: This involves creating digital art using mathematical formulas to define lines, shapes, and colors. - **Prototyping**: This refers to the process of creating an interactive model of a product or user interface. @@ -163,7 +163,7 @@ Review the concepts below to prepare for the upcoming exam. - **`:link` Pseudo-class**: This pseudo-class allows you to target all unvisited links on a webpage. You can use it to style links differently before the user clicks on them. - **`:local-link` Pseudo-class**: This pseudo-class targets links that point to the same document. It can be useful when you want to differentiate internal links from external ones. - **`:visited` Pseudo-class**: This pseudo-class targets a link the user has visited. -- **`:target` Pseudo-class**: This pseudo-class is used to apply styles to an element that is the target of a URL fragment +- **`:target` Pseudo-class**: This pseudo-class is used to apply styles to an element that is the target of a URL fragment. ## Tree-structural Pseudo-classes @@ -173,8 +173,8 @@ Review the concepts below to prepare for the upcoming exam. - **`:nth-child(n)` Pseudo-class**: This pseudo-class allows you to select elements based on their position within a parent. - **`:nth-last-child(n)` Pseudo-class**: This pseudo-class enables you to select elements by counting from the end. - **`:first-child` Pseudo-class**: This pseudo-class selects the first element in a parent element or the document. -- **`:last-child` Pseudo-class**: This pseudo-class selects the last element in a parent element or the document -- **`:only-child` Pseudo-class**: This pseudo-class selects the only element in a parent element or the document +- **`:last-child` Pseudo-class**: This pseudo-class selects the last element in a parent element or the document. +- **`:only-child` Pseudo-class**: This pseudo-class selects the only element in a parent element or the document. - **`:first-of-type` Pseudo-class**: This pseudo-class selects the first occurrence of a specific element type within its parent. - **`:last-of-type` Pseudo-class**: This pseudo-class selects the last occurrence of a specific element type within its parent. - **`:nth-of-type(n)` Pseudo-class**: This pseudo-class allows you to select a specific element within its parent based on its position among siblings of the same type. @@ -213,10 +213,10 @@ Review the concepts below to prepare for the upcoming exam. ## Different Ways to Work with Colors in CSS - **Named Colors**: These colors are predefined color names recognized by browsers. Examples include `blue`, `darkred`, `lightgreen`. -- **`rgb()` Function**: RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. the `rgb()` function allows you to define colors using the RGB color model. +- **`rgb()` Function**: RGB stands for Red, Green, and Blue — the primary colors of light. These three colors are combined in different intensities to create a wide range of colors. The `rgb()` function allows you to define colors using the RGB color model. - **`rgba()` Function**: This function adds a fourth value —alpha— that controls the transparency of the color. - **`hsl()` Function**: HSL stands for Hue, Saturation, and Lightness — three key components that define a color. -- **`hsla()` Function**: This function adds a fourth value -alpha- that controls the opacity of the color. +- **`hsla()` Function**: This function adds a fourth value — alpha — that controls the opacity of the color. - **Hexadecimal**: A hex code (short for hexadecimal code) is a six-character string used to represent colors in the RGB color model. The "hex" refers to the base-16 numbering system, which uses digits 0 to 9 and letters A to F. ## Linear and Radial Gradients @@ -240,13 +240,13 @@ Review the concepts below to prepare for the upcoming exam. - **Definition**: Overflow refers to the way elements handle content that exceeds, or "overflows", the size of the containing element. Overflow is two-dimensional. - **`overflow-x`**: The x-axis determines horizontal overflow. -- **`overflow-y`**: the y-axis determines vertical overflow. +- **`overflow-y`**: The y-axis determines vertical overflow. ## CSS Transform Property - **Definition**: This property enables you to apply various transformations to elements, such as rotating, scaling, skewing, or translating (moving) them in 2D or 3D space. - **`translate()` Function**: This function is used to move an element from its current position. -- **`scale()` function**: This function allows you to change the size of an element. +- **`scale()` Function**: This function allows you to change the size of an element. - **Transforms and Accessibility**: If you're using transform to hide or reveal content, make sure that the content is still accessible to screen readers and keyboard navigation. Hidden content should be truly hidden, such as by using `display: none` or `visibility: hidden`, rather than simply being visually moved off-screen. ## The Box Model @@ -308,7 +308,7 @@ Review the concepts below to prepare for the upcoming exam. - **`justify-content: center;`**: This centers the flex items along the main axis. - **`justify-content: space-between;`**: This will distribute the elements evenly along the main axis. - **`justify-content: space-around;`**: This will distribute flex items evenly within the main axis, adding a space before the first item and after the last item. -- **`justify-content: space-evenly;`**: This will distributes the items evenly along the main axis. +- **`justify-content: space-evenly;`**: This distributes the items evenly along the main axis. ## The `align-items` Property @@ -392,7 +392,7 @@ img { } ``` -In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels. If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width. +In the above example, the width of the image will be 250px if the viewport width is less than 1000 pixels (since 250px is greater than 25% of that viewport width). If the viewport width is greater than 1000 pixels, the width of the image will be 25vw. This is because 25vw is equal to 25% of the viewport width. ## Best Practices with CSS and Accessibility