Remove "simple" part 3: change to "basic"

files/en-us/web/css/attr/index.md

@@ -17,7 +17,7 @@ The **`attr()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_F
 ## Syntax
 
 ```css
-/* Simple usage */
+/* Basic usage */
 attr(data-count);
 attr(title);
 

files/en-us/web/css/counter/index.md

@@ -16,7 +16,7 @@ The `counter()` function is generally used within [pseudo-element](/en-US/docs/W
 ## Syntax
 
 ```css
-/* Simple usage */
+/* Basic usage */
 counter(counter-name);
 
 /* changing the counter display */

files/en-us/web/css/justify-items/index.md

@@ -118,7 +118,7 @@ This property can take one of four different forms:
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 In the following example, we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` (the default), which causes the grid items to stretch across the entire width of their cells.
 
@@ -175,7 +175,7 @@ span {
 
 #### Result
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 200)}}
 
 ## Specifications
 

files/en-us/web/css/justify-self/index.md

@@ -119,7 +119,7 @@ This property can take one of three different forms:
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 In the following example we have a simple 2 x 2 grid layout. Initially the grid container is given a `justify-items` value of `stretch` — the default — which causes the grid items to stretch across the entire width of their cells.
 
@@ -183,7 +183,7 @@ span {
 
 #### Result
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 200)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 200)}}
 
 ## Specifications
 

files/en-us/web/css/place-self/index.md

@@ -89,7 +89,7 @@ place-self: unset;
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 In the following example we have a simple 2 x 2 grid layout. Initially the grid container has [`justify-items`](/en-US/docs/Web/CSS/justify-items) and [`align-items`](/en-US/docs/Web/CSS/align-items) values of `stretch` — the defaults — which causes the grid items to stretch across the entire width of their cells.
 
@@ -152,7 +152,7 @@ span {
 
 #### Result
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 300)}}
 
 ## Specifications
 

files/en-us/web/css/scroll-margin-inline-end/index.md

@@ -41,15 +41,15 @@ scroll-margin-inline-end: unset;
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
 
 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.
 
 #### HTML
 
-The HTML that represents the blocks is very simple:
+The HTML includes a scroller with four children:
 
 ```html
 <div class="scroller">
@@ -120,7 +120,7 @@ This means that when scrolling past the middle child elements, the scrolling wil
 
 Try it for yourself:
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 300)}}
 
 ## Specifications
 

files/en-us/web/css/scroll-margin-inline-start/index.md

@@ -41,15 +41,15 @@ scroll-margin-inline-start: unset;
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
 
 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.
 
 #### HTML
 
-The HTML that represents the blocks is very simple:
+The HTML includes a scroller with four children:
 
 ```html
 <div class="scroller">
@@ -120,7 +120,7 @@ This means that when scrolling past the middle child elements, the scrolling wil
 
 Try it for yourself:
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 300)}}
 
 ## Specifications
 

files/en-us/web/css/scroll-margin-inline/index.md

@@ -52,15 +52,15 @@ The scroll-margin values represent outsets defining the scroll snap area that is
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
 
 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the right of each block.
 
 #### HTML
 
-The HTML that represents the blocks is very simple:
+The HTML includes a scroller with four children:
 
 ```html
 <div class="scroller">
@@ -134,7 +134,7 @@ This means that when scrolling past the middle child elements, the scrolling wil
 
 Try it for yourself:
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 300)}}
 
 ## Specifications
 

files/en-us/web/css/scroll-margin/index.md

@@ -56,15 +56,15 @@ Thus, the `scroll-margin` values represent outsets defining the scroll snap area
 
 ## Examples
 
-### Simple demonstration
+### Basic demonstration
 
 This example implements something very similar to the interactive example above, except that here we'll explain to you how it's implemented.
 
 The aim here is to create four horizontally-scrolling blocks, the second and third of which snap into place, near but not quite at the left of each block.
 
 #### HTML
 
-The HTML that represents the blocks is very simple:
+The HTML includes a scroller with four children:
 
 ```html
 <div class="scroller">
@@ -138,7 +138,7 @@ This means that when scrolling past the middle child elements, the scrolling wil
 
 Try it for yourself:
 
-{{EmbedLiveSample('Simple_demonstration', '100%', 300)}}
+{{EmbedLiveSample('Basic_demonstration', '100%', 300)}}
 
 ## Specifications
 

files/en-us/web/css/shape-outside/index.md

@@ -7,7 +7,7 @@ browser-compat: css.properties.shape-outside
 
 {{CSSRef}}
 
