aboutsummaryrefslogtreecommitdiff
path: root/files/ar/learn/css
diff options
context:
space:
mode:
authorRyan Johnson <rjohnson@mozilla.com>2021-04-29 16:16:42 -0700
committerGitHub <noreply@github.com>2021-04-29 16:16:42 -0700
commit95aca4b4d8fa62815d4bd412fff1a364f842814a (patch)
tree5e57661720fe9058d5c7db637e764800b50f9060 /files/ar/learn/css
parentee3b1c87e3c8e72ca130943eed260ad642246581 (diff)
downloadtranslated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.gz
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.tar.bz2
translated-content-95aca4b4d8fa62815d4bd412fff1a364f842814a.zip
remove retired locales (#699)
Diffstat (limited to 'files/ar/learn/css')
-rw-r--r--files/ar/learn/css/building_blocks/index.html90
-rw-r--r--files/ar/learn/css/building_blocks/selectors/index.html223
-rw-r--r--files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html119
-rw-r--r--files/ar/learn/css/css_layout/index.html77
-rw-r--r--files/ar/learn/css/first_steps/how_css_is_structured/index.html179
-rw-r--r--files/ar/learn/css/first_steps/index.html46
-rw-r--r--files/ar/learn/css/index.html63
-rw-r--r--files/ar/learn/css/styling_text/styling_lists/index.html385
8 files changed, 0 insertions, 1182 deletions
diff --git a/files/ar/learn/css/building_blocks/index.html b/files/ar/learn/css/building_blocks/index.html
deleted file mode 100644
index 8768d600eb..0000000000
--- a/files/ar/learn/css/building_blocks/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: CSS building blocks
-slug: Learn/CSS/Building_blocks
-tags:
- - Beginner
- - CSS
- - Learn
- - NeedsTranslation
- - TopicStub
- - building blocks
-translation_of: Learn/CSS/Building_blocks
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">This module carries on where <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> left off — now you've gained familiarity with the language and its syntax, and got some basic experience with using it, its time to dive a bit deeper. This module looks at the cascade and inheritance, all the selector types we have available, units, sizing, styling backgrounds and borders, debugging, and lots more.</p>
-
-<p class="summary">The aim here is to provide you with a toolkit for writing competent CSS and help you understand all the essential theory, before moving on to more specific disciplines like <a href="/en-US/docs/Learn/CSS/Styling_text">text styling</a> and <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a>.</p>
-
-<h2 id="Prerequisites">Prerequisites</h2>
-
-<p>Before starting this module, you should have:</p>
-
-<ol>
- <li>Basic familiarity with using computers, and using the Web passively (i.e. just looking at it, consuming the content.)</li>
- <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
- <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
- <li>An understanding of the basics of CSS, as discussed in the <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a> module.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: If you are working on a computer/tablet/another device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://glitch.com/">Glitch</a>.</p>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<p>This module contains the following articles, which cover the most essential parts of the CSS language. Along the way you'll come across plenty of exercises to allow you to test your understanding.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></dt>
- <dd>The aim of this lesson is to develop your understanding of some of the most fundamental concepts of CSS — the cascade, specificity, and inheritance — which control how CSS is applied to HTML and how conflicts are resolved.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a></dt>
- <dd>There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles, we'll run through the different types in great detail, seeing how they work. The sub-articles are as follows:
- <ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
- </ul>
- </dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></dt>
- <dd>Everything in CSS has a box around it, and understanding these boxes is key to being able to create layouts with CSS, or to align items with other items. In this lesson, we will take a proper look at the CSS <em>Box Model</em>, in order that you can move onto more complex layout tasks with an understanding of how it works and the terminology that relates to it.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></dt>
- <dd>In this lesson we will take a look at some of the creative things you can do with CSS backgrounds and borders. From adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in CSS.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></dt>
- <dd>In recent years, CSS has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as Japanese) — these different directionalities are called <strong>writing modes</strong>. As you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in this article.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></dt>
- <dd>In this lesson we will look at another important concept in CSS — <strong>overflow</strong>. Overflow is what happens when there is too much content to be contained comfortably inside a box. In this guide, you will learn what it is and how to manage it.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">CSS values and units</a></dt>
- <dd>Every property used in CSS has a value or set of values that are allowed for that property. In this lesson, we will take a look at some of the most common values and units in use.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></dt>
- <dd>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson, we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></dt>
- <dd>In this lesson we will take a look at how certain special elements are treated in CSS. Images, other media, and form elements behave a little differently in terms of your ability to style them with CSS than regular boxes. Understanding what is and isn't possible can save some frustration, and this lesson will highlight some of the main things that you need to know.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></dt>
- <dd>Styling an HTML table isn't the most glamorous job in the world, but sometimes we all have to do it. This article provides a guide to making HTML tables look good, with some specific table styling techniques highlighted.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></dt>
- <dd>Sometimes when writing CSS you will encounter an issue where your CSS doesn't seem to be doing what you expect. This article will give you guidance on how to go about debugging a CSS problem, and show you how the DevTools included in all modern browsers can help you find out what is going on.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></dt>
- <dd>As you start to work on larger stylesheets and big projects you will discover that maintaining a huge CSS file can be challenging. In this article, we will take a brief look at some best practices for writing your CSS to make it easily maintainable, and some of the solutions you will find in use by others to help improve maintainability.</dd>
-</dl>
-
-<h2 id="Assessments">Assessments</h2>
-
-<p>Want to test your CSS skills? The following assessments will test your understanding of the CSS covered in the guides above.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Fundamental_CSS_comprehension">Fundamental CSS comprehension</a></dt>
- <dd>This assessment tests your understanding of basic syntax, selectors, specificity, box model, and more.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/Creating_fancy_letterheaded_paper">Creating fancy letterheaded paper</a></dt>
- <dd>If you want to make the right impression, writing a letter on nice letterheaded paper can be a really good start. In this assessment, we'll challenge you to create an online template to achieve such a look.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes/A_cool_looking_box">A cool looking box</a></dt>
- <dd>Here you'll get some practice in using background and border styling to create an eye-catching box.</dd>
-</dl>
-
-<h2 id="See_also">See also</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/Building_blocks/Advanced_styling_effects">Advanced styling effects</a></dt>
- <dd>This article acts as a box of tricks, providing an introduction to some interesting advanced styling features such as box shadows, blend modes, and filters.</dd>
-</dl>
diff --git a/files/ar/learn/css/building_blocks/selectors/index.html b/files/ar/learn/css/building_blocks/selectors/index.html
deleted file mode 100644
index 9bc86d8abc..0000000000
--- a/files/ar/learn/css/building_blocks/selectors/index.html
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: CSS selectors
-slug: Learn/CSS/Building_blocks/Selectors
-translation_of: Learn/CSS/Building_blocks/Selectors
----
-<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>
-
-<p class="summary">In {{Glossary("CSS")}}, selectors are used to target the {{glossary("HTML")}} elements on our web pages that we want to style. There are a wide variety of CSS selectors available, allowing for fine-grained precision when selecting elements to style. In this article and its sub-articles we'll run through the different types in great detail, seeing how they work.</p>
-
-<table class="learn-box standard-table">
- <tbody>
- <tr>
- <th scope="row">Prerequisites:</th>
- <td>Basic computer literacy, <a href="/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
- </tr>
- <tr>
- <th scope="row">Objective:</th>
- <td>To learn how CSS selectors work in detail.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="What_is_a_selector">What is a selector?</h2>
-
-<p>You have met selectors already. A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them. The element or elements which are selected by the selector are referred to as the <em>subject of the selector</em>.</p>
-
-<p><img alt="Some code with the h1 highlighted." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>
-
-<p>In earlier articles you met some different selectors, and learned that there are selectors that target the document in different ways — for example by selecting an element such as <code>h1</code>, or a class such as <code>.special</code>.</p>
-
-<p>In CSS, selectors are defined in the CSS Selectors specification; like any other part of CSS they need to have support in browsers for them to work. The majority of selectors that you will come across are defined in the <a href="https://www.w3.org/TR/selectors-3/">Level 3 Selectors specification</a>, which is a mature specification, therefore you will find excellent browser support for these selectors.</p>
-
-<h2 id="Selector_lists">Selector lists</h2>
-
-<p>If you have more than one thing which uses the same CSS then the individual selectors can be combined into a <em>selector list</em> so that the rule is applied to all of the individual selectors. For example, if I have the same CSS for an <code>h1</code> and also a class of <code>.special</code>, I could write this as two separate rules.</p>
-
-<pre class="brush: css notranslate"><code>h1 {
- color: blue;
-}
-
-.special {
- color: blue;
-} </code></pre>
-
-<p>I could also combine these into a selector list, by adding a comma between them.</p>
-
-<pre class="brush: css notranslate"><code>h1, .special {
- color: blue;
-} </code></pre>
-
-<p>White space is valid before or after the comma. You may also find the selectors more readable if each is on a new line.</p>
-
-<pre class="brush: css notranslate"><code>h1,
-.special {
- color: blue;
-} </code></pre>
-
-<p>In the live example below try combining the two selectors which have identical declarations. The visual display should be the same after combining them.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}} </p>
-
-<p>When you group selectors in this way, if any selector is invalid the whole rule will be ignored.</p>
-
-<p>In the following example, the invalid class selector rule will be ignored, whereas the <code>h1</code> would still be styled.</p>
-
-<pre class="brush: css notranslate"><code>h1 {
- color: blue;
-}
-
-..special {
- color: blue;
-} </code></pre>
-
-<p>When combined however, neither the <code>h1</code> nor the class will be styled as the entire rule is deemed invalid.</p>
-
-<pre class="brush: css notranslate"><code>h1, ..special {
- color: blue;
-} </code></pre>
-
-<h2 id="Types_of_selectors">Types of selectors</h2>
-
-<p>There are a few different groupings of selectors, and knowing which type of selector you might need will help you to find the right tool for the job. In this article's subarticles we will look at the different groups of selectors in more detail.</p>
-
-<h3 id="Type_class_and_ID_selectors">Type, class, and ID selectors</h3>
-
-<p>This group includes selectors that target an HTML element such as an <code>&lt;h1&gt;</code>.</p>
-
-<pre class="brush: css notranslate">h1 { }</pre>
-
-<p>It also includes selectors which target a class:</p>
-
-<pre class="brush: css notranslate">.box { }</pre>
-
-<p>or, an ID:</p>
-
-<pre class="brush: css notranslate">#unique { }</pre>
-
-<h3 id="Attribute_selectors">Attribute selectors</h3>
-
-<p>This group of selectors gives you different ways to select elements based on the presence of a certain attribute on an element:</p>
-
-<pre class="brush: css notranslate">a[title] { }</pre>
-
-<p>Or even make a selection based on the presence of an attribute with a particular value:</p>
-
-<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>
-
-<h3 id="Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</h3>
-
-<p>This group of selectors includes pseudo-classes, which style certain states of an element. The <code>:hover</code> pseudo-class for example selects an element only when it is being hovered over by the mouse pointer:</p>
-
-<pre class="brush: css notranslate">a:hover { }</pre>
-
-<p>It also includes pseudo-elements, which select a certain part of an element rather than the element itself. For example, <code>::first-line</code> always selects the first line of text inside an element (a <code>&lt;p&gt;</code> in the below case), acting as if a <code>&lt;span&gt;</code> was wrapped around the first formatted line and then selected.</p>
-
-<pre class="brush: css notranslate">p::first-line { }</pre>
-
-<h3 id="Combinators">Combinators</h3>
-
-<p>The final group of selectors combine other selectors in order to target elements within our documents. The following for example selects paragraphs that are direct children of <code>&lt;article&gt;</code> elements using the child combinator (<code>&gt;</code>):</p>
-
-<pre class="brush: css notranslate">article &gt; p { }</pre>
-
-<h2 id="Next_steps">Next steps</h2>
-
-<p>You can take a look at the reference table of selectors below for direct links to the various types of selectors in this Learn section or on MDN in general, or continue on to start your journey by finding out about <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">type, class, and ID selectors</a>.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="Reference_table_of_selectors">Reference table of selectors</h2>
-
-<p>The below table gives you an overview of the selectors you have available to use, along with links to the pages in this guide which will show you how to use each type of selector. I have also included a link to the MDN page for each selector where you can check browser support information. You can use this as a reference to come back to when you need to look up selectors later in the material, or as you experiment with CSS generally.</p>
-
-<table class="standard-table">
- <thead>
- <tr>
- <th scope="col">Selector</th>
- <th scope="col">Example</th>
- <th scope="col">Learn CSS tutorial</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Type_selectors">Type selector</a></td>
- <td><code>h1 {  }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Type_selectors">Type selectors</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Universal_selectors">Universal selector</a></td>
- <td><code>* {  }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#The_universal_selector">The universal selector</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Class_selectors">Class selector</a></td>
- <td><code>.box {  }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#Class_selectors">Class selectors</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/ID_selectors">id selector</a></td>
- <td><code>#unique { }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors#ID_Selectors">ID selectors</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Attribute_selectors">Attribute selector</a></td>
- <td><code>a[title] {  }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-class selectors</a></td>
- <td><code>p:first-child { }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-class">Pseudo-classes</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-element selectors</a></td>
- <td><code>p::first-line { }</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseuso-classes_and_Pseudo-elements#What_is_a_pseudo-element">Pseudo-elements</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Descendant_combinator">Descendant combinator</a></td>
- <td><code>article p</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Descendant_Selector">Descendant combinator</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></td>
- <td><code>article &gt; p</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Child_combinator">Child combinator</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/Adjacent_sibling_combinator">Adjacent sibling combinator</a></td>
- <td><code>h1 + p</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#Adjacent_sibling">Adjacent sibling</a></td>
- </tr>
- <tr>
- <td><a href="/en-US/docs/Web/CSS/General_sibling_combinator">General sibling combinator</a></td>
- <td><code>h1 ~ p</code></td>
- <td><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators#General_sibling">General sibling</a></td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
- <ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
- </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
diff --git a/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html b/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
deleted file mode 100644
index 749f576534..0000000000
--- a/files/ar/learn/css/building_blocks/selectors/type_class_and_id_selectors/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: 'Type, class, and ID selectors'
-slug: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
-translation_of: Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors
----
-<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
-
-<p>In this lesson we will take a look at the simplest selectors that are available, which you will probably use the most in your work.</p>
-
-<table class="learn-box standard-table">
- <tbody>
- <tr>
- <th scope="row">Prerequisites:</th>
- <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td>
- </tr>
- <tr>
- <th scope="row">Objective:</th>
- <td>To learn about the different CSS selectors we can use to apply CSS to a document.</td>
- </tr>
- </tbody>
-</table>
-
-<h2 id="Type_selectors">Type selectors</h2>
-
-<p>A <strong>type selector</strong> is sometimes referred to as a <em>tag name selector</em> or <em>element selector</em>, because it selects an HTML tag/element in your document. In the example below we have used the span, em and strong selectors. All instances of <code>&lt;span&gt;</code>, <code>&lt;em&gt;</code> and <code>&lt;strong&gt;</code> elements are therefore styled accordingly.</p>
-
-<p><strong>Try adding a CSS rule to select the <code>&lt;h1&gt;</code> element and change its color to blue.</strong></p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/type.html", '100%', 1100)}}</p>
-
-<h2 id="The_universal_selector">The universal selector</h2>
-
-<p>The universal selector is indicated by an asterisk (<code>*</code>) and selects everything in the document (or inside the parent element if it is being chained together with another element and a descendant combinator). In the following example we have used the universal selector to remove the margins on all elements. This means that instead of the default styling added by the browser, which spaces out headings and paragraphs with margins, everything is close together and we can't see the different paragraphs easily.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/universal.html", '100%', 750)}}</p>
-
-<p>This kind of behavior can sometimes be seen in "reset stylesheets", which strips out all of the browser styling. Since the universal selector makes global changes, we use it to deal with very specific situations such as the one outlined below.</p>
-
-<h3 id="Using_the_universal_selector_to_make_your_selectors_easier_to_read">Using the universal selector to make your selectors easier to read</h3>
-
-<p>One use of the universal selector is to make selectors easier to read and more obvious in terms of what they are doing. For example, if I wanted to select the first child of any descendant element of <code>&lt;article&gt;</code> , no matter what element it was, and make it bold, I could use the {{cssxref(":first-child")}} selector, which we will learn more about in the lesson on <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">pseudo-classes and pseudo-elements</a>, as a descendant selector along with the <code>&lt;article&gt;</code> element selector: </p>
-
-<pre class="brush: css notranslate">article :first-child {
-
-}</pre>
-
-<p>This could be confused however with <code>article:first-child</code>, which will select any <code>&lt;article&gt;</code> element that is the first child of another element.</p>
-
-<p>To avoid this confusion we can add the universal selector to the <code>:first-child</code> selector, so it is obvious what the selector is doing. It is selecting <em>any</em> element which is the first-child of any descendant element of <code>&lt;article&gt;</code>:</p>
-
-<pre class="brush: css notranslate">article *:first-child {
-
-} </pre>
-
-<p>Although both do the same thing, the readability is significantly improved.</p>
-
-<h2 id="Class_selectors">Class selectors</h2>
-
-<p>The class selector starts with a full stop (<code>.</code>) character and will select everything in the document with that class applied to it. In the live example below we have created a class called <code>.highlight</code>, and have applied it to several places in my document. All of the elements that have the class applied are highlighted.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class.html", '100%', 750)}}</p>
-
-<h3 id="Targeting_classes_on_particular_elements">Targeting classes on particular elements</h3>
-
-<p>You can create a selector that will target specific elements with the class applied. In this next example we will highlight a <code>&lt;span&gt;</code> with a class of <code>highlight</code> differently to an <code>&lt;h1&gt;</code> heading with a class of <code>highlight</code>. We do this by using the type selector for the element I want to target, with the class appended using a dot, with no white space in between.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-type.html", '100%', 750)}}</p>
-
-<p>This approach reduces the scope of a rule as the rule will only apply to that particular element  &amp; class combination; so you would need to add another selector if you decided the rule should apply to other elements too.</p>
-
-<h3 id="Target_an_element_if_it_has_more_than_one_class_applied">Target an element if it has more than one class applied</h3>
-
-<p>You can apply multiple classes to an element and target them individually, or only select the element when all of the classes in the selector are present. This can be helpful when building up components that can be combined in different ways on your site.</p>
-
-<p>In the example below we have a <code>&lt;div&gt;</code> that contains a note. The grey border is applied when the box has a class of <code>notebox</code>. If it also has a class of <code>warning</code> or <code>danger</code>, we change the {{cssxref("border-color")}}.</p>
-
-<p>We can tell the browser that we only want to match the element if it has two classes applied by chaining them together with no white space between them. You'll see that the last <code>&lt;div&gt;</code> doesn't get any styling applied, as it only has the <code>danger</code> class; it needs <code>notebox</code> as well to get anything applied.</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/class-many.html", '100%', 900)}}</p>
-
-<h2 id="ID_Selectors">ID Selectors</h2>
-
-<p>An ID selector begins with a <code>#</code> rather than a full stop character, but is basically used in the same way as a class selector. An ID however can be used only once per document. It can select an element that has the <code>id</code> set on it, and you can precede the ID with a type selector to only target the element if both the element and ID match. You can see both of these uses in the following example:</p>
-
-<p>{{EmbedGHLiveSample("css-examples/learn/selectors/id.html", '100%', 750)}}</p>
-
-<div class="blockIndicator note">
-<p><strong>Note</strong>: As we learned in the lesson on specificity, an ID has high specificity and will overrule most other selectors. This can make them difficult to deal with. In most cases it is preferable to add a class to the element rather than use an ID, however if using the ID is the only way to target the element — perhaps because you do not have access to the markup and so cannot edit it — this will work.</p>
-</div>
-
-<h2 id="In_the_next_article">In the next article</h2>
-
-<p>We'll continue exploring selectors by looking at <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">attribute selectors</a>.</p>
-
-<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks/Selectors/Attribute_selectors", "Learn/CSS/Building_blocks")}}</p>
-
-<h2 id="In_this_module">In this module</h2>
-
-<ol>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a>
- <ul>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li>
- </ul>
- </li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li>
- <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li>
-</ol>
diff --git a/files/ar/learn/css/css_layout/index.html b/files/ar/learn/css/css_layout/index.html
deleted file mode 100644
index a0fadc9403..0000000000
--- a/files/ar/learn/css/css_layout/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: تخطيط التصميم في CSS
-slug: Learn/CSS/CSS_layout
-tags:
- - Beginner
- - CSS
- - Floating
- - Grids
- - Guide
- - Landing
- - Layout
- - Learn
- - Module
- - Multiple column
- - NeedsTranslation
- - Positioning
- - TopicStub
- - alignment
- - flexbox
- - float
- - table
-translation_of: Learn/CSS/CSS_layout
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">At this point we've already looked at CSS fundamentals, how to style text, and how to style and manipulate the boxes that your content sits inside. Now it's time to look at how to place your boxes in the right place in relation to the viewport, and one another. We have covered the necessary prerequisites so we can now dive deep into CSS layout, looking at different display settings, modern layout tools like flexbox, CSS grid, and positioning, and some of the legacy techniques you might still want to know about.</p>
-
-<h2 id="Prerequisites">Prerequisites</h2>
-
-<p>Before starting this module, you should already:</p>
-
-<ol>
- <li>Have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
- <li>Be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</li>
- <li>Understand how to <a href="/en-US/docs/Learn/CSS/Styling_boxes">style boxes</a>.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<p>These articles will provide instruction on the fundamental layout tools and techniques available in CSS. At the end of the lessons is an assessment to help you check your understanding of layout methods, by laying out a webpage.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></dt>
- <dd>This article will recap some of the CSS layout features we've already touched upon in previous modules — such as different {{cssxref("display")}} values — and introduce some of the concepts we'll be covering throughout this module.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></dt>
- <dd>Elements on webpages lay themselves out according to <em>normal flow</em> - until we do something to change that. This article explains the basics of normal flow as a grounding for learning how to change it.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></dt>
- <dd><a href="/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_flexbox_to_lay_out_web_applications">Flexbox</a> is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grids</a></dt>
- <dd>CSS Grid Layout is a two-dimensional layout system for the web. It lets you lay content out in rows and columns, and has many feature that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></dt>
- <dd>Originally for floating images inside blocks of text, the {{cssxref("float")}} property became one of the most commonly used tools for creating multiple column layouts on webpages. With the advent of Flexbox and Grid it has now returned to its original purpose, as this article explains.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></dt>
- <dd>Positioning allows you to take elements out of the normal document layout flow, and make them behave differently, for example sitting on top of one another, or always remaining in the same place inside the browser viewport. This article explains the different {{cssxref("position")}} values, and how to use them.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column layout</a></dt>
- <dd>The multiple-column layout specification gives you a method of laying content out in columns, as you might see in a newspaper. This article explains how to use this feature.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy layout methods</a></dt>
- <dd>Grid systems are a very common feature used in CSS layouts, and before CSS Grid Layout they tended to be implemented using floats or other layout features. You imagine your layout as a set number of columns (e.g. 4, 6, or 12), and then fit your content columns inside these imaginary columns. In this article we'll explore how these older methods work, in order that you understand how they were used if you work on an older project.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></dt>
- <dd>
- <p>In this module we recommend using Flexbox and Grid as the main layout methods for your designs. However there will be visitors to your site who use older browsers, or browsers which do not support the methods you have used. This will always be the case on the web — as new features are developed, different browsers will prioritise different things. This article explains how to use modern web techniques without locking out users of older technology.</p>
- </dd>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension</a></dt>
- <dd>An assessment to test your knowledge of different layout methods by laying out a  webpage.</dd>
-</dl>
-
-<h2 id="See_also">See also</h2>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Practical_positioning_examples">Practical positioning examples</a></dt>
- <dd>This article shows how to build some real world examples to illustrate what kinds of things you can do with positioning.</dd>
- <dt></dt>
-</dl>
diff --git a/files/ar/learn/css/first_steps/how_css_is_structured/index.html b/files/ar/learn/css/first_steps/how_css_is_structured/index.html
deleted file mode 100644
index 53b455f460..0000000000
--- a/files/ar/learn/css/first_steps/how_css_is_structured/index.html
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: Readable CSS
-slug: Learn/CSS/First_steps/How_CSS_is_structured
-translation_of: Learn/CSS/Introduction_to_CSS/Syntax#Beyond_syntax_make_CSS_readable
-translation_of_original: Web/Guide/CSS/Getting_started/Readable_CSS
-original_slug: Web/Guide/CSS/Getting_started/Readable_CSS
----
-<p dir="rtl">{{ CSSTutorialTOC() }}</p>
-
-<p dir="rtl">{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Selectors", "Selectors")}}<span class="seoSummary">This is the 6th section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a> tutorial; it discusses the style and grammar of the CSS language itself. You change the way your sample CSS file looks, to make it more readable.</span></p>
-
-<h2 class="clearLeft" dir="rtl" id="معلومة_CSS_مقروء_(قابل_للقراءة_سهل_القراءة)">معلومة: CSS مقروء (قابل للقراءة = سهل القراءة)</h2>
-
-<p dir="rtl">يمكنك إضافة مساحات فارغة وأيضا تعليقات داخل ملف النمط لجعل الشيفرة البرمجية (code) أكثر قابلية وسهولة للقراءة. أيضا يمكنك تجميع العناصر المختلفة معا عندما تتطابق الخصائص بينهم.</p>
-
-<h3 dir="rtl" id="المساحة_الفارغة">المساحة الفارغة</h3>
-
-<p dir="rtl">المساحة الفارغة أوالبيضاء هي عبارة عن مسافات قد تكون مسافة من خطوة واحدة أو من عدة خطوات وقد تكون عبارة عن سطر جديد. يمكنك إضافة المساحات البيضاء إلى ملف النمط الخاص بك لجعله أكثر قابلية وسهولة للقراءة.</p>
-
-<p dir="rtl">في سياق تخطيط وتكوين الصفحة، المساحات الفارغة تكون جزءًا من الصفحة كمسافات بين الأعمدة والسطور أو كهوامش.</p>
-
-<p dir="rtl">يحتوي ملف النمط الخاص بك حاليا على قاعدة واحدة لكل سطر، وعدد أدنى من المساحات الفارغة أو البيضاء. في الأنماط المعقدة سيكون من الصعب قراءة ملف النمط، مما يجعل من الصعب الحفاظ عليها.</p>
-
-<p dir="rtl">التخطيط دائما ما يكون شَخْصِـيًّا، ولكن إذا كان ملف النمط بين مجموعة من الأفراد بصفته جزءً من مشاريع مشتركة، من المحتمل أن تلك المشاريع تحمل اتفاقيات خاصة بها يتم الأعتماد عليها والعمل بها.</p>
-
-<p dir="rtl"> </p>
-
-<div class="tuto_example" dir="rtl">
-<div class="tuto_type">Examples</div>
-
-<p>بعض الأشخاص يفضلون دمج الخصائص مع بعضها، فقط يقومون بتقسيم الخط عندما يصبح طويلا جدا:</p>
-
-<p dir="ltr">.carrot {color: orange; text-decoration: underline; font-style: italic;}</p>
-
-<p><br>
- بعض الناس يفضلون خاصية واحدة لكل سطر:</p>
-
-<pre class="brush: css" dir="rtl">.carrot
-{
-color: orange;
-text-decoration: underline;
-font-style: italic;
-}
-</pre>
-
-<p>بعض الأشخاص يستخدمون مسافتين أو أربع أو علامة التبويب الشائعة:</p>
-
-<pre class="brush: css">.carrot {
- color: orange;
- text-decoration: underline;
- font-style: italic;
-}
-</pre>
-
-<p><br>
- (بعض الأشخاص يفضلون جعل كل شيء عموديا  (ولكن تخطيط مثل هذا من الصعب الحفاظ عليه.</p>
-
-<pre class="brush: css">.carrot
- {
- color : orange;
- text-decoration : underline;
- font-style : italic;
- }
-</pre>
-
-<p>بعض الأشخاص يستخدمون مزيج من المسافات الفارغة أو البيضاء لتعزيز سهولة القراءة.</p>
-
-<pre class="brush: css">.vegetable { color: green; min-height: 5px; min-width: 5px }
-.vegetable.carrot { color: orange; height: 90px; width: 10px }
-.vegetable.spinach { color: darkgreen; height: 30px; width: 30px }
-</pre>
-</div>
-
-<p dir="rtl">بعض الأشخاص يستخدمون علامة التبويب والبعض الآخر يستخدم فقط المسافات البيضاء.</p>
-
-<h3 dir="rtl" id="التعليقات">التعليقات<br>
-  </h3>
-
-<p dir="rtl">التعليقات في ملف النمط تبدأ بـ «*/» وتنتهي بـ«/*».<br>
- <br>
- يمكنك استخدام التعليقات في ملف النمط الخاص بك لكتابة تعليقات وتعليمات، وأيضا لكتابة تعليمات مؤقتة قد يكون الغرض منها هو اختبار العملية.<br>
- <br>
- التعليق في جزء من النمط، ضع هذا الجزء في تعليق بحيث يتجاهله المتصفح عند قراءة الملف، وكن حذرا في بداية ونهاية التعليق. بقية الأنماط والخصائص يجب أن يكون لها البنية الصحيحة.</p>
-
-<div class="tuto_example" dir="rtl">
-<div class="tuto_type">Example</div>
-
-<pre class="brush: css">/* style for initial letter C in first paragraph */
-.carrot {
- color: orange;
- text-decoration: underline;
- font-style: italic;
- }
-</pre>
-</div>
-
-<h3 dir="rtl" id="تجميع_العناصر_عندما_يكون_لمجموعة_من_العناصر_عدد_من_الخصائص_المتشابهة_في_النمط،_يمكنك_تجميع_العناصر_مع_الفصل_بينهم_بعلامة_فاصلة._وتـنطبق_هذة_الخصائص_على_جميع_العناصر_المجمعة.">تجميع العناصر<br>
- <br>
- <span style="font-size: 14px;">عندما يكون لمجموعة من العناصر عدد من الخصائص المتشابهة في النمط، يمكنك تجميع العناصر مع الفصل بينهم بعلامة فاصلة. وتـنطبق هذة الخصائص على جميع العناصر المجمعة.</span><br>
-  </h3>
-
-<p dir="rtl">في أماكن أخرى من ملف النمط يمكنك أيضا تجميع عدد من العناصر ولكن فرديا، وتطبيق خصائص فردية عليهم.</p>
-
-<div class="tuto_example" dir="rtl">
-<div class="tuto_type">Example</div>
-
-<p>This rule makes {{ HTMLElement("h1") }}, {{ HTMLElement("h2") }}, and {{ HTMLElement("h3") }} elements the same color.</p>
-
-<p>إنها مناسبة لتحديد اللون لمجموعة من العناصر في مكان واحد، في حالة لابد من تغييرها.</p>
-
-<pre class="brush: css">/* color for headings */
-h1, h2, h3 {color: navy;}
-</pre>
-</div>
-
-<h2 dir="rtl" id="العمل_إضافة_تعليقات_و_تحسين_التخطيط">العمل: إضافة تعليقات و تحسين التخطيط</h2>
-
-<ol dir="rtl">
- <li>قم بتعديل ملف النمط الخاص بك، وقم بالتأكد أن لديها هذه القواعد في ذلك (في أي أمر):
- <pre class="brush: css">strong {color: red;}
-.carrot {color: orange;}
-.spinach {color: green;}
-#first {font-style: italic;}
-p {color: blue;}
-</pre>
- </li>
- <li>جعلها أكثر قابلية للقراءة من خلال إعادة ترتيبها بطريقة منطقية، وذلك من خلال إضافة مساحات بيضاء أو فارغة وأيضا تعليقات مناسبة.</li>
- <li>قم بحفظ التعديلات واذهب إلى المتصفح لتشاهد الصفحة للتَّـأكد أنه لا يوجد أي تأثير على ملف النمط من خلال عمله.
- <table style="border: 2px outset #3366bb; padding: 1em;">
- <tbody>
- <tr>
- <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
- </tr>
- </tbody>
- </table>
- </li>
-</ol>
-
-<div class="tuto_details" dir="rtl">
-<div class="tuto_type">تحدي</div>
-
-<div class="tuto_type"> </div>
-
-<p class="tuto_type">ضع تعليقا يوجد به جزء من ملف النمط الخاص بك، بدون  تغيير أي شيء آخر ، لعمل أول حرف من الوثيقة أحمر اللون.</p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
- <tbody>
- <tr>
- <td style="font-style: italic; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
- </tr>
- <tr>
- <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
- </tr>
- </tbody>
-</table>
-
-<p>(هناك العديد من الطرق لفعل ذلك)</p>
-
-<div class="tuto_details" id="tutochallenge">
-<div class="tuto_type">Possible solution</div>
-
-<p>One way to do this is to put comment delimiters around the rule for <code>.carrot</code>:</p>
-
-<pre class="brush: css">/*.carrot {
- color: orange;
-}*/</pre>
-
-<p><a class="hideAnswer" href="#challenge">Hide solution</a></p>
-</div>
-
-<p><a href="#tutochallenge" title="Display a possible solution for the challenge">See a solution for the challenge.</a></p>
-</div>
-
-<h2 dir="rtl" id="ما_التالي؟">ما التالي؟</h2>
-
-<h2 dir="rtl" id="nextPage(en-USdocsWebGuideCSSGetting_StartedText_styles_Text_styles)_Your_sample_stylesheet_has_used_italic_text_and_underlined_text._The_next_page_describes_more_ways_to_specify_the_appearance_of_text_in_your_document.">{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles", "Text styles") }}Your sample stylesheet has used italic text and underlined text. The next page describes more ways to <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles" style="font-size: 14px; font-weight: normal;" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Text_styles">specify the appearance of text</a><span style="color: #3b3c40; font-size: 14px; font-weight: normal;"> in your document</span><strong style="color: #3b3c40; font-size: 14px;">.</strong></h2>
diff --git a/files/ar/learn/css/first_steps/index.html b/files/ar/learn/css/first_steps/index.html
deleted file mode 100644
index 34b8e9fefb..0000000000
--- a/files/ar/learn/css/first_steps/index.html
+++ /dev/null
@@ -1,46 +0,0 @@
----
-title: CSS first steps
-slug: Learn/CSS/First_steps
-translation_of: Learn/CSS/First_steps
----
-<div>{{LearnSidebar}}</div>
-
-<p class="summary">CSS (Cascading Style Sheets) is used to style and lay out web pages — for example, to alter the font, color, size, and spacing of your content, split it into multiple columns, or add animations and other decorative features. This module provides a gentle beginning to your path towards CSS mastery with the basics of how it works, what the syntax looks like, and how you can start using it to add styling to HTML.</p>
-
-<h2 id="Prerequisites">Prerequisites</h2>
-
-<p>Before starting this module, you should have:</p>
-
-<ol>
- <li>Basic familiarity with using computers, and using the Web passively (i.e. looking at it, consuming the content.)</li>
- <li>A basic work environment set up as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Installing basic software</a>, and an understanding of how to create and manage files, as detailed in <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Dealing with files</a>.</li>
- <li>Basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module.</li>
-</ol>
-
-<div class="note">
-<p><strong>Note</strong>: If you are working on a computer/tablet/other device where you don't have the ability to create your own files, you could try out (most of) the code examples in an online coding program such as <a href="http://jsbin.com/">JSBin</a> or <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
-</div>
-
-<h2 id="Guides">Guides</h2>
-
-<p>This module contains the following articles, which will take you through all the basic theory of CSS, and provide opportunities for you to test out some skills.</p>
-
-<dl>
- <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">What is CSS?</a></dt>
- <dd><strong>{{Glossary("CSS")}}</strong> (Cascading Style Sheets) allows you to create great-looking web pages, but how does it work under the hood? This article explains what CSS is, with a simple syntax example, and also covers some key terms about the language.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Getting started with CSS</a></dt>
- <dd>In this article we will take a simple HTML document and apply CSS to it, learning some practical things about the language along the way.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">How CSS is structured</a></dt>
- <dd>Now that you have an idea about what CSS is and the basics of using it, it is time to look a little deeper into the structure of the language itself. We have already met many of the concepts discussed here; you can return to this one to recap if you find any later concepts confusing.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">How CSS works</a></dt>
- <dd>We have learned the basics of CSS, what it is for and how to write simple stylesheets. In this lesson we will take a look at how a browser takes CSS and HTML and turns that into a webpage.</dd>
- <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Using your new knowledge</a></dt>
- <dd>With the things you have learned in the last few lessons you should find that you can format simple text documents using CSS, to add your own style to them. This article gives you a chance to do that.</dd>
-</dl>
-
-<h2 id="See_also">See also</h2>
-
-<dl>
- <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Intermediate Web Literacy 1: Intro to CSS</a></dt>
- <dd>An excellent Mozilla foundation course that explores and tests a lot of the skills talked about in the <em>Introduction to CSS</em> module. Learn about styling HTML elements on a webpage, CSS selectors, attributes, and values.</dd>
-</dl>
diff --git a/files/ar/learn/css/index.html b/files/ar/learn/css/index.html
deleted file mode 100644
index 3a56c01335..0000000000
--- a/files/ar/learn/css/index.html
+++ /dev/null
@@ -1,63 +0,0 @@
----
-title: CSS
-slug: Learn/CSS
-tags:
- - Beginner
- - CSS
- - CodingScripting
- - Debugging
- - Landing
- - NeedsContent
- - NeedsTranslation
- - Topic
- - TopicStub
- - length
- - specificity
-translation_of: Learn/CSS
----
-<p class="summary" dir="rtl">الترجمة الحرفية للـ {{glossary("CSS")}} لن تفيدك كثيراً ولكن من باب العلم بها فمعناها (أوراق النمط المتعاقب)، لكن دعنا نتعرف أكثر ما هي الـ CSS وما الذي تقوم به، هي التقنية الأولى من تقنيات الويب التي يجب أن تبدأ بها رحلتك في تعلم تطوير الويب، في حين تقوم بإستخدام الـ HTML في إنشاء العناصر الأساسية للصفحة (هيكلة صفحة الويب)، تقوم بإستخدام الـ CSS في إضفاء الشكل الجمالي لصفحات الويب من خلال إضافة الألوان والمساحات وأماكن العناصر المختلفة، أو إضافة تأثيرات الحركة على بعض العناصر في صفحة الويب.</p>
-
-<h2 dir="rtl" id="مسار_التعلم_المتبع">مسار التعلم المتبع</h2>
-
-<p dir="rtl">يجب عليك تعلم اساسيات HTML أولاً قبل الشروع في تعلم الـ CSS، فكيف تقوم بإضافة الجماليات على صفحة ويب لم يتم إنشاءها بعد؟ لذلك ننصحك بتعمل أساسيات الـ HTML من هنا <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ HTML</a> بعد ذلك يمكنك تعلم:</p>
-
-<ul dir="rtl">
- <li>تبدأ بتعلم <a href="/ar/docs/Learn/HTML/Introduction_to_HTML">مقدمة في الـ CSS</a></li>
- <li><a href="/ar/Learn/HTML#Modules">نماذج الـ HTML الأكثر تقدماً</a></li>
- <li><a href="/ar/docs/Learn/JavaScript">جافاسكربت</a>، وكيف تقوم بإستخدامها في إضافة وظائف ديناميكية لصفحات الويب.</li>
-</ul>
-
-<p dir="rtl">مباشرةً عندما تجد نفسك مستوعباً لأساسيات الـ HTML, ننصحك بتعلم الـ HTML والـ CSS بشكل متزامن (في نفس الوقت) لانك غالباً ستحتاج إلى تطوير نفسك في كليهما بشكل مستمر. وأيضاً لان الـ HTML شيقة في التعلم لسهولة تطبيقها خلال رحلة تعلمك، وستجد أنك تستوعبها سريعاً، وستجد أيضاً انها اكثر متعه عندما تقوم بتطبيق ما تعلمته من الـ CSS. وتذكر دائماً انك لن تستطيع تعلم الـ CSS بدون معرفة الـ HTML.</p>
-
-<p dir="rtl">قبل البداية في تعمل هذه التقنية، لابد من تعلم أساسيات التعامل مع الحاسب وإستخدام الويب، أيضاً لابد من تهيئة بيئة العمل التي تحتاجها لإنشاء صفحات الويب كما تم شرحها في<a href="/ar/docs/Learn/Getting_started_with_the_web/Installing_basic_software"> تنصيب البرامج المستخدمة في بيئة العمل</a>، وكيفية إنشاء وإدارة الملفات كما تم شرحنا في<a href="/ar/docs/Learn/Getting_started_with_the_web/Dealing_with_files"> التعامل مع الملفات</a>، هذين المقالين أجزاء من ملف شرح<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> للمبتدئين.</p>
-
-<p dir="rtl">وننصحك أيضاً أن تقوم بتعلم<a href="/ar/docs/Learn/Getting_started_with_the_web"> البداية في تعلم الويب</a> قبل الشروع في هذا المقال، على كل حال هذا ليس ضرورياً للغاية، كثيرا مما تم شرحه في أساسيات CSS تم شرحه أيضاً في مقدمة CSS ولكن بشكل أكثر تفصيلاً.</p>
-
-<h2 dir="rtl" id="العناصر">العناصر</h2>
-
-<p dir="rtl">هذا الموضوع يحتوى على العناصر التالية، نقترح عليك أن تبدأ في تعلمهم بهذا الترتيب، ويجب عليك بشكل مؤكد أن تبدأ بالعنصر الأول لأهميته.</p>
-
-<dl>
- <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Introduction_to_CSS">مقدمة في CSS</a></dt>
- <dd dir="rtl">في هذا الجزء سنبدأ في تعلم أساسيات كيفية عمل الـ CSS وسنقوم بشرح المحددات (Selectors) والخصائص (Properties) وكيفية كتاب قواعد الـ CSS وكيفية تطبيق CSS على عناصر HTML، كيف تحدد الطول واللون والوحدات الأخرى في CSS وسنقوم أيضاً بشرح وراثة القيم وأساسيات العناصر الأساسية في الصفحة (Box Model) وكيفية معالجة الأخطاء في CSS.</dd>
- <dt dir="rtl"><a href="/ar/docs/Learn/CSS/Styling_text">تنسيق/شكل الخطوط</a></dt>
- <dd dir="rtl">هنا ، ننظر إلى أساسيات تصميم النصوص ، بما في ذلك ضبط الخط ، السماكة ، والميول ; الخط والمسافات بين الحروف </dd>
- <dd dir="rtl">هنا نلقي نظرة على أساسيات تصميم النص ، بما في ذلك تعيين الخط والخط الجريء والخط المائل وتباعد الأسطر والحروف والظلال المسقطة وميزات النص الأخرى. ننهي الوحدة من خلال النظر في تطبيق الخطوط المخصصة على صفحتك وقوائم التصميم والروابط.</dd>
- <dt dir="rtl"><a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a></dt>
- <dd dir="rtl">بعد ذلك ، نلقي نظرة على مربعات التصميم ، وهي إحدى الخطوات الأساسية نحو تخطيط صفحة الويب. في هذه الوحدة ، نلخص نموذج الصندوق ثم ننظر إلى التحكم في تخطيطات الصندوق عن طريق تعيين المساحة المتروكة والحدود والهوامش ، وتعيين ألوان خلفية مخصصة وصور وميزات أخرى ، وميزات فاخرة مثل الظلال المسقطة والمرشحات على الصناديق.</dd>
- <dt dir="rtl"><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS layout</a></dt>
- <dd dir="rtl">في هذه المرحلة ، اطلعنا بالفعل على أساسيات CSS ، وكيفية تصميم النص ، وكيفية تصميم ومعالجة المربعات الموجودة في المحتوى الخاص بك. حان الوقت الآن للنظر في كيفية وضع مربعاتك في المكان المناسب بالنسبة إلى إطار العرض ، وبعضها البعض. لقد قمنا بتغطية المتطلبات الأساسية اللازمة حتى تتمكن الآن من التعمق في تخطيط CSS ، والنظر في إعدادات العرض المختلفة ، وطرق التخطيط التقليدية التي تتضمن العوامة وتحديد المواقع ، وأدوات التخطيط الجديدة المتشعبة مثل flexbox.</dd>
- <dt dir="rtl">Responsive design (TBD)</dt>
- <dd dir="rtl">مع وجود العديد من الأنواع المختلفة من الأجهزة التي يمكنها تصفح الويب هذه الأيام ،<a href="/en-US/docs/Web/Guide/Responsive_design">responsive web design</a> (RWD) أصبحت مهارة تطوير الويب الأساسية. ستغطي هذه الوحدة المبادئ والأدوات الأساسية لـ RWD ، وتشرح كيفية تطبيق CSS مختلفة على مستند اعتمادًا على ميزات الجهاز مثل عرض الشاشة ، والتوجيه ، والدقة ، واستكشاف التقنيات المتاحة لتقديم الفيديو والصور المختلفة اعتمادًا على هذه الميزات.</dd>
-</dl>
-
-<h2 dir="rtl" id="Solving_common_CSS_problems">Solving common CSS problems</h2>
-
-<p dir="rtl"><a href="/en-US/docs/Learn/CSS/Howto">Use CSS to solve common problems</a> provides links to sections of content explaining how to use CSS to solve very common problems when creating a webpage.</p>
-
-<h2 dir="rtl" id="See_also">See also</h2>
-
-<dl>
- <dt dir="rtl"><a href="/en-US/docs/Web/CSS">CSS on MDN</a></dt>
- <dd dir="rtl">The main entry point for CSS documentation on MDN, where you'll find detailed reference documentation for all features of the CSS language. Want to know all the values a property can take? This is a good place to go.</dd>
-</dl>
diff --git a/files/ar/learn/css/styling_text/styling_lists/index.html b/files/ar/learn/css/styling_text/styling_lists/index.html
deleted file mode 100644
index aedafbd023..0000000000
--- a/files/ar/learn/css/styling_text/styling_lists/index.html
+++ /dev/null
@@ -1,385 +0,0 @@
----
-title: القوائم
-slug: Learn/CSS/Styling_text/Styling_lists
-translation_of: Learn/CSS/Styling_text/Styling_lists
-translation_of_original: Web/Guide/CSS/Getting_started/Lists
-original_slug: Web/Guide/CSS/Getting_started/القوائم
----
-<p>{{ CSSTutorialTOC() }}</p>
-
-<p dir="rtl"> الصفحة السابقة هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Content", "Content") أما هذا الجزء فهو العاشِر في سلسلة  تعليم لغة CSS على هذا الموقع  <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>، وهو يصف كيف يُمكن استخدام لغة الـCSS لتحديد مظهر القائمة. ستقوم بإنشاء مثال مستند يحتوي على قائمة بالـHTML  وملف تنسيق بلغة الـCSS والذي من خلاله سوف نقوم بتنسيق القائمة التي قمنا بإنشَائها. </p>
-
-<h2 class="clearLeft" dir="rtl" id="معلومات_عن_القوائم">معلومات عن القوائم </h2>
-
-<p dir="rtl">لو نظرت إلى الجزء السابق، سوف يتضح لك  كيف يمكن إضافة محتـوًى قبل أي عنصر بحيث يظهر وكأنّه عنصرٌ في قائمة.</p>
-
-<p dir="rtl">تقدم لغة الـCSS بعض الخواص المُصَمَّـمَـة للقائمة، والتي يجب استخدامها دائما مع القوائم.</p>
-
-<p dir="rtl">لتحديد نمط القائمة، عليك استخدام هذه الخاصية «<strong>list-style</strong>» وذلك لتحديد نوع  العلامة الموجودة قبل كل عنصر في القائمة. </p>
-
-<div class="note" dir="rtl">
-<p>من الممكن أن يتم اختيار القائمة ككل بهذا الوسم «<em>ul</em>» أو اختيار عنصر بداخل القائمة من خلال هذا الوسم «<em>li</em>».  </p>
-
-<p>وعند اختيار القائمة ككل فإنَّ هذا الوسم يسمى الأب للقائمة وهو«<em>ul</em>»، ويورث الخواص التى تٌطبق عليه لكُـلِّ عنصر في القائمة. </p>
-</div>
-
-<h3 dir="rtl" id="القوائم_غير_المرتبة">القوائم غير المرتبة</h3>
-
-<p dir="rtl"> في القوائم غير المُرَتَّـبة، يكون كل عنصر من القائمة معَلَّــمًا بنفس الطريقة. </p>
-
-<p dir="rtl"> يوجد ثلاثة أنواع من العلامات، وأدناه هي كيفية عرض المتصفح لهذه العلامات:</p>
-
-<p dir="rtl">• disc  قرص </p>
-
-<p dir="rtl">○ circle دائرة</p>
-
-<p dir="rtl">◘ square مربع</p>
-
-<p dir="rtl">بدلا من ذلك، يمكن تحديد رابط صورة لاستخدامها كعلامة للعناصر بدل من العلامات السابقة.</p>
-
-<div class="tuto_example">
-<h3 dir="rtl" id="مثال">مثال </h3>
-
-<p dir="rtl"> هذه القواعد تُـوَضِّح علامات مختلفة لأصناف (classes) مختلفة من عناصر القائمة:</p>
-
-<pre class="brush:css" dir="rtl">li.open {
-  list-style: circle;
-}
-li.closed {
-  list-style: disc;
-}
-</pre>
-
-<p dir="rtl">عندما يتم استعمال هذه الأصناف (classes) في قائمة، تقوم بالتمييز بين العناصر المفتوحة والمغلقة (مثلًا في قائمة مهامّ).</p>
-
-<pre class="brush: html" dir="rtl">&lt;ul&gt;
- &lt;li class="open"&gt;Lorem ipsum&lt;/li&gt;
- &lt;li class="closed"&gt;Dolor sit&lt;/li&gt;
- &lt;li class="closed"&gt;Amet consectetuer&lt;/li&gt;
- &lt;li class="open"&gt;Magna aliquam&lt;/li&gt;
- &lt;li class="closed"&gt;Autem veleum&lt;/li&gt;
-&lt;/ul&gt;
-</pre>
-
-<p dir="rtl">وهكذا تبدو النتيجة: </p>
-
-<div class="syntaxbox">  ○ Lorem ipsum</div>
-
-<div class="syntaxbox">  •  Dolor sit</div>
-
-<div class="syntaxbox">  •  Amet consectetuer</div>
-
-<div class="syntaxbox">  ○ Magna aliquam</div>
-
-<div class="syntaxbox">  • Autem veleum</div>
-
-<div class="syntaxbox"> </div>
-</div>
-
-<h3 dir="rtl" id="القوائم_المُـرَتَّـبة">القوائم المُـرَتَّـبة </h3>
-
-<p dir="rtl">في القوائم المُرتّبة، يكون لكل عنصر علامة مختلفة تُميّز موضعه في القائمة.</p>
-
-<p dir="rtl">استخدم الخاصية «list-style» لتعيين نمط القائمة، لتحديد نوع العلامة التي تظهر قبل كل عنصرفي القائمة.</p>
-
-<ul style="padding-left: 2em;">
- <li style=""><code>decimal (تعداد بأرقام عشرية)</code></li>
- <li style=""><code>lower-roman (تعداد بحروف رومانية صغيرة)</code></li>
- <li style=""><code>upper-roman (تعداد بحروف رومانية كبيرة)</code></li>
- <li style=""><code>lower-latin (تعداد بحروف لاتيتنية صغيرة)</code></li>
- <li style=""><code>upper-latin (تعداد بحروف لاتينية كبيرة)</code></li>
-</ul>
-
-<div class="tuto_example">
-<div class="tuto_type" dir="rtl"> </div>
-
-<h4 class="tuto_type" dir="rtl" id="مثال_2">مثال                                                                                                                                              </h4>
-
-<div class="tuto_type" dir="rtl">القاعدة التّالية تجعل العناصر في القائمة المرتّبة &lt;ol&gt; والتي تٌميز بصنف .«info» مُرتبة بحروف لاتينية كبيرة.  </div>
-
-<div class="tuto_type" dir="rtl"> </div>
-
-<pre class="brush: html">&lt;ol class="info"&gt;
-  &lt;li&gt;Lorem ipsum&lt;/li&gt;
-  &lt;li&gt;Dolor sit&lt;/li&gt;
-  &lt;li&gt;Amet consectetuer&lt;/li&gt;
-  &lt;li&gt;Magna aliquam&lt;/li&gt;
-  &lt;li&gt;Autem veleum&lt;/li&gt;
-&lt;/ol&gt;</pre>
-
-<pre class="brush:css">ol.info {
-  list-style: upper-latin;
-}
-</pre>
-
-<div class="note" dir="rtl">
-<p>عند تطبيق خاصية النمط على الـ «<em>ol</em>»  يُوَرِّثُ هذه الخاصية إلى الأبناء وهم عناصر القائمة المرتبة وهي العناصر المسبوقة بوسم «<em>li</em>».</p>
-</div>
-
-<p dir="rtl">فتكون النتيجة كالتالي:</p>
-
-<div class="syntaxbox">ِA. Lorem ipsum</div>
-
-<div class="syntaxbox">B. Dolor sit</div>
-
-<div class="syntaxbox">C. Amet consectetuer</div>
-
-<div class="syntaxbox">D. Magna aliquam</div>
-
-<div class="syntaxbox">E. Autem veleum</div>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type">
-<h3 dir="rtl" id="تفاصيل_أكثر">تفاصيل أكثر                                                                             </h3>
-
-<div class="syntaxbox" dir="rtl">الخاصية «list-style» هي خاصية مختصرة أي أنه من الممكن استخدامها إذا أردت أن يكون نمط القائمة سواء كان </div>
-
-<div class="syntaxbox" dir="rtl"> (صورة أو رقم أو شكل أو حرف )</div>
-
-<div class="syntaxbox" dir="rtl">       ولكن يمكن أن تستخدم خواص منفردة لكل شكل على حدة وليكن للصورة لها  خاصية محددة مثل «list-style-image»    </div>
-
-<p dir="rtl">يمكنك مراجعة هذه الخاصية وما بها من تفاصيل من خلال هذه الصفحة  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/list-style">list style</a> </p>
-
-<div class="syntaxbox" dir="rtl">إن كنت تستخدم لغة HTML فإنها تُـوفر وسوما مُختلفة، فعلى سبيل المثال  للقوائم المرتبة يُستخدم هذا الوسم «ol»</div>
-
-<div class="syntaxbox" dir="rtl">والقوائم  الغير مرتبة «ul»</div>
-
-<div class="syntaxbox" dir="rtl">  فيفضّل استخدام هذه القوائم بحسب دلالتها ولكن من الممكن إذا أردت أن تجعل القوائم المرتبة كغير المرتبة شكلا </div>
-
-<div class="syntaxbox" dir="rtl">والعكس، فذلك يتم من خلال الـCSS أيضا يتم كل هذا باستخدام الخواص المختلفة لتحصل على ما تريد من نتائج </div>
-
-<div class="syntaxbox" dir="rtl">ولكن يُفَضَّـل أن تُسْتَخدم كل قائمة حسب وضعها والاستخدام الخاص بها. </div>
-
-<div class="syntaxbox" dir="rtl"> </div>
-
-<p dir="rtl">قد تختلف المتصفّحات في طرق عرضها لتنسيق القوائم، لا يُمكن أن تحصُل على نفس النتيجة في كل المتصفحات. </p>
-</div>
-</div>
-
-<h3 dir="rtl" id="العَـدَّادَات">العَـدَّادَات</h3>
-
-<div dir="rtl" style="border: 1px solid red; padding: 6px; margin: 0px -6px 0.5em 0px; width: 100%;">
-<p><strong>ملاحظة هامّة</strong>:</p>
-
-<div class="syntaxbox">  بعض المتصفحات لا تدعم العدّادات، تقدّم هذه الصّفحة <a href="http://www.quirksmode.org/css/contents.html">CSS contents and browser comptability</a> على موقع <a href="http://www.quirksmode.org/">QuirksMode</a> معلومات تفصيلية عن دعم  المتصفحات لهذه الميزة وميزات أخرى.</div>
-
-<div class="syntaxbox">كما توفّر الصّفحات الفرديّة في <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference" rel="external noopener noreferrer">CSS</a> مرجعا للمعلومات عن دعم  المتصفحات أيضا لهذه الخاصية وغيرها.</div>
-</div>
-
-<p> </p>
-
-<div class="syntaxbox" dir="rtl">يُمكن استخدام العدّادات لعدّ أيّة عناصر، وليس فقط عناصر القوائم، فمثلًا يمكن عدّ العناوين والفقرات في المستند.</div>
-
-<div class="syntaxbox" dir="rtl">تحتاج إلى إنشاء عدّاد counter باسم خاص بك لتستخدمه فى العّد.</div>
-
-<div class="syntaxbox" dir="rtl"> </div>
-
-<div class="syntaxbox" dir="rtl"> يمكن تهيئة العدّاد قبل البدء بالعدّ باستخدام الخاصية «counter-reset» واسم العدادَ الخاص بك الذي أنشأته. </div>
-
-<div class="syntaxbox" dir="rtl">وعليك أن تعلم أن الأب للعنصر الذي تقوم بِعده هو المكان الأنسب لتهيئة العّداد، ولكن يمكن استخدام أي عنصر يأتي قبل العناصر المطلوب عدّها.</div>
-
-<div class="syntaxbox"> </div>
-
-<div class="syntaxbox" dir="rtl"> في كلّ عنصر ترغب بعدّه، استخدم الخاصية «counter-increment» مع اسم العّداد الذي تٌريده.</div>
-
-<div class="syntaxbox" dir="rtl"> استخدم «befor» ،«:after:» لعرض العدّاد، مع استخدام هذه الخاصية «content» مع العنصر المٌحدد المُراد عّده (سيتم شرح ذلك لاحقاَ).</div>
-
-<div class="syntaxbox" dir="rtl">يمكنك معرفة معلومات أكثر عن هذه الخاصية في هذه الصفحة <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started/Content">Content</a>. </div>
-
-<div class="syntaxbox"> </div>
-
-<h4 class="syntaxbox" dir="rtl" id="استخدام_()counter_مع_اسم_العّداد_كقيمة_لـcontent">استخدام ()counter مع اسم العّداد كقيمة لـcontent   </h4>
-
-<div class="syntaxbox" dir="rtl">ويمكن كذلك استخدام نوع للعلامة فى العد. الأنواع المُتاحة هي التي تم عرضها في فقرة القوائم المرتّبة.</div>
-
-<p dir="rtl">عادةً يزيد العنصر الّذي يعرض العدّاد من قيمته. </p>
-
-<div class="tuto_example">
-<div class="tuto_type" dir="rtl">          مثال                                                                                                                                            </div>
-
-<div class="tuto_type" dir="rtl"> </div>
-
-<div class="tuto_type" dir="rtl">    هذه القاعدة تُنشئ عدّادًا لكلّ عنصر&lt;h3&gt; له تصنيف (كلاس) «numbered»:                                          </div>
-
-<pre class="brush:css">h3.numbered {
-  counter-reset: mynum;
-}
-</pre>
-
-<p dir="rtl"> أما هذه القاعدة فهى تعرض عّداد الـ &lt;p&gt;  والتي لها تصنيف «numbered»</p>
-
-<pre class="brush: html">&lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
-&lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
-&lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
-&lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
-&lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
-</pre>
-
-<pre class="brush:css">body {
- counter-reset: mynum;
-}
-p.numbered:before {
- content: counter(mynum) ": ";
- counter-increment: mynum;
- font-weight: bold;
-}
-</pre>
-
-<p dir="rtl">والنتيجة ستبدُو هكذا:</p>
-
-<div class="syntaxbox"><strong>1:</strong> Lorem ipsum</div>
-
-<div class="syntaxbox"><strong>2:</strong> Dolor sit</div>
-
-<div class="syntaxbox"><strong>3:</strong> Amet consectetuer</div>
-
-<div class="syntaxbox"><strong>4:</strong> Magna aliquam</div>
-
-<div class="syntaxbox"><strong>5:</strong>  Autem veleum</div>
-
-<div class="syntaxbox"> </div>
-</div>
-
-<div class="tuto_details">
-<div class="tuto_type" dir="rtl">تفاصِيل أكثر                                                                                                                                 </div>
-
-<div class="syntaxbox" dir="rtl"> </div>
-
-<div class="syntaxbox" dir="rtl">   لا تستطيع استخدام العَدادات إلا إذا تيقنت من أنَ كل شخص يستخدم العدادات يستعمل  متصفحاً يُدعمها.  </div>
-
-<div class="syntaxbox" dir="rtl">  العًدادات بها مِيزات ويمكن تنسيقها منفصلة عن عنصر القَائمة المرافِقة لها كما في المثال السابق </div>
-
-<div class="syntaxbox" dir="rtl">ترى أن العًدادات لها تنسيق خاص فهي بِخط عريض غير عناصر القّائمة.  </div>
-
-<div class="syntaxbox" dir="rtl"> </div>
-
-<div class="syntaxbox" dir="rtl">يمكن أيضًا استخدام العدّادات بطرق أكثر تعقيدًا؛ مثلًا: لعدّ الفقرات والعناوين والعناوين الفرعيّة والفقرات في المستندات الرسمية.</div>
-
-<div class="syntaxbox" dir="rtl"> ولتفاصِيل أكثر عليك الرجوع إلى هذِه الصفحة  <a class="external" href="http://www.w3.org/TR/CSS21/generate.html#counters">Automatic counters and numbering</a>.</div>
-</div>
-
-<h2 dir="rtl" id="تمرين_قوائم_مُنسقة">تمرين: قوائم مُنسقة</h2>
-
-<p dir="rtl">   قم بإنشاء ملف  HTML  باسم doc2.html، انسخ والصق هذا المحتوى إلى الملف الخاص بك:</p>
-
-<pre class="brush:html;">&lt;!DOCTYPE html&gt;
-&lt;html&gt;
- &lt;head&gt;
- &lt;meta charset="UTF-8"&gt;
- &lt;title&gt;Sample document 2&lt;/title&gt;
- &lt;link rel="stylesheet" href="style2.css"&gt;
- &lt;/head&gt;
- &lt;body&gt;
-
- &lt;h3 id="oceans"&gt;The oceans&lt;/h3&gt;
- &lt;ul&gt;
- &lt;li&gt;Arctic&lt;/li&gt;
- &lt;li&gt;Atlantic&lt;/li&gt;
- &lt;li&gt;Pacific&lt;/li&gt;
- &lt;li&gt;Indian&lt;/li&gt;
- &lt;li&gt;Southern&lt;/li&gt;
- &lt;/ul&gt;
-
- &lt;h3 class="numbered"&gt;Numbered paragraphs&lt;/h3&gt;
- &lt;p class="numbered"&gt;Lorem ipsum&lt;/p&gt;
- &lt;p class="numbered"&gt;Dolor sit&lt;/p&gt;
- &lt;p class="numbered"&gt;Amet consectetuer&lt;/p&gt;
- &lt;p class="numbered"&gt;Magna aliquam&lt;/p&gt;
- &lt;p class="numbered"&gt;Autem veleum&lt;/p&gt;
-
- &lt;/body&gt;
-&lt;/html&gt;
-</pre>
-
-<p dir="rtl">  قم بإنشاء ملف CSS وقُم بتسميته  style2.css، انسخ والصق هذه الشيفرة البرمجية إلى صفحتك:</p>
-
-<pre class="brush:css;">/* numbered paragraphs */
-h3.numbered {counter-reset: mynum;}
-
-p.numbered:before {
- content: counter(mynum) ": ";
- counter-increment: mynum;
- font-weight: bold;
-}
-</pre>
-
-<p dir="rtl">قم بتغيير أسلوب  التعليقات كما تحبّ إن لم يعجبك هذا.</p>
-
-<p dir="rtl">افتح الملف على المٌتصفح الخاص بِك. إذا كان متصفحط يَدعم العّدادات سوف ترى النتيجة كما هي موضحة أدناه، وإن لم يكُن يُدعمها فلن ترى إلاَّ الأرقام والنُقتطان قبل القائمة التي هي بعنوان «Numbered paragraphs» :</p>
-
-<h3 id="The_oceans">The oceans</h3>
-
-<div class="syntaxbox">Arctic</div>
-
-<div class="syntaxbox">Atlantic</div>
-
-<div class="syntaxbox">Pacific</div>
-
-<div class="syntaxbox">Indian</div>
-
-<div class="syntaxbox">Southern</div>
-
-<h3 id="Numbered_paragraphs">Numbered paragraphs</h3>
-
-<div class="syntaxbox"><strong>1:</strong>Lorem ipsum</div>
-
-<div class="syntaxbox"><strong>2:</strong>Dolor sit</div>
-
-<div class="syntaxbox"><strong>3:</strong>Amet consectetuer</div>
-
-<div class="syntaxbox"><strong>4:</strong>Magna aliquam</div>
-
-<div class="syntaxbox"><strong>5:</strong>Autem veleum</div>
-
-<div class="tuto_example">
-<div class="tuto_type" dir="rtl"> تمرين إضافي                                                                                                                                          </div>
-
-<div class="syntaxbox" dir="rtl"> أضِف قاعدة لملف التنسيق الخاص بك بحيث تجعل النمط قبل عناصِر القائِمة بحروف رومانية من i إلى v، بحيث تحصل على هذه النتيجة: </div>
-
-<div class="syntaxbox" dir="rtl"> </div>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
- <tbody>
- <tr>
- <td>
- <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">The oceans</p>
-
- <ul style="">
- <li>Arctic</li>
- <li>Atlantic</li>
- <li>Pacific</li>
- <li>Indian</li>
- <li>Southern</li>
- </ul>
- </td>
- </tr>
- </tbody>
-</table>
-
-<p dir="rtl">وقم بتغييرها مرة أُخرى إلى حروف لاتينية كبيرة قبل عناصرالقائمة، وستكون النتيجة هكذا: </p>
-
-<table style="background-color: white; border: 2px outset #3366bb; padding: 0 6em 1em 1em;">
- <tbody>
- <tr>
- <td>
- <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(A) The oceans</p>
-
- <p><strong>. . .</strong></p>
-
- <p style="font-weight: bold; font-size: 133%; margin-bottom: .3em; padding-top: .4em; padding-bottom: .16em;">(B) Numbered paragraphs</p>
-
- <p><strong>. . .</strong></p>
- </td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p><a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Challenge_solutions#Lists" title="en-US/docs/Web/Guide/CSS/Getting started/Challenge solutions#Lists">See solutions to these challenges.</a></p>
-
-<h2 dir="rtl" id="ما_هو_القادم_؟">ما هو القادم ؟</h2>
-
-<p dir="rtl">الصفحة القادمو هي ("/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes", "Boxes")</p>
-
-<p dir="rtl">عندما يعرض المتصفّح مستند الخاص بك، فإِنه يُنشئ مساحات حول العناصر عندما يضعها في مواضعها في الصّفحة. الصفّحة القادِمة تصف كيف يُمكن استخدام لغة الـCSS لتَّعامل مع  هذه الأشكال من خلال الـ<a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Boxes" title="en-US/docs/Web/Guide/CSS/Getting_Started/Boxes">boxes</a>.</p>