Remove EASY from CSS guides section

files/en-us/web/css/guides/animations/using/index.md

@@ -10,7 +10,7 @@ sidebar: cssref
 
 There are three key advantages to CSS animations over traditional script-driven animation techniques:
 
-1. They're easy to use for basic animations; you can create them without even having to know JavaScript.
+1. With just a few lines of you define basic animations; you can create them without even having to know JavaScript.
 2. The animations run well, even under moderate system load. Simple animations can often perform poorly in JavaScript. The rendering engine can use frame-skipping and other techniques to keep the performance as smooth as possible.
 3. Letting the browser control the animation sequence lets the browser optimize performance and efficiency by, for example, reducing the update frequency of animations running in tabs that aren't currently visible.
 

files/en-us/web/css/guides/box_alignment/overview/index.md

@@ -36,7 +36,7 @@ When aligning items on the block axis you will use the properties that begin wit
 - {{cssxref("align-self")}}
 - {{cssxref("align-content")}}
 
-Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.
+Flexbox adds an additional complication in that the above is true when {{cssxref("flex-direction")}} is set to `row`. The properties are swapped when flexbox is set to `column`. Therefore, when working with flexbox it is generally easier to think about the main and cross axis rather than inline and block. The `justify-` properties are always used to align on the main axis, the `align-` properties on the cross axis.
 
 ### The alignment subject
 

files/en-us/web/css/guides/colors/color_values/index.md