-The **`shape-outside`** [CSS](/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than simple boxes.
+The **`shape-outside`** [CSS](/en-US/docs/Web/CSS) property defines a shape—which may be non-rectangular—around which adjacent inline content should wrap. By default, inline content wraps around its margin box; `shape-outside` provides a way to customize this wrapping, making it possible to wrap text around complex objects rather than rectangular boxes.
 
 {{EmbedInteractiveExample("pages/css/shape-outside.html")}}
 

files/en-us/web/css/string/index.md

@@ -28,7 +28,7 @@ However, to get new lines, you must also set the {{cssxref("white-space")}} prop
 ### Examples of valid strings
 
 ```css
-/* Simple strings */
+/* Basic strings */
 "This string is demarcated by double quotes."
 'This string is demarcated by single quotes.'
 

files/en-us/web/css/text-indent/index.md

@@ -58,7 +58,7 @@ text-indent: unset;
 
 ## Examples
 
-### Simple indent
+### Basic indent
 
 #### HTML
 
@@ -84,7 +84,7 @@ p {
 
 #### Result
 
-{{ EmbedLiveSample('Simple_indent','100%','100%') }}
+{{ EmbedLiveSample('Basic_indent','100%','100%') }}
 
 ### Skipping indentation on the first paragraph
 

files/en-us/web/css/text-shadow/index.md

@@ -65,7 +65,7 @@ This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first
 
 ## Examples
 
-### Simple shadow
+### Basic shadow
 
 ```css
 .red-text-shadow {
@@ -80,7 +80,7 @@ This property applies to both {{cssxref("::first-line")}} and {{cssxref("::first
 </p>
 ```
 
-{{EmbedLiveSample('Simple_shadow', '660px', '90px')}}
+{{EmbedLiveSample('Basic_shadow', '660px', '90px')}}
 
 ### Multiple shadows
 

files/en-us/web/css/text-underline-position/index.md

@@ -55,9 +55,9 @@ text-underline-position: unset;
 
 ## Examples
 
-### A simple example
+### A basic example
 
-Let's take a couple of simple example paragraphs:
+We create two example paragraphs:
 
 ```html
 <p class="horizontal">
@@ -99,7 +99,7 @@ In the text with a vertical [`writing-mode`](/en-US/docs/Web/CSS/writing-mode) s
 
 The live example looks like this:
 
-{{EmbedLiveSample('A_simple_example', '100%', 600)}}
+{{EmbedLiveSample('A_basic_example', '100%', 600)}}
 
 ### Setting text-underline-position globally
 

files/en-us/web/css/transition-behavior/index.md

@@ -152,7 +152,7 @@ The two properties we want to animate are [`opacity`](/en-US/docs/Web/CSS/opacit
 Because the animated element is being promoted to the [top layer](/en-US/docs/Glossary/Top_layer) when shown and removed from the top layer when hidden — which also means that its hidden state has [`display: none`](/en-US/docs/Web/CSS/display) set on it — the following properties are added to the list of transitioned elements to get the animation working in both directions. In both cases, `transition-behavior: allow-discrete` is set in the shorthand to enable discrete animation.
 
 - `display`: Required so that the animated element is visible (set to `display: block`) throughout both the entry and exit animation. Without this, the exit animation would not be visible; in effect, the popover would just disappear.
-- [`overlay`](/en-US/docs/Web/CSS/overlay): Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for simple animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective.
+- [`overlay`](/en-US/docs/Web/CSS/overlay): Required to make sure that the removal of the element from the top layer is deferred until the animation has been completed. This doesn't make a huge difference for basic animations such as this one, but in more complex cases not doing this can result in the element being removed from the overlay too quickly, meaning the animation is not smooth or effective.
 
 In addition, a starting state for the animation is set inside the [`@starting-style`](/en-US/docs/Web/CSS/@starting-style) at-rule. This is needed to avoid unexpected behavior. By default transitions are not triggered on elements' first style updates, or when the `display` type changes from `none` to another type. `@starting-style` allows you to override that default in a specific controlled fashion. Without this, the entry animation would not occur and the popover would just appear.
 

files/en-us/web/css/tutorials/index.md

@@ -22,7 +22,7 @@ They are grouped by complexity so that you can choose the most appropriate for y
   - : Backgrounds are fundamental for nice styling: CSS allows you to set several of them on each box. This tutorial explains how they interact and how to achieve nice effects.
 - [Resizing background images](/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Resizing_background_images)
   - : CSS allows you to resize images used as an element's background.
-    This tutorial describes how to achieve this in a simple way.
+    This tutorial describes how to achieve this.
 - [Using media queries](/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries)
   - : The size of the screens, or the kind of devices like touchscreens or printed sheets vary greatly nowadays.
     Media queries are the fundamental building blocks in building websites that render everywhere in their best quality.

files/en-us/web/css/url_function/index.md

@@ -15,7 +15,7 @@ The **`url()`** [CSS](/en-US/docs/Web/CSS) [function](/en-US/docs/Web/CSS/CSS_Fu
 > In CSS Level 1, the `url()` functional notation described only true URLs. In CSS Level 2, the definition of `url()` was extended to describe any URI, whether a URL or a URN. Confusingly, this meant that `url()` could be used to create a `<uri>` CSS data type. This change was not only awkward but, debatably, unnecessary, since URNs are almost never used in actual CSS. To alleviate the confusion, CSS Level 3 returned to the narrower, initial definition. Now, `url()` denotes only true `<url>`s.
 
 ```css
-/* Simple usage */
+/* Basic usage */
 url("https://example.com/images/myImg.jpg");
 url('https://example.com/images/myImg.jpg');
 url(https://example.com/images/myImg.jpg);

files/en-us/web/css/var/index.md

@@ -16,7 +16,7 @@ The `var()` function cannot be used in property names, selectors or anything els
 ## Syntax
 
 ```css
-/* Simple usage */
+/* Basic usage */
 var(--custom-prop);
 
 /* With fallback */