Adjust css examples formatting (#26127)

guide/english/css/background-opacity/index.md

@@ -48,16 +48,15 @@ You have to add the following CSS property to achieve the transparency levels.
   opacity:0.0;
 }
 ```
+
 Alternatively you can use a transparent rgba value like this:
 ```css
-
 .class-name{
   background-color: rgba(0,0,0,.5);
 }
 ```
 The example above sets the background to be black with 50% opacity. The last value of an rgba value is the alpha value. An alpha value of 1 equals 100%, and 0.5 (.5 for short) equals 50%. We use this method to add transparency to an element without affecting the content inside.
 
-
 #### Transparent Hover Effect
 The opacity property is often used together with the **:hover** selector to change the opacity on mouse-over:
 
@@ -88,10 +87,8 @@ Using the rgba value is most preferable when the background has content like tex
 
 The example above sets the background with a 50% opacity using hex alpha code. The alpha digit is the last two numbers `80`. The formats are sometimes referred to as #RRGGBBAA and #RGBA and the the AA part is a hex representation of 0-100. For example the hex alpha code of 0% is `00` and the hex alpha code of 100% is `FF`.
 [A codepen example to show hex alpha values](https://codepen.io/chriscoyier/pen/XjbzAW)
-
 [A codepen example to show background opacity ranges](https://codepen.io/lvcoulter/full/dVrwmK/)
 
-
 #### More Information:
 
 + [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)  

guide/english/css/background/index.md

@@ -15,13 +15,13 @@ Here is an example of setting the background color for a web page to green.
 ```
 ![fullbackground](https://user-images.githubusercontent.com/26467304/31036038-845567f2-a538-11e7-8e6c-8a52bb0d44b8.png)
 
-Here is an example of setting the background colors for two elements. This will set the background of the header 
+Here is an example of setting the background colors for two elements. This will set the background of the header to purple and the rest of the page to blue.
-to purple and the rest of the page to blue.
 
 ```css
 body {
   background-color: blue;
 }
+
 h1 {
   background–color: purple;
 }

guide/english/css/before-selector/index.md

@@ -12,7 +12,7 @@ Let's look at some examples:
 
 p::before {
   content: "";
-    border: solid 5px #ccc
+  border: solid 5px #ccc;
 }
 
 span.comment::before{

guide/english/css/borders/index.md

@@ -41,7 +41,6 @@ The `border-style` property can be set to a wide range of different border types
 - `hidden` - Sets a hidden border.
 
 Each side of the border doesn't need to match.
-
 Each side can be styled separately:
 ```css
   border-top-style: solid;
@@ -82,7 +81,6 @@ p {
 
 ### Border Color
 
-
 Now for the creative aspect of CSS Borders! With the use of the `border-color` property, you will be able to create customized borders to fit the flow and layout
 of your website. Border colors can be any color defined by RGB, hexadecimal, or key terms. Below is an example of each of these types.
 
@@ -107,7 +105,6 @@ p {
 ```
 
 ### Border-Radius
-
 The `border-radius` property allows the corners of a border to be rounded. `border-radius` takes a length as its value which determines the degree of curvature for each corner of the element. The length can be in px or %.
 ```css 
   border-radius: 25px;

guide/english/css/class-selector/index.md

@@ -7,10 +7,12 @@ A Class Selector is used in a CSS file to apply style to the HTML elements with
 To select elements with a specific class, we use a full stop `.` or "period" character, with the name of the class.
 
 For example
+```css
 .center {
   text-align: center;
   color: red;
 }
+```
 
 Here, all HTML elements with `class="center"` will be red and center-aligned.
 
@@ -52,5 +54,3 @@ h1.test, h2.test {
 **Tips: No space between multiple classes.**
 #### More Information:
 CSS Syntax and Selectors: <a href='https://www.w3schools.com/css/css_syntax.asp' target='_blank' rel='nofollow'>w3schools</a>
-
-

guide/english/css/comments-in-css/index.md

@@ -15,11 +15,6 @@ The comment syntax in CSS works for both single and multi-line comments. You can
 */
 
 /* This is a single line comment*/
-.group:after {
-    content: "";
-    display: table;
-    clear: both;
-}
 ```
 
 By using CSS comments to make your stylesheets more readable, the CSS will be easier to maintain in the future for you or another developer. 
@@ -84,10 +79,10 @@ Here are a few exmples to get you started of CSS comments you can use in your da
 6.0 - Body */
 
   /************************************************************************
-5.1 - Sliders */
+  6.1 - Sliders */
 
   /************************************************************************
-5.2 - Imagery */
+  6.2 - Imagery */
 
 /****************************************************************************
 7.0 - Footer */
@@ -115,7 +110,7 @@ Here's how region works:
   height: 20px;
 }
 /*#endregion */
-````
+```
 
 ### More Information:
 

guide/english/css/css-buttons/index.md

@@ -119,7 +119,7 @@ button {
 
 To animate a button on click use 'button:active':
 
-```
+```css
 .button {
   display: inline-block;
   padding: 15px 25px;
@@ -167,4 +167,3 @@ In many cases buttons will have to link to an url. As we can't add an href attri
 #### More Information:
 * https://www.w3schools.com/css/css3_buttons.asp
 * https://www.w3schools.com/howto/howto_css_animate_buttons.asp
-

guide/english/css/css-preprocessors/index.md

@@ -47,8 +47,8 @@ Here, the background color will change color depending on the width of the page'
 
 ### Mixins
 There are probably portions of your styling you would like to reuse. Mixins allow you to group any number of properties under one common name. You declare mixin with the @mixin <name> and use it with the @include <name>.
+These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versitile tools. Many web developers use them, and it is highly recommended to learn at least one of them.
 
-These are but a few of the major functions of CSS Preprocessors. As you can see, CSS Preprocessors are incredibly useful and versatile tools. Many web developers use them, and it is highly recommended to learn at least one of them. 
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->
 SASS: http://sass-lang.com/

guide/english/css/css3-backgrounds/index.md

@@ -12,7 +12,7 @@ The CSS `background` shorthand property is used to define multiple properties li
 The `background-color` property specifies the background color of an element.
 
 ```css
-   background-color : #F00;
+  background-color : #F00;
 ```
 
 ### Background Image
@@ -22,7 +22,7 @@ The `background-image` property specifies an image to use as background of an el
 By default, the image repeats itself to cover the entire surface of the element.
 
 ```css
-   background-image: url("GitHub-Mark.png");
+ background-image: url("GitHub-Mark.png");
 ```
 
 ### Background Image - Repetition
@@ -31,14 +31,14 @@ By default, the `background-image` property repeats on the X and Y axis, to cove
 If you want to set an axis, like X axis, use `background-repeat` property type:
 
 ```css
-   background-image: url("GitHub-Mark.png");
+  background-image: url("GitHub-Mark.png");
   background-repeat: repeat-x;
 ```
 
 But sometimes you don't want to have your background image cover the whole surface, so you've to specify it by typing:
 
 ```css
-   background-image: url("GitHub-Mark.png");
+  background-image: url("GitHub-Mark.png");
   background-repeat: no-repeat;
 ```
 
@@ -47,7 +47,7 @@ But sometimes you don't want to have your background image cover the whole surfa
 You can specify the position of the background by typing :
 
 ```css
-   background-image: url("GitHub-Mark.png");
+  background-image: url("GitHub-Mark.png");
   background-repeat: no-repeat;
   background-position : left bottom;
 ```
@@ -70,7 +70,7 @@ If you do not want the background image to scroll with the rest of the page, use
 You can pass all the properties in one super-property:
 
 ```css
-   background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
+  background: #F00 url("GitHub-Mark.png") no-repeat fixed left bottom;
 ```
 
 When you use this shorthand property, it must be in this order:

guide/english/css/image-galleries/index.md

@@ -69,4 +69,3 @@ div.desc {
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->
 https://www.w3schools.com/css/css_image_gallery.asp
-

guide/english/css/image-opacity-and-transparency/index.md

@@ -16,7 +16,7 @@ img {
 }
 ```
 
-Include ```filter: alpha(opacity=x)``` for IE8 and earlier. `x` takes a value from 0-100.
+Include ```filter: alpha(opacity=x)``` for IE8 and earlier. The x takes a value from 0-100.
 ```css
 img {
   opacity: 0.3;
@@ -59,8 +59,4 @@ img:hover {
 
 #### More Information:
 - w3schools.com: [CSS Opacity/Transparency](https://www.w3schools.com/css/css_image_transparency.asp)
-
 - MDN Web Docs: [Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)
-
-
-

guide/english/css/layout/grid-layout/index.md

@@ -41,7 +41,7 @@ Ideally, when you build a site, you'd design it with Grid and use Flex as a fall
 To make any element a grid, you need to assign its `display` property to `grid`, like so:  
 
 ```css
-.conatiner {
+.container {
   display: grid;
 }
 ```

guide/english/css/layout/the-position-property/index.md

@@ -5,7 +5,7 @@ title: The Position Property
 
 The position property specifies the type of positioning method used for an element (static, relative, fixed, absolute or sticky).
 The position property specifies the type of positioning method used for an element.
-The position proprty isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
+The position property isn't generally used to create layouts, but instead it is used to position elements that somehow stand out from the page flow.
 
 There are five different position values:
 
@@ -20,5 +20,3 @@ Elements are then positioned using the top, bottom, left, and right properties.
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->
 <a href="https://www.w3schools.com/css/css_positioning.asp" target="_blank">The is a good article</a> to read up to understand more about the position property.
-
-

guide/english/css/navigation-bars/index.md

@@ -64,5 +64,3 @@ There are two parts to any navigation: the HTML and the CSS. This is just a quic
 #### More Information:
 <!-- Please add any articles you think might be helpful to read before writing the article -->
 More Navigation Examples: [W3Schools](https://www.w3schools.com/css/css_navbar.asp)
-
-

guide/english/css/properties/background-color-property/index.md

@@ -35,5 +35,3 @@ div {
 
 #### More Information:
 <a href='https://developer.mozilla.org/en-US/docs/Web/CSS/background-color?v=b' target='_blank' rel='nofollow'>MDN web docs</a>
-
-