@@ -145,7 +145,7 @@ The color functions that have a [`<hue>`](/en-US/docs/Web/CSS/Reference/Values/h
 
 ### HSL functional notation
 
-The `hsl()` CSS color function was the first hue-based color function to be supported in browsers. `hsl()` is more intuitive than `rgb()` — it is easier to determine the effect of varying hue (`h`), saturation (`s`), and lightness (`l`) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported.
+The `hsl()` CSS color function was the first hue-based color function to be supported in browsers. `hsl()` is more intuitive than `rgb()` — it is generally easier to determine the effect of varying hue (`h`), saturation (`s`), and lightness (`l`) values than it is to declare specific colors via red, green, and blue channel values. In addition, HSL is similar to the HSB (hue, saturation, and brightness) color picker in Photoshop, which made it immediately familiar to many people when first supported.
 
 The `hsl()` and `hwb()` sRGB color functions are both cylindrical. Hue defines the color as an [`<angle>`](/en-US/docs/Web/CSS/Reference/Values/angle) on a circular {{glossary("color wheel")}}. The diagram below shows an HSL color cylinder. Saturation is a percentage that defines how far the color is along a scale between completely grayscale and having the maximum possible amount of the given hue.
 As the value of lightness increases, the color transitions from the darkest to the lightest possible color (from black to white).

files/en-us/web/css/guides/colors/using_relative_colors/index.md

@@ -5,7 +5,7 @@ page-type: guide
 sidebar: cssref
 ---
 
-The [CSS colors module](/en-US/docs/Web/CSS/Guides/Colors) defines **relative color syntax**, which allows a CSS {{cssxref("<color>")}} value to be defined relative to another color. This is a powerful feature that enables easy creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.
+The [CSS colors module](/en-US/docs/Web/CSS/Guides/Colors) defines **relative color syntax**, which allows a CSS {{cssxref("<color>")}} value to be defined relative to another color. This is a powerful feature that enables the programmatic creation of complements to existing colors — such as lighter, darker, saturated, semi-transparent, or inverted variants — enabling more effective color palette creation.
 
 This article explains relative color syntax, shows what the different options are, and looks at some illustrative examples.
 
@@ -373,7 +373,7 @@ This example allows you to choose a base color and a color palette type. The bro
 
 The full HTML is included below for reference. The most interesting parts are as follows:
 
-- The `--base-color` custom property is stored as an inline [`style`](/en-US/docs/Web/HTML/Reference/Global_attributes/style) on the {{htmlelement("div")}} element with the ID of `container`. We've placed it there so it is easy to update the value using JavaScript. We've provided an initial value of `#ff0000` (`red`) to show a color palette based on that value when the example loads. Note that normally we'd probably set this on the {{htmlelement("html")}} element, but the MDN live sample was removing it when rendering.
+- The `--base-color` custom property is stored as an inline [`style`](/en-US/docs/Web/HTML/Reference/Global_attributes/style) on the {{htmlelement("div")}} element with the ID of `container`. We've placed it there so we can update the value using JavaScript. We've provided an initial value of `#ff0000` (`red`) to show a color palette based on that value when the example loads. Note that normally we'd probably set this on the {{htmlelement("html")}} element, but the MDN live sample was removing it when rendering.
 - The base color picker is created using an [`<input type="color">`](/en-US/docs/Web/HTML/Reference/Elements/input/color) control. When a new value is set in this control, the `--base-color` custom property is set to this value using JavaScript, which in turn generates a new color palette. All the displayed colors are relative colors based on `--base-color`.
 - The set of [`<input type="radio">`](/en-US/docs/Web/HTML/Reference/Elements/input/radio) controls enables choosing a color palette type to generate. When a new value is chosen here, JavaScript is used to set a new class on the `container` `<div>` to represent the chosen palette. In the CSS, descendant selectors are used to target the child `<div>`s (e.g., `.comp :nth-child(1)`) so they can have the correct colors applied to them and hide the unused `<div>` nodes.
 - The `container` `<div>` containing the child `<div>`s that display the colors of the generated palette. Note that an initial class of `comp` is set on it, so that the page will display a complementary color scheme when first loaded.

files/en-us/web/css/guides/counter_styles/using_counters/index.md

@@ -131,7 +131,7 @@ A reversed counter is one that is intended to count down (decrement) rather than
 Reversed counters are created using the `reversed()` function notation when naming the counter in {{cssxref("counter-reset")}}.
 
 Reversed counters have a default initial value equal to the number of elements (unlike normal counters, which have a default value of 0).
-This makes it easy to implement a counter that counts from the number of elements down to one.
+This enables implementing a counter that counts from the number of elements down to one.
 
 For example, to create a reversed counter named `section` with a default initial value, you would use the following syntax:
 

files/en-us/web/css/guides/display/block_and_inline_layout/index.md

@@ -255,7 +255,7 @@ strong {
 
 ## Summary
 
-In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behavior of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will find layout easier, as you understand the starting point for making changes to how elements are displayed.
+In this guide, we have looked at how elements display in normal flow, as block and inline elements. Due to the default behavior of these elements, an HTML document with no CSS styling at all, will display in a readable way. By understanding how normal flow works you will better understand layout, which is an important starting point when making changes to how elements are displayed.
 
 ## See also
 

files/en-us/web/css/guides/display/flow_layout_and_overflow/index.md

@@ -263,7 +263,7 @@ This is useful in the situation where you have a listing of articles, for exampl
 
 ## Summary
 
-Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. By understanding how overflow works in normal flow, you should find it easier to understand the implications of overflow content in layout methods such as grid and flexbox.
+Whether you are in continuous media on the web or in a Paged Media format such as print or EPUB, understanding how content overflows is useful when dealing with any layout method. When you understand how overflow works in normal flow, you will be better able to understand the implications of overflow content in layout methods such as grid and flexbox.
 
 ## See also
 

files/en-us/web/css/guides/display/flow_layout_and_writing_modes/index.md

@@ -177,7 +177,7 @@ body {
 
 {{EmbedLiveSample("inline-change-mode", "", "240px")}}
 
-A block-level box will establish a new block formatting context, meaning that if its inner display type would be `flow`, it will get a computed display type of `flow-root`. This is shown in the next example where the box which displays as `horizontal-tb` contains a float which is contained due to its parent establishing a new BFC.
+A block-level box will establish a new [block formatting context (BFC)](/en-US/docs/Web/CSS/Guides/Display/Block_formatting_context), meaning that if its inner display type would be `flow`, it will get a computed display type of `flow-root`. This is shown in the next example where the box which displays as `horizontal-tb` contains a float which is contained due to its parent establishing a new BFC.
 
 ```html live-sample___block-change-mode
 <div class="box">
@@ -288,7 +288,7 @@ body {
 
 {{EmbedLiveSample("width")}}
 
-Therefore, we have new properties of {{cssxref("block-size")}} and {{cssxref("inline-size")}}. If we give our block an `inline-size` of 100px, it doesn't matter whether we are in a horizontal or a vertical writing mode, `inline-size` will always mean the size in the inline direction.
+Therefore, we have the properties of {{cssxref("block-size")}} and {{cssxref("inline-size")}}. If we give our block an `inline-size` of 100px, it doesn't matter whether we are in a horizontal or a vertical writing mode, `inline-size` will always mean the size in the inline direction.
 
 ```html live-sample___inline-size
 <div class="box">
@@ -321,7 +321,7 @@ The [CSS logical properties and values](/en-US/docs/Web/CSS/Guides/Logical_prope
 
 ## Summary
 
-In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. CSS is making this easier by way of introducing logical properties and values so that when working in a vertical writing mode sizing can be based on element's inline and block size. This will be useful when creating components which can work in different writing-modes.
+In most cases, flow layout works as you would expect it to when changing the writing mode of the document or parts of the document. This can be used to properly typeset vertical languages or for creative reasons. With CSS logical properties and values, vertical writing mode sizing can be based on element's inline and block size. This is useful when creating components which can work in different writing-modes.
 
 ## See also
 

files/en-us/web/css/guides/flexible_box_layout/relationship_with_other_layout_methods/index.md

@@ -181,7 +181,7 @@ The `contents` value of the {{cssxref("display")}} property is described in the
 
 > "The element itself does not generate any boxes, but its children and pseudo-elements still generate boxes as normal. For the purposes of box generation and layout, the element must be treated as if it had been replaced with its children and pseudo-elements in the document tree."
 
-This value of `display` controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is much easier to see with an example.
+This value of `display` controls box generation, and whether the element should generate a box that we can style and see on the page, or whether instead the box it would normally create should be removed and the child elements essentially moved up to participate in whatever layout method the parent would have been part of. This is easier to see with an example.
 
 In the following live example, we have a flex container containing three flex items. One has two elements nested inside it, which would not ordinarily participate in flex layout. Flex layout only applies to the direct children of a flex container.
 

files/en-us/web/css/guides/flexible_box_layout/use_cases/index.md

@@ -374,7 +374,7 @@ img {
 
 Flexbox is particularly useful when it comes to styling form controls. Forms have several small elements that we typically want to align with each other. A common pattern is to have a {{htmlelement("label")}} and {{htmlelement("input")}} pair combined with a {{htmlelement("button")}}, perhaps for a search form or a newsletter sign-up form where you want your visitor to enter their email address.
 
-Flexbox makes this type of layout easy to achieve. The `<label>`, `<input>` and `<button>` are contained in a wrapper that is set to `display: flex`. The flex properties allow the `<input>` field to grow, while the button and label do not grow. The text input field will grow and shrink depending on the space available.
+Flexbox makes this type of layout achievable with just a few declarations. The `<label>`, `<input>` and `<button>` are contained in a wrapper that is set to `display: flex`. The flex properties allow the `<input>` field to grow, while the button and label do not grow. The text input field will grow and shrink depending on the space available.
 
 ```html live-sample___label-input-button
 <form class="example">
@@ -416,7 +416,7 @@ Flexbox makes this type of layout easy to achieve. The `<label>`, `<input>` and
 
 {{EmbedLiveSample("label-input-button")}}
 
-Patterns like this can make it much easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.
+Patterns like this can make it easier to create a library of form elements for your design, which easily accommodate additional elements being added. You are taking advantage of the flexibility of flexbox by mixing items that do not grow with those that do.
 
 ## Conclusion
 

files/en-us/web/css/guides/grid_layout/grid_template_areas/index.md

@@ -232,7 +232,7 @@ The value of {{cssxref("grid-template-areas")}} must show a complete grid, other
 
 ## Redefining the grid using media queries
 
-As our layout is now contained in one part of the CSS, this makes it very easy to make changes at different breakpoints. You can do this by redefining the grid, the position of items on the grid, or both at once.
+As our layout is now contained in one part of the CSS, we can make changes for different breakpoints in one location in our codebase. You can do this by redefining the grid, the position of items on the grid, or both at once.
 
 When doing this, define the names for your areas outside of any media queries. That way the content area would always be called `main` no matter where on the grid it is placed.
 
@@ -320,7 +320,7 @@ We can then redefine that layout inside [media queries](/en-US/docs/Web/CSS/Guid
 
 ## Using `grid-template-areas` for UI elements
 
-Many of the grid examples you will find online make the assumption that you will use grid for main page layout, however grid can be just as useful for small elements as those larger ones. Using {{cssxref("grid-template-areas")}} can be especially nice as it is easy to see in the code what your element looks like.
+Many of the grid examples you will find online make the assumption that you will use grid for main page layout, however grid can be just as useful for small elements as those larger ones. Using {{cssxref("grid-template-areas")}} can be especially nice as it enables seeing in the code what your element looks like.
 
 ### Media object example
 

files/en-us/web/css/guides/grid_layout/relationship_with_other_layout_methods/index.md

@@ -125,7 +125,7 @@ If you are using flexbox and find yourself disabling some of the flexibility, yo
 
 ### Box alignment
 
-Most grid alignment features were originally defined is the [CSS flexible box layout](/en-US/docs/Web/CSS/Guides/Flexible_box_layout). These features provided proper alignment control for the first time and made it easy to center a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These properties are now defined in the [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) module, and are used in multiple layout modes, including grid layout.
+Most grid alignment features were originally defined is the [CSS flexible box layout](/en-US/docs/Web/CSS/Guides/Flexible_box_layout). These features provided proper alignment control for the first time and enabled centering a box on the page. Flex items can stretch to the height of the flex container, meaning that equal height columns were possible. These properties are now defined in the [CSS box alignment](/en-US/docs/Web/CSS/Guides/Box_alignment) module, and are used in multiple layout modes, including grid layout.
 
 We will be taking a proper look at [Aligning items in CSS grid layout](/en-US/docs/Web/CSS/Guides/Grid_layout/Box_alignment) later. For now, here is a comparison between examples of flexbox and grid.
 

files/en-us/web/css/guides/multicol_layout/using/index.md

@@ -5,7 +5,7 @@ page-type: guide
 sidebar: cssref
 ---
 
-The properties defined in the **CSS multi-column layout module** extend the _block layout mode_, enabling the easy definition of multiple columns of text. People have trouble reading text if lines are too long. If it takes too long for the eyes to move from the end of one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.
+The properties defined in the **CSS multi-column layout module** extend the _block layout mode_, enabling the definition of multiple columns of text. People have trouble reading text if lines are too long. If it takes too long for the eyes to move from the end of one line to the beginning of the next, readers can lose track of which line they were on. To provide for a better user experience when reading text making use of a large screen, you should limit the width of text by using columns of text placed side by side, just as newspapers do.
 
 ## Using columns
 

files/en-us/web/css/guides/properties_and_values_api/houdini/index.md

@@ -5,7 +5,7 @@ page-type: guide
 sidebar: cssref
 ---
 
-**CSS Houdini** is a set of APIs that expose parts of the CSS engine. This makes it easier for developers to create extensions for CSS. These extensions might be to polyfill features that are not yet available in a browser, experiment with new ways of doing layout, or add creative borders or other effects.
+**CSS Houdini** is a set of APIs that expose parts of the CSS engine enabling developers to create CSS extensions. These extensions might be to polyfill features that are not yet available in a browser, experiment with new ways of doing layout, or add creative borders or other effects.
 
 While many Houdini examples showcase the creative possibilities of the APIs, there are many practical use cases. For example, you can use Houdini to create advanced custom properties with type checking and default values.