initial commit

8 files changed, 1198 insertions, 0 deletions

diff --git a/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html b/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html
new file mode 100644
index 0000000000..5444f5713a
--- /dev/null
+++ b/files/uk/learn/css/building_blocks/cascade_and_inheritance/index.html
@@ -0,0 +1,337 @@
+---
+title: Cascade and inheritance
+slug: Learn/CSS/Building_blocks/Cascade_and_inheritance
+translation_of: Learn/CSS/Building_blocks/Cascade_and_inheritance
+---
+<div>{{LearnSidebar}}{{NextMenu("Learn/CSS/Building_blocks/Selectors", "Learn/CSS/Building_blocks")}}</div>
+
+<p>Мета  цього уроку - розвинути розуміння найфундаментальніших концептів CSS — каскадності (cascade), специфічності (specificity), і наслідування (inheritance) — ці принципи контролюють те, як  CSS застосовується до елементів HTML і як вирішуються конфлікти між правилами CSS.</p>
+
+<p>Опрацювання цього уроку може здатися не настільки актуальним на даному етапі і занадто академічним порівняно з іншими частинами курсу, однак розуміння цих концепцій збереже вам багато часу в майбутньому. Ми заохочуємо вас опрацювати цю частину курсу уважно і впевнитися, що ви розумієте ці концепти перед тим, як рухатися далі. </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 cascade and specificity, and how inheritance works in CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Правила_CSS_що_конфліктують_між_собою">Правила CSS, що конфліктують між собою</h2>
+
+<p>CSS означає Cascading Style Sheets (Каскадні Таблиці Стилів), і розуміння першого слова <em>каскадний</em> є надзвичайно важливим — спосіб поведінки каскадів це ключ до розуміння CSS.</p>
+
+<p>Рано чи пізно, ви будете працювати над проектом і потрапите в ситуацію, коли правила CSS, які повинні були б застосуватися до якогось певного HTML елемента, не працюють.  Як правило, проблема полягатиме в тому, що ви створили два різних СSS правила, які можуть потенційно застосуватися до одного і того самого елемента. <strong>Каскад (cascade)</strong>, так само як і тісно пов*язаний із ним концепт <strong>специфічності - </strong>це механізми, які контролюють те, яке саме із CSS правил застосується в випадку такого конфлікту. Правило, яке застосується до вашого елементу може бути далеко не тим, на котре ви очікували. Для того, щоб уникнути таких ситуацій, потрібно зрозуміти, як саме працюють ці механізми. </p>
+
+<p>Так само важливим є і концепт <strong>наслідування (inheritance)</strong>, який полягає в тому, що деякі CSS властивості (CSS properties) по замовчуванню наслідують ознаки своїх батьківських елементів (parent elements), а деякі ні. Це так само може призвести до неочікуваних ситуацій.</p>
+
+<p>Для початку, поглянемо на концепції із якими ми матимемо справу в загальному, а потім розберемо кожну із них по черзі, щоб побачити те, як вони співпрацюють між собою і іншими правилами CSS, які ви написали. Зрозуміти ці концепти може бути непросто спочатку, однак в процесі написання і практикування з CSS, вам буде все легше і легше  розуміти і те, як саме воно працює. </p>
+
+<h3 id="Каскад_cascade">Каскад (cascade)</h3>
+
+<p>Каскад — на найпростішому рівні, цей принцип полягає в тому, що порядок CSS правил має значення. В випадках, коли можна застосувати одне із двох різних правил із однаковою специфічністю, вибирається те правило, яке зазначене останнім. </p>
+
+<p>В нашому прикладі ми маємо два правила, що могли б бути застосовані до елемента  <code>h1</code>. Елемент <code>h1</code> в кінцевому результаті виявиться синім — ці два правила мають ідентичний селектор, і, як результат, однакову специфічність, а тому той, який іде останнім по порядку, "перемагає".</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/cascade-simple.html", '100%', 400)}} </p>
+
+<h3 id="Специфічність_specificity">Специфічність (specificity)</h3>
+
+<p>Принцип специфічності полягає в тому, як саме браузер вирішує те, яке із CSS правил застосувати тоді, коли різні правила відносяться до різних селеторів, але все одно можуть бути застосовані до одного і того самого елемента. В певному сенсі це міра того, наскільки специфічним буде вибір селектора.</p>
+
+<ul>
+ <li>Селектор що відноситься до <strong>типу елемента</strong> (наприклад, h1, p) буде менш специфічним. Він вибирає всі елементи однакового типу, що з*являться на сторінці, а тому матиме низький показник. </li>
+ <li>Селектор, що відноситься до<strong> класу </strong>буде специфічнішим, оскільки він вибере лише ті елементи на сторінці, що матимуть атрибут <code>class</code> із якимось специфічним значенням.  Тому його показник буде вищим.</li>
+</ul>
+
+<p>Час для прикладу: ми знову бачимо 2 правила, що можуть бути застосовані до елемента  <code>h1</code>. В кінцквому результаті  <code>h1</code> стає червоним — селектор по класу надає своєму правилу більшої специфічності,  а тому браузер застосує саме його, не зважаючи на те, що по порядку він йде другим.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-simple.html", '100%', 500)}} </p>
+
+<p>Ми пояснимо розрахунок специфічності далі у цій статті. </p>
+
+<h3 id="Inheritance">Inheritance</h3>
+
+<p>Inheritance also needs to be understood in this context — some CSS property values set on parent elements are inherited by their child elements, and some aren't.</p>
+
+<p>For example, if you set a <code>color</code> and <code>font-family</code> on an element, every element inside it will also be styled with that color and font, unless you've applied different color and font values directly to them.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance-simple.html", '100%', 550)}} </p>
+
+<p>Some properties do not inherit — for example if you set a {{cssxref("width")}} of 50% on an element, all of its descendants do not get a width of 50% of their parent's width. If this was the case, CSS would be very frustrating to use!</p>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: On MDN CSS property reference pages you can find a technical information box, usually at the bottom of the specifications section, which lists a number of data points about that property, including whether it is inherited or not. See the <a href="/en-US/docs/Web/CSS/color#Specifications">color property Specifications section</a>, for example.</p>
+</div>
+
+<h2 id="Understanding_how_the_concepts_work_together">Understanding how the concepts work together</h2>
+
+<p>These three concepts together control which CSS applies to what element; in the below sections we'll see how they work together. It can sometimes seem a little bit complicated, but you will start to remember them as you get more experienced with CSS, and you can always look up the details if you forget! Even experienced developers don't remember all the details.</p>
+
+<h2 id="Understanding_inheritance">Understanding inheritance</h2>
+
+<p>We'll start with inheritance. In the example below we have a {{cssxref("ul")}}, with two levels of unordered lists nested inside it. We have given the outer <code>&lt;ul&gt;</code> a border, padding, and a font color.</p>
+
+<p>The color has applied to the direct children, but also the indirect children — the immediate child <code>&lt;li&gt;</code>s, and those inside the first nested list. We have then added a class of <code>special</code> to the second nested list and applied a different color to it. This then inherits down through its children.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/inheritance.html", '100%', 700)}} </p>
+
+<p>Things like widths (as mentioned above), margins, padding, and borders do not inherit. If a border were to be inherited by the children of our list, every single list and list item would gain a border — probably not an effect we would ever want!</p>
+
+<p>Which properties are inherited by default and which aren't is largely down to common sense.</p>
+
+<h3 id="Controlling_inheritance">Controlling inheritance</h3>
+
+<p>CSS provides four special universal property values for controlling inheritance. Every CSS property accepts these values.</p>
+
+<dl>
+ <dt>{{cssxref("inherit")}}</dt>
+ <dd>Sets the property value applied to a selected element to be the same as that of its parent element. Effectively, this "turns on inheritance".</dd>
+ <dt>{{cssxref("initial")}}</dt>
+ <dd>Sets the property value applied to a selected element to be the same as the value set for that element in the browser's default style sheet. If no value is set by the browser's default style sheet and the property is naturally inherited, then the property value is set to <code>inherit</code> instead.</dd>
+ <dt>{{cssxref("unset")}}</dt>
+ <dd>Resets the property to its natural value, which means that if the property is naturally inherited it acts like <code>inherit</code>, otherwise it acts like <code>initial</code>.</dd>
+</dl>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: There is also a newer value, {{cssxref("revert")}}, which has limited browser support.</p>
+</div>
+
+<div class="blockIndicator note">
+<p><strong>Note</strong>: See {{SectionOnPage("/en-US/docs/Web/CSS/Cascade", "Origin of CSS declarations")}} for more information on each of these and how they work.</p>
+</div>
+
+<p>We can look at a list of links and explore how the universal values work. The live example below allows you to play with the CSS and see what happens when you make changes. Playing with code really is the best way to get to grips with HTML and CSS.</p>
+
+<p>For example:</p>
+
+<ol>
+ <li>The second list item has the class <code>my-class-1</code> applied. This sets the color of the a element nested inside to inherit. If you remove the rule how does it change the color of the link?</li>
+ <li>Do you understand why the third and fourth links are the color that they are? Check the description of the values above if not.</li>
+ <li>Which of the links will change color if you define a new color for the <code>&lt;a&gt;</code> element — for example <code>a { color: red; }</code>?</li>
+</ol>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/keywords.html", '100%', 700)}} </p>
+
+<h3 id="Resetting_all_property_values">Resetting all property values</h3>
+
+<p>The CSS shorthand property <code>all</code> can be used to apply one of these inheritance values to (almost) all properties at once. Its value can be any one of the inheritance values (<code>inherit</code>, <code>initial</code>, <code>unset</code>, or <code>revert</code>). It's a convenient way to undo changes made to styles so that you can get back to a known starting point before beginning new changes.</p>
+
+<p>In the below example we have two blockquotes. The first has styling applied to the blockquote element itself, the second has a class applied to the blockquote which sets the value of <code>all</code> to <code>unset</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/all.html", '100%', 700)}} </p>
+
+<p>Try setting the value of <code>all</code> to some of the other available values and observe what the difference is.</p>
+
+<h2 id="Розуміння_каскадів">Розуміння каскадів</h2>
+
+<p>Ми тепер розуміємо, чому параграф, що знаходиться всередині структури HTML документа, має такий самий коляр як і той, що вказаний в CSS для елементу  &lt;body&gt;. З початкових уроків ми розуміємо також  from the introductory lessons we have an understanding of how to change the CSS applied to something at any point in the document — whether by assigning CSS to an element or creating a class. We will now take a proper look at how the cascade defines which CSS rules apply when more than one thing could style an element.</p>
+
+<p>There are three factors to consider, listed here in decreasing order of importance. Earlier ones overrule later ones:</p>
+
+<ol>
+ <li>Importance</li>
+ <li>Specificity</li>
+ <li>Source order</li>
+</ol>
+
+<p>We will look at these from the bottom up, to see how browsers figure out exactly what CSS should be applied.</p>
+
+<h3 id="Source_order">Source order</h3>
+
+<p>We have already seen how source order matters to the cascade. If you have more than one rule, which has exactly the same weight, then the one that comes last in the CSS will win. You can think of this as rules which are nearer the element itself overwriting early ones until the last one wins and gets to style the element.</p>
+
+<h3 id="Specificity">Specificity</h3>
+
+<p>Once you understand the fact that source order matters, at some point you will run into a situation where you know that a rule comes later in the stylesheet, but an earlier, conflicting, rule is applied. This is because that earlier rule has a <strong>higher specificity</strong> — it is more specific, and therefore is being chosen by the browser as the one that should style the element.</p>
+
+<p>As we saw earlier in this lesson, a class selector has more weight than an element selector, so the properties defined on the class will override those applied directly to the element.</p>
+
+<p>Something to note here is that although we are thinking about selectors, and the rules that are applied to the thing they select, it isn't the entire rule which is overwritten, only the properties which are the same.</p>
+
+<p>This behavior helps avoid repetition in your CSS. A common practice is to define generic styles for the basic elements, and then create classes for those which are different. For example, in the stylesheet below we have defined generic styles for level 2 headings, and then created some classes which change only some of the properties and values. The values defined initially are applied to all headings, then the more specific values are applied to the headings with the classes.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/mixing-rules.html", '100%', 700)}} </p>
+
+<p>Let's now have a look at how the browser will calculate specificity. We already know that an element selector has low specificity and can be overwritten by a class. Essentially a value in points is awarded to different types of selectors, and adding these up gives you the weight of that particular selector, which can then be assessed against other potential matches.</p>
+
+<p>The amount of specificity a selector has is measured using four different values (or components), which can be thought of as thousands, hundreds, tens and ones — four single digits in four columns:</p>
+
+<ol>
+ <li><strong>Thousands</strong>: Score one in this column if the declaration is inside a {{htmlattrxref("style")}} attribute, aka inline styles. Such declarations don't have selectors, so their specificity is always simply 1000.</li>
+ <li><strong>Hundreds</strong>: Score one in this column for each ID selector contained inside the overall selector.</li>
+ <li><strong>Tens</strong>: Score one in this column for each class selector, attribute selector, or pseudo-class contained inside the overall selector.</li>
+ <li><strong>Ones</strong>: Score one in this column for each element selector or pseudo-element contained inside the overall selector.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The universal selector (<code>*</code>), combinators (<code>+</code>, <code>&gt;</code>, <code>~</code>, ' '), and negation pseudo-class (<code>:not</code>) have no effect on specificity.</p>
+</div>
+
+<p>The following table shows a few isolated examples to get you in the mood. Try going through these, and making sure you understand why they have the specificity that we have given them. We've not covered selectors in detail yet, but you can find details of each selector on the MDN  <a href="/en-US/docs/Web/CSS/CSS_Selectors">selectors reference</a>.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">Selector</th>
+   <th scope="col">Thousands</th>
+   <th scope="col">Hundreds</th>
+   <th scope="col">Tens</th>
+   <th scope="col">Ones</th>
+   <th scope="col">Total specificity</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td><code>h1</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1</td>
+   <td>0001</td>
+  </tr>
+  <tr>
+   <td><code>h1 + p::first-letter</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>3</td>
+   <td>0003</td>
+  </tr>
+  <tr>
+   <td><code>li &gt; a[href*="en-US"] &gt; .inline-warning</code></td>
+   <td>0</td>
+   <td>0</td>
+   <td>2</td>
+   <td>2</td>
+   <td>0022</td>
+  </tr>
+  <tr>
+   <td><code>#identifier</code></td>
+   <td>0</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0100</td>
+  </tr>
+  <tr>
+   <td>No selector, with a rule inside an element's {{htmlattrxref("style")}} attribute</td>
+   <td>1</td>
+   <td>0</td>
+   <td>0</td>
+   <td>0</td>
+   <td>1000</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>Before we move on, let's look at an example in action.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/specificity-boxes.html", '100%', 700)}} </p>
+
+<p>So what's going on here? First of all, we are only interested in the first seven rules of this example, and as you'll notice, we have included their specificity values in a comment before each one.</p>
+
+<ul>
+ <li>The first two selectors are competing over the styling of the link's background color — the second one wins and makes the background color blue because it has an extra ID selector in the chain: its specificity is 201 vs. 101.</li>
+ <li>The third and fourth selectors are competing over the styling of the link's text color — the second one wins and makes the text white because although it has one less element selector, the missing selector is swapped out for a class selector, which is worth ten rather than one. So the winning specificity is 113 vs. 104.</li>
+ <li>Selectors 5–7 are competing over the styling of the link's border when hovered. Selector six clearly loses to five with a specificity of 23 vs. 24 — it has one fewer element selectors in the chain. Selector seven, however, beats both five and six — it has the same number of sub-selectors in the chain as five, but an element has been swapped out for a class selector. So the winning specificity is 33 vs. 23 and 24.</li>
+</ul>
+
+<ol>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: This has only been an approximate example for ease of understanding. In actuality, each selector type has its own level of specificity that cannot be overwritten by selectors with a lower specificity level. For example, a <em>million</em> <strong>class</strong> selectors combined would not be able to overwrite the rules of <em>one</em> <strong>id</strong> selector.</p>
+
+<p>A more accurate way to evaluate specificity would be to score the specificity levels individually starting from highest and moving on to lowest when necessary. Only when there is a tie between selector scores within a specificity level do you need to evaluate the next level down; otherwise, you can disregard the lower specificity level selectors since they can never overwrite the higher specificity levels.</p>
+</div>
+
+<h3 id="!important">!important</h3>
+
+<p>There is a special piece of CSS that you can use to overrule all of the above calculations, however you should be very careful with using it — <code>!important</code>. This is used to make a particular property and value the most specific thing, thus overriding the normal rules of the cascade.</p>
+
+<p>Take a look at this example where we have two paragraphs, one of which has an ID.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/important.html", '100%', 700)}} </p>
+
+<p>Let's walk through this to see what's happening — try removing some of the properties to see what happens if you are finding it hard to understand:</p>
+
+<ol>
+ <li>You'll see that the third rule's {{cssxref("color")}} and {{cssxref("padding")}} values have been applied, but the {{cssxref("background-color")}} hasn't. Why? Really all three should surely apply, because rules later in the source order generally override earlier rules.</li>
+ <li>However, The rules above it win, because class selectors have higher specificity than element selectors.</li>
+ <li>Both elements have a {{htmlattrxref("class")}} of <code>better</code>, but the 2nd one has an {{htmlattrxref("id")}} of <code>winning</code> too. Since IDs have an <em>even higher</em> specificity than classes (you can only have one element with each unique ID on a page, but many elements with the same class — ID selectors are <em>very specific</em> in what they target), the red background color and the 1 pixel black border should both be applied to the 2nd element, with the first element getting the gray background color, and no border, as specified by the class.</li>
+ <li>The 2nd element <em>does</em> get the red background color, but no border. Why? Because of the <code>!important</code> declaration in the second rule — including this after <code>border: none</code> means that this declaration will win over the border value in the previous rule, even though the ID has higher specificity.</li>
+</ol>
+
+<div class="note">
+<p><strong>Note</strong>: The only way to override this <code>!important</code> declaration would be to include another <code>!important</code> declaration on a declaration with the <em>same specificity</em> later in the source order, or one with a higher specificity.</p>
+</div>
+
+<p>It is useful to know that <code>!important</code> exists so that you know what it is when you come across it in other people's code. <strong>However, we strongly recommend that you never use it unless you absolutely have to.</strong> <code>!important</code> changes the way the cascade normally works, so it can make debugging CSS problems really hard to work out, especially in a large stylesheet.</p>
+
+<p>One situation in which you may have to use it is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override a style that can't be overridden in any other way. But really, don't use it if you can avoid it.</p>
+
+<h2 id="The_effect_of_CSS_location">The effect of CSS location</h2>
+
+<p>Finally, it is also useful to note that the importance of a CSS declaration depends on what stylesheet it is specified in — it is possible for users to set custom stylesheets to override the developer's styles, for example the user might be visually impaired, and want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.</p>
+
+<h2 id="To_summarize">To summarize</h2>
+
+<p>Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:</p>
+
+<ol>
+ <li>Declarations in user agent style sheets (e.g. the browser's default styles, used when no other styling is set).</li>
+ <li>Normal declarations in user style sheets (custom styles set by a user).</li>
+ <li>Normal declarations in author style sheets (these are the styles set by us, the web developers).</li>
+ <li>Important declarations in author style sheets</li>
+ <li>Important declarations in user style sheets</li>
+</ol>
+
+<p>It makes sense for web developers' stylesheets to override user stylesheets, so the design can be kept as intended, but sometimes users have good reasons to override web developer styles, as mentioned above — this can be achieved by using <code>!important</code> in their rules.</p>
+
+<h2 id="Active_learning_playing_with_the_cascade">Active learning: playing with the cascade</h2>
+
+<p>In this active learning, we'd like you to experiment with writing a single new rule that will override the color and background color that we've applied to the links by default. Can you use one of the special values we looked at in the {{anch("Controlling inheritance")}} section to write a declaration in a new rule that will reset the background color back to white, without using an actual color vff</p>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, <a href="https://github.com/mdn/css-examples/blob/master/learn/solutions.md#the-cascade">take a look at the solution here</a>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/cascade/task.html", '100%', 700)}}</p>
+
+<h2 id="Whats_next">What's next</h2>
+
+<p>If you understood most of this article, then well done — you've started getting familiar with the fundamental mechanics of CSS. Next up, we'll look at selectors in detail.</p>
+
+<p>If you didn't fully understand the cascade, specificity, and inheritance, then don't worry! This is definitely the most complicated thing we've covered so far in the course, and is something that even professional web developers sometimes find tricky. We'd advise that you return to this article a few times as you continue through the course, and keep thinking about it.</p>
+
+<p>Refer back here if you start to come across strange issues with styles not applying as expected. It could be a specificity issue.</p>
+
+<p>{{NextMenu("Learn/CSS/Building_blocks/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/uk/learn/css/building_blocks/index.html b/files/uk/learn/css/building_blocks/index.html
new file mode 100644
index 0000000000..39839cd182
--- /dev/null
+++ b/files/uk/learn/css/building_blocks/index.html
@@ -0,0 +1,90 @@
+---
+title: Будівельні блоки CSS
+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/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 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/uk/learn/css/css_розмітка/index.html b/files/uk/learn/css/css_розмітка/index.html
new file mode 100644
index 0000000000..14ce8f9c63
--- /dev/null
+++ b/files/uk/learn/css/css_розмітка/index.html
@@ -0,0 +1,70 @@
+---
+title: CSS розмітка
+slug: Learn/CSS/CSS_розмітка
+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>
+
+<div class="in-page-callout webdev">
+<h3 id="Looking_to_become_a_front-end_web_developer">Looking to become a front-end web developer?</h3>
+
+<p>We have put together a course that includes all the essential information you need to work towards your goal.</p>
+
+<p><a class="cta primary" href="/docs/Learn/Front-end_web_developer">Get started</a></p>
+</div>
+
+<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://glitch.com/">Glitch</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. After studying this guide you can <a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox_skills">test your flexbox skills</a> to check your understanding before moving on.</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 features that make building complex layouts straightforward. This article will give you all you need to know to get started with page layout, then <a href="/en-US/docs/Learn/CSS/CSS_layout/Grid_skills">test your grid skills</a> before moving on.</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/Responsive_Design">Responsive design</a></dt>
+ <dd>As more diverse screen sizes have appeared on web-enabled devices, the concept of responsive web design (RWD) has appeared: a set of practices that allows web pages to alter their layout and appearance to suit different screen widths, resolutions, etc. It is an idea that changed the way we design for a multi-device web, and in this article we'll help you understand the main techniques you need to know to master it.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout/Media_queries">Beginner's guide to media queries</a></dt>
+ <dd>The <strong>CSS Media Query</strong> gives you a way to apply CSS only when the browser and device environment matches a rule that you specify, for example "viewport is wider than 480 pixels". Media queries are a key part of responsive web design, as they allow you to create different layouts depending on the size of the viewport, but they can also be used to detect other things about the environment your site is running on, for example whether the user is using a touchscreen rather than a mouse. In this lesson you will first learn about the syntax used in media queries, and then move on to use them in a worked example showing how a simple design might be made responsive.</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">Assessment: 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>
+</dl>
diff --git a/files/uk/learn/css/first_steps/index.html b/files/uk/learn/css/first_steps/index.html
new file mode 100644
index 0000000000..30aa7f0214
--- /dev/null
+++ b/files/uk/learn/css/first_steps/index.html
@@ -0,0 +1,53 @@
+---
+title: Перші кроки у CSS
+slug: Learn/CSS/First_steps
+tags:
+  - CSS
+  - Модулі
+  - Навчання
+  - Перші кроки
+  - Посадка
+  - Початок
+translation_of: Learn/CSS/First_steps
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">CSS (Cascading Style Sheets) використовується для стилювання та розміщення веб-сторінок - наприклад, для зміни шрифту, кольору, розміру та інтервалу вашого вмісту, розділення його на кілька стовпців або додавання анімації та інших декоративних функцій. Цей модуль забезпечує легкий початок вашого шляху до оволодіння CSS основами того, як він працює, як виглядає синтаксис і як ви можете почати використовувати його для додавання стилю до HTML.</p>
+
+<h2 id="Передумови">Передумови</h2>
+
+<p>Перш ніж запустити цей модуль, ви повинні мати:</p>
+
+<ol>
+ <li>Основне ознайомлення з використанням комп'ютерів та пасивним використанням Інтернету (тобто перегляд його, споживання вмісту.)</li>
+ <li>Основне робоче середовище, створене, як детально описано в <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення,</a> і розуміння того, як створювати файли та керувати ними, як детально описано у розділі <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">«Робота з файлами».</a><br>
+  Основне ознайомлення з HTML, як обговорювалося в модулі <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a> .</li>
+</ol>
+
+<div class="note">
+<p><strong>Примітка. Якщо ви працюєте на комп'ютері / планшеті / іншому пристрої, де у вас немає можливості створювати власні файли, ви можете спробувати (більшість) прикладів коду в онлайн-програмі кодування, наприклад </strong><a href="http://jsbin.com/">JSBin</a> або <a href="https://thimble.mozilla.org/">Thimble</a>.</p>
+</div>
+
+<h2 id="Посібники">Посібники</h2>
+
+<p>Цей модуль містить наступні статті, які допоможуть вам ознайомитись з усією базовою теорією CSS та нададуть вам можливість перевірити деякі навички.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></dt>
+ <dd><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></dt>
+ <dd>У цій статті ми візьмемо простий HTML-документ і застосуємо до нього CSS, вивчивши деякі практичні речі щодо мови.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Яка структура CSS</a></dt>
+ <dd>Тепер, коли ви маєте уявлення про те, що таке CSS та основи його використання, саме час трохи заглибитись у структуру самої мови. Ми вже зустріли багато обговорених тут концепцій; ви можете повернутися до цього, щоб скласти резюме, якщо ви знайдете якісь пізніші поняття заплутані.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></dt>
+ <dd>Ми вивчили основи CSS, для чого він потрібен та як писати прості таблиці стилів. У цьому уроці ми розглянемо, як браузер приймає CSS та HTML і перетворює їх у веб-сторінку.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуючи свої нові знання</a></dt>
+ <dd>З того, що ви вивчили на останніх кількох уроках, ви повинні виявити, що ви можете форматувати прості текстові документи за допомогою CSS, щоб додати до них свій власний стиль. Ця стаття дає вам шанс це зробити.</dd>
+</dl>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="https://teach.mozilla.org/activities/intermediate-web-lit/">Проміжна веб-грамотність 1: Вступ до CSS</a></dt>
+ <dd>Чудовий курс від Mozilla foundation, який вивчає та перевіряє багато навичок, про які говорилося в модулі «Вступ до CSS». Дізнайтеся про стилізацію HTML-елементів на веб-сторінці, селекторах CSS, атрибутах та значеннях.</dd>
+</dl>
diff --git a/files/uk/learn/css/first_steps/що_таке_css/index.html b/files/uk/learn/css/first_steps/що_таке_css/index.html
new file mode 100644
index 0000000000..a1ee6d30ea
--- /dev/null
+++ b/files/uk/learn/css/first_steps/що_таке_css/index.html
@@ -0,0 +1,129 @@
+---
+title: Що таке CSS?
+slug: Learn/CSS/First_steps/Що_таке_CSS
+tags:
+  - CSS
+  - Вступ до CSS
+  - Модулі
+  - Навчання
+  - Синтаксис
+  - Специфікація
+  - новачок
+translation_of: Learn/CSS/First_steps/What_is_CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</div>
+
+<p class="summary"><strong>{{Glossary("CSS")}}</strong> (Каскадні таблиці стилів) дозволяє створювати чудові веб-сторінки, але як це працює під кришкою? Ця стаття пояснює, що таке CSS, на прикладі простого синтаксису, а також висвітлює деякі ключові терміни про мову.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Основна комп'ютерна грамотність, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">встановлено базове програмне забезпечення</a>, основні знання про <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">робота з файлами,</a> та HTML базовий (вивчыть <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступ до HTML</a>)</td>
+  </tr>
+  <tr>
+   <th scope="row">
+    <p>Мета:</p>
+
+
+   </th>
+   <td>To learn what CSS is.</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>У вступі до модуля HTML ми розглянули, що таке HTML, і як він використовується для розмітки документів. Ці документи можна прочитати у веб-браузері. Заголовки виглядатимуть більше, ніж звичайний текст, абзаци перериваються на новий рядок і мають пробіл між ними. Посилання кольорові та підкреслені, щоб відрізняти їх від решти тексту. Що ви бачите, це стилі браузера за замовчуванням - дуже основні стилі, які браузер застосовує до HTML, щоб переконатися, що він буде в основному читабельним, навіть якщо автор сторінки не вказав явного стилю.</p>
+
+<p><img alt="The default styles used by a browser" src="https://mdn.mozillademos.org/files/16493/html-example.png" style="border: 1px solid #cccccc; height: 594px; width: 1385px;"></p>
+
+<p>Однак Інтернет був би нудним місцем, якби всі веб-сайти виглядали так. За допомогою CSS ви можете точно контролювати, як виглядають елементи HTML у браузері, представляючи свою розмітку, використовуючи будь-який дизайн, який вам подобається.</p>
+
+<h2 id="Для_чого_CSS">Для чого CSS?</h2>
+
+<p>Як ми вже згадували раніше, CSS - це мова, яка визначає, як документи подаються користувачам - як вони оформляються, викладаються тощо.A <strong>document</strong> is usually a text file structured using a markup language — {{Glossary("HTML")}} is the most common markup language, but you may also come across other markup languages such as {{Glossary("SVG")}} or {{Glossary("XML")}}.</p>
+
+<p>Подання документа користувачеві означає перетворення його в форму, яку можна використовувати вашій аудиторії. {{Глосарій ("браузер", "Браузери")}}, як {{Глосарій ("Mozilla Firefox", "Firefox")}}, {{Глосарій ("Google Chrome", "Chrome")}} або { {Глосарій ("Microsoft Edge", "Edge")}} призначений для візуального представлення документів, наприклад, на екрані комп'ютера, проекторі чи принтері.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка</strong>: Іноді браузер називається {{Glossary ("Агент користувача", "Агент користувача")}}, що в основному означає комп'ютерну програму, яка представляє людину всередині комп'ютерної системи. Браузери - це основний тип агента користувача, про який ми думаємо, коли говоримо про CSS, однак, це не єдиний. Доступні й інші користувацькі агенти - такі, які перетворюють документи HTML та CSS у PDF-файли для друку.</p>
+</div>
+
+<p>CSS можна використовувати для дуже базового стилю тексту документа - наприклад, для зміни кольору та розміру заголовків та посилань. Його можна використовувати для створення макета - наприклад, перетворення одного стовпця тексту в макет з основною областю вмісту та бічною панеллю для пов'язаної інформації. Його навіть можна використовувати для таких ефектів, як анімація. Перегляньте посилання в цьому пункті для конкретних прикладів.</p>
+
+<h2 id="Синтаксис_CSS">Синтаксис CSS</h2>
+
+<p>CSS є мовою на основі правил - ви визначаєте правила, що визначають групи стилів, які слід застосовувати до певних елементів або груп елементів на вашій веб-сторінці. Наприклад, "Я хочу, щоб основний заголовок на моїй сторінці відображався як великий червоний текст".</p>
+
+<p>У наведеному нижче коді показано дуже просте правило CSS, яке дозволило б досягти описаного вище стилю:</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}</pre>
+
+<p>Правило відкривається за допомогою {{Глосарій ("CSS Selector", "Selector")}}. Це вибирає HTML-елемент, який ми будемо стилювати. У цьому випадку ми створюємо заголовки рівня першого рівня ({{htmlelement ("h1")}}).</p>
+
+<p>Потім у нас є набір фігурних брекетів { }. Всередині буде одна чи кілька декларацій, які мають форму властивостей і значень пар. Кожна пара визначає властивість елемента (-ів), який ми вибираємо, а потім значення, яке ми хотіли б надати властивості.</p>
+
+<p>Перед двокрапкою ми маємо властивість, а після двокрапки - значення. CSS {{Глосарій ("властивість / CSS", "властивості")}} мають різні допустимі значення, залежно від того, яке властивість задано. У нашому прикладі ми маємо властивість кольору, яка може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Color">значення кольорів</a>. У нас також є  <code>font-size</code> влыстивість. Ця властивість може приймати різні <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Numbers_lengths_and_percentages">розмір одиниць</a>.</p>
+
+<p>Таблиця стилів CSS міститиме багато таких правил, написаних один за одним.</p>
+
+<pre class="brush: css">h1 {
+    color: red;
+    font-size: 5em;
+}
+
+p {
+    color: black;
+}</pre>
+
+<p>Ви побачите, що швидко засвоюєте деякі значення, тоді як інші вам потрібно буде шукати. Окремі сторінки властивостей на MDN дають вам швидкий спосіб пошуку властивостей та їх значень, коли ви забудете, або хочете знати, що ще можна використовувати як значення.</p>
+
+<div class="blockIndicator note">
+<p><strong>Примітка</strong>: Ви можете знайти посилання на всі сторінки властивостей CSS (разом з іншими функціями CSS), перелічені в розділі MDN <a href="/en-US/docs/Web/CSS/Reference">CSS reference</a>. Крім того, вам слід звикнути до пошуку "mdn css-feature-name" у своїй улюбленій пошуковій системі, коли вам потрібно дізнатися більше інформації про функцію CSS. Наприклад, спробуйте шукати "mdn color" і "mdn font-size"!</p>
+</div>
+
+<h2 id="CSS_Модулі">CSS Модулі</h2>
+
+<p>Оскільки існує так багато речей, які можна стилювати за допомогою CSS, мова розбивається на модулі. Ви побачите посилання на ці модулі під час вивчення MDN та багато сторінок документації, організованих навколо певного модуля. Наприклад, ви можете ознайомитися з посиланням на MDN на модуль "Фони та межі", щоб дізнатися, яке його призначення, а також які різні властивості та інші особливості він містить. Ви також знайдете посилання на специфікацію CSS, яка визначає технологію (див. Нижче).</p>
+
+<p>На цьому етапі вам не потрібно занадто хвилюватися про структурування CSS, однак це може полегшити пошук інформації, якщо, наприклад, ви знаєте, що певне властивість, можливо, знайдеться серед інших подібних речей і є тому, ймовірно, в тій же специфікації.</p>
+
+<p>Для конкретного прикладу повернемося до модуля «Фони та межі» - ви можете подумати, що це має логічний сенс для <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code> та <code><a href="/en-US/docs/Web/CSS/border-color">border-color</a></code> властивості, що визначаються в цьому модулі. І ти будеш прав.</p>
+
+<h3 id="CSS_специфікація">CSS специфікація</h3>
+
+<p>Усі технології веб-стандартів (HTML, CSS, JavaScript тощо) визначені в гігантських документах, що називаються специфікаціями (або просто "специфікаціями"), які публікуються організаціями зі стандартів (наприклад, {{глосарій ("W3C")}}, {{глосарій ("WHATWG")}}, {{глосарій ("ECMA")}} або {{глосарій ("Хронос")}}) і точно визначте, як повинні поводитися ці технології.</p>
+
+<p>CSS не відрізняється - він розроблений групою в межах W3C під назвою <a href="https://www.w3.org/Style/CSS/">CSS Робоча група</a>. Ця група складається з представників постачальників браузерів та інших компаній, які мають інтерес до CSS. Є й інші люди, відомі як запрошені експерти, які виступають незалежними голосами; вони не пов'язані з організацією-членом.</p>
+
+<p>Робоча група CSS розробляє або уточнює нові функції CSS. Іноді тому, що конкретний браузер зацікавлений у певних можливостях, інший раз через те, що веб-дизайнери та розробники просять про функцію, а іноді тому, що сама Робоча група визначила вимогу. CSS постійно розвивається, доступні нові функції. Однак, головне в CSS - це те, що всі дуже наполегливо працюють, щоб ніколи не змінювати речі таким чином, щоб зламати старі веб-сайти. Веб-сайт, побудований у 2000 році, використовуючи доступний тоді обмежений CSS, і сьогодні повинен використовуватись у веб-переглядачі!</p>
+
+<p>Як новачок у CSS, ймовірно, ви знайдете специфікації CSS непосильними - вони призначені для інженерів використовувати для впровадження підтримки функцій в агентах користувачів, а не для веб-розробників, які читають, щоб зрозуміти CSS. Багато досвідчених розробників швидше звертаються до документації MDN або інших навчальних посібників. Однак варто знати, що вони існують, розуміючи взаємозв'язок між CSS, який ви використовуєте, підтримкою браузера (див. Нижче) та специфікаціями.</p>
+
+<h2 id="Підтримка_браузера">Підтримка браузера</h2>
+
+<p>Після того, як CSS буде визначено, він може бути корисним для нас лише при розробці веб-сторінок, якщо один або кілька браузерів реалізували його. Це означає, що код написаний, щоб перетворити інструкцію з нашого CSS-файлу на щось, що може бути виведене на екран. Ми розглянемо цей процес докладніше на уроці <a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a>. Всі браузери незвично одночасно реалізовувати функцію, тому зазвичай існує розрив, де можна використовувати частину CSS в деяких браузерах, а не в інших. З цієї причини корисність перевірити стан реалізації. На кожній сторінці властивостей на MDN ви можете побачити статус об’єкта, який вас цікавить, тож ви можете сказати, чи зможете ви ним користуватися на веб-сайті.</p>
+
+<p>Далі йде таблиця даних compat для властивості CSS <code><a href="/en-US/docs/Web/CSS/font-family">font-family</a></code> .</p>
+
+<p>{{Compat("css.properties.font-family")}}</p>
+
+<h2 id="Що_далі">Що далі</h2>
+
+<p>Тепер, коли ви зрозуміли, що таке CSS, перейдемо до <a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a> де ви можете почати самостійно писати деякі CSS.</p>
+
+<p>{{NextMenu("Learn/CSS/First_steps/Getting_started", "Learn/CSS/First_steps")}}</p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ol>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/What_is_CSS">Що таке CSS?</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Getting_started">Початок роботи з CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_is_structured">Як структурується CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/How_CSS_works">Як працює CSS</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps/Using_your_new_knowledge">Використовуйте свої нові знання</a></li>
+</ol>
diff --git a/files/uk/learn/css/index.html b/files/uk/learn/css/index.html
new file mode 100644
index 0000000000..c4fd0dedfc
--- /dev/null
+++ b/files/uk/learn/css/index.html
@@ -0,0 +1,68 @@
+---
+title: Learn to style HTML using CSS
+slug: Learn/CSS
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Debugging
+  - Landing
+  - NeedsContent
+  - NeedsTranslation
+  - Style
+  - Topic
+  - TopicStub
+  - length
+  - specificity
+translation_of: Learn/CSS
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">Cascading Stylesheets — або {{glossary("CSS")}} — це перша технологія, яку слід почати вивчати після {{glossary("HTML")}}. Хоча HTML використовується для визначення структури та семантики вашого вмісту, CSS використовується для його стилізації та викладки. Наприклад, ви можете використовувати CSS, щоб змінити шрифт, колір, розмір та інтервал вашого вмісту, розділити його на кілька стовпців або додати анімацію та інші декоративні функції.</p>
+
+<h2 id="Шляхи_навчання">Шляхи навчання</h2>
+
+<p>Ви повинні вивчити основи HTML, перш ніж спробувати будь-який CSS. Рекомендуємо спочатку опрацювати наш Вступ до модуля HTML. У цьому модулі ви дізнаєтесь про:</p>
+
+<ul>
+ <li>CSS, почніть з модуля <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></li>
+ <li>Більш продвинуті <a href="/en-US/docs/Learn/HTML#Modules">HTML м</a>одулі</li>
+ <li><a href="/en-US/docs/Learn/JavaScript">JavaScript</a>, і як використовувати його для додавання динамічної функціональності веб-сторінкам</li>
+</ul>
+
+<p>Після того, як ви зрозумієте основи HTML, рекомендуємо вам вивчити HTML і CSS одночасно, рухаючись вперед і назад між двома темами. Це тому, що HTML набагато цікавіше і набагато цікавіше вчитися, коли ви застосовуєте CSS, і ви не можете навчитися CSS, не знаючи HTML.</p>
+
+<p>Перш ніж розпочати цю тему, ви також повинні ознайомитись з використанням комп’ютерів та пасивним використанням Інтернету (тобто, просто переглянувши його, споживаючи вміст). Ви повинні мати базове робоче середовище, налаштоване як детально<br>
+ в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_software">Встановлення базового програмного забезпечення</a> та зрозуміти, як створити та керувати файлами, як це детально описано в <a href="/en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_files">Робота з файлами</a> — обидва вони є нашими частинами <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> повний модуль для початківців.</p>
+
+<p>Рекомендується опрацювати <a href="/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> перш ніж перейти до цієї теми. Однак це не зовсім необхідне, оскільки значна частина того, що розглядається в статті про основи CSS, також висвітлено в нашому модулі <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a>, хоча і набагато детальніше.</p>
+
+<h2 id="Модулі">Модулі</h2>
+
+<p>Ця тема містить наступні модулі в запропонованому порядку для роботи над ними. Ви обов'язково повинні почати з першого.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступ до CSS</a></dt>
+ <dd>Цей модуль розпочинає роботу з основами роботи CSS, включаючи використання селекторів та властивостей; написання правил CSS; застосування CSS до HTML; визначення довжини, кольору та інших одиниць у CSS; контроль каскаду та успадкування; розуміння основ моделі коробки; та налагодження CSS.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text">Стилізація тексту</a></dt>
+ <dd>Тут ми розглядаємо основи стилізації тексту, включаючи встановлення шрифту, жирності та курсиву; інтервал між рядками та літерами; і скидання тіней та інших функцій тексту. Ми округляємо модуль, дивлячись на застосування спеціальних шрифтів до вашої сторінки та стилістичні списки та посилання.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_boxes">Стильні коробки</a></dt>
+ <dd>Далі ми розглянемо вікна стилізації, один із основних кроків щодо створення веб-сторінки. У цьому модулі ми резюмуємо модель коробки, потім переглядаємо керування макетами коробки, встановлюючи накладки, межі та поля, встановлюючи власні кольори фону, зображення та фантазійні функції, такі як тіні для крапель та фільтри на коробках.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/CSS_layout">CSS макет</a></dt>
+ <dd>На даний момент ми вже розглядали основи CSS, як стилювати текст та як стилізувати та маніпулювати полями, у яких розміщений ваш вміст. Тепер прийшов час розглянути, як розташувати вікна в потрібному місці по відношенню до вікна перегляду та один до одного. Ми забезпечили необхідні передумови, тому тепер ми можемо зануритися в глиб CSS-макета, переглядаючи різні налаштування дисплея, сучасні інструменти компонування, такі як flexbox, CSS-сітка та позиціонування, а також деякі застарілі методи, про які ви все ще можете знати.</dd>
+ <dt>Чуйний дизайн (TBD)</dt>
+ <dd>Завдяки такій кількості різних типів пристроїв, які сьогодні можуть переглядати Інтернет, <a href="/en-US/docs/Web/Guide/Responsive_design">чуйний веб-дизайн</a> (RWD) стала основним навиком веб-розробки. Цей модуль буде охоплювати основні принципи та інструменти роботи RWD; поясніть, як застосувати різні CSS до документа залежно від функцій пристрою, таких як ширина екрана, орієнтація та роздільна здатність; та вивчити технології, доступні для обслуговування різних відео та зображень залежно від таких функцій.</dd>
+</dl>
+
+<h2 id="Вирішення_поширених_проблем_CSS">Вирішення поширених проблем CSS</h2>
+
+<p><a href="/en-US/docs/Learn/CSS/Howto">Використовуйте CSS для вирішення загальних проблем</a> надає посилання на розділи вмісту, що пояснюють, як використовувати CSS для вирішення дуже поширених проблем під час створення веб-сторінки.</p>
+
+<p>Ви спочатку застосовуватимете кольори до елементів HTML та їх фонів; зміни розміру, форми та положення елементів; і додавати та визначати межі елементів. Але не так багато, що ти не зможеш зробити, коли добре зрозумієш навіть основи CSS. Одна з найкращих речей щодо вивчення CSS - це те, що, як тільки ви знаєте основи, зазвичай у вас є гарне відчуття того, що можна, а чого не можна зробити, навіть якщо ви ще не знаєте, як це зробити!</p>
+
+<h2 id="Дивіться_також">Дивіться також</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/CSS">CSS в MDN</a></dt>
+ <dd>Основна точка входу для CSS-документації на MDN, де ви знайдете детальну довідкову документацію щодо всіх функцій мови CSS. Хочете знати всі цінності, які може спричинити властивість? Це гарне місце.</dd>
+</dl>
diff --git a/files/uk/learn/css/styling_text/index.html b/files/uk/learn/css/styling_text/index.html
new file mode 100644
index 0000000000..46c343f406
--- /dev/null
+++ b/files/uk/learn/css/styling_text/index.html
@@ -0,0 +1,57 @@
+---
+title: Стилізація тексту
+slug: Learn/CSS/Styling_text
+tags:
+  - Beginner
+  - CSS
+  - CodingScripting
+  - Fonts
+  - Landing
+  - Links
+  - Module
+  - NeedsTranslation
+  - Text
+  - TopicStub
+  - font
+  - letter
+  - line
+  - lists
+  - shadow
+  - web fonts
+translation_of: Learn/CSS/Styling_text
+---
+<div>{{LearnSidebar}}</div>
+
+<p class="summary">With the basics of the CSS language covered, the next CSS topic for you to concentrate on is styling text — one of the most common things you'll do with CSS. Here we look at text styling fundamentals, including setting font, boldness, italics, line and letter spacing, drop shadows and other text features. We round off the module by looking at applying custom fonts to your page, and styling lists and links.</p>
+
+<h2 id="Prerequisites">Prerequisites</h2>
+
+<p>Before starting this module, you should already have basic familiarity with HTML, as discussed in the <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a> module, and be comfortable with CSS fundamentals, as discussed in <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introduction to CSS</a>.</p>
+
+<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>,<a href="https://codepen.io/"> CodePen</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 teach you all of the essentials behind styling HTML text content.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt>
+ <dd>In this article we go through all the basics of text/font styling in detail, including setting font weight, family and style, font shorthand, text alignment and other effects, and line and letter spacing.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></dt>
+ <dd>Lists behave like any other text for the most part, but there are some CSS properties specific to lists that you need to know about, and some best practices to consider. This article explains all.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></dt>
+ <dd>When styling links, it is important to understand how to make use of pseudo-classes to style link states effectively, and how to style links for use in common varied interface features such as navigation menus and tabs. We'll look at all these topics in this article.</dd>
+ <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></dt>
+ <dd>Here we will explore web fonts in detail — these allow you to download custom fonts along with your web page, to allow for more varied, custom text styling.</dd>
+</dl>
+
+<h2 id="Assessments">Assessments</h2>
+
+<p>The following assessments will test your understanding of the text styling techniques covered in the guides above.</p>
+
+<dl>
+ <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></dt>
+ <dd>In this assessment we'll test your understanding of styling text by getting you to style the text for a community school's homepage.</dd>
+</dl>
diff --git a/files/uk/learn/css/styling_text/стилі_списків/index.html b/files/uk/learn/css/styling_text/стилі_списків/index.html
new file mode 100644
index 0000000000..da8f62ab84
--- /dev/null
+++ b/files/uk/learn/css/styling_text/стилі_списків/index.html
@@ -0,0 +1,394 @@
+---
+title: Стилі списків
+slug: Learn/CSS/Styling_text/Стилі_списків
+tags:
+  - CSS
+  - Початківець
+  - Спискі
+  - Стаття
+  - Стилі
+  - Текст
+translation_of: Learn/CSS/Styling_text/Styling_lists
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div>
+
+<p class="summary">Здебільшого <a href="/uk/docs/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#List">Списки</a> ведуть себе як будь-який інший текст, але є деякі властивості CSS, специфічні для списків, які вам потрібно знати, а також деякі найкращі способи розгляду. Ця стаття пояснює все.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Передумови:</th>
+   <td>Основна комп'ютерна грамотність, основи HTML (вивчення <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Вступу до HTML</a>), основи CSS (вивчення <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Вступу до CSS</a>), <a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Основи тексту та шрифтів CSS.</a></td>
+  </tr>
+  <tr>
+   <th scope="row">Мета:</th>
+   <td>Познайомитися з найкращими практиками та властивостями, пов'язаними зі списками стилів.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Простий_приклад_списку">Простий приклад списку</h2>
+
+<p>Почнемо з того, давайте подивимося на приклад простого списку. У цій статті ми розглянемо списки неупорядкованих, упорядкованих та опису - у всіх є стилістичні функції, схожі на деякі,  що є характерними для їхнього типу списку. Неперевершений приклад <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">доступний на Github</a> ( також перевірте <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">цей код</a>)</p>
+
+<p>Приклад HTML для нашого списку виглядає так:</p>
+
+<pre class="brush: html">&lt;h2&gt;Shopping (unordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ul&gt;
+  &lt;li&gt;Humous&lt;/li&gt;
+  &lt;li&gt;Pitta&lt;/li&gt;
+  &lt;li&gt;Green salad&lt;/li&gt;
+  &lt;li&gt;Halloumi&lt;/li&gt;
+&lt;/ul&gt;
+
+&lt;h2&gt;Recipe (ordered) list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;ol&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;
+
+&lt;h2&gt;Ingredient description list&lt;/h2&gt;
+
+&lt;p&gt;Paragraph for reference, paragraph for reference, paragraph for reference,
+paragraph for reference, paragraph for reference, paragraph for reference.&lt;/p&gt;
+
+&lt;dl&gt;
+  &lt;dt&gt;Humous&lt;/dt&gt;
+  &lt;dd&gt;A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.&lt;/dd&gt;
+  &lt;dt&gt;Pitta&lt;/dt&gt;
+  &lt;dd&gt;A soft, slightly leavened flatbread.&lt;/dd&gt;
+  &lt;dt&gt;Halloumi&lt;/dt&gt;
+  &lt;dd&gt;A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.&lt;/dd&gt;
+  &lt;dt&gt;Green salad&lt;/dt&gt;
+  &lt;dd&gt;That green healthy stuff that many of us just use to garnish kebabs.&lt;/dd&gt;
+&lt;/dl&gt;</pre>
+
+<p>Якщо ви зараз перейдете до живого прикладу та вивчіть елементи списку, що використовують <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">інструменти розробника браузера</a>, ви помітите пара стилів по замовчуванням:</p>
+
+<ul>
+ <li>{{htmlelement("ul")}} і {{htmlelement("ol")}} елементи мають верхній і нижній {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>)  і {{cssxref("padding-left")}} від <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>Елементи списку ({{htmlelement("li")}} елементи) не встановлено за замовчуванням інтервал.</li>
+ <li>{{htmlelement("dl")}} елемент має верхню та нижню частини {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>), але не набір набивних покриттів.</li>
+ <li>{{htmlelement("dd")}} елементи мають {{cssxref("margin-left")}} від <code>40px</code> (<code>2.5em</code>.)</li>
+ <li>{{htmlelement("p")}} елементи, які ми включили для довідки, мають вершину та нижню частину {{cssxref("margin")}} від <code>16px</code> (<code>1em</code>),так само, як і різні типи списку.</li>
+</ul>
+
+<h2 id="Обробка_списку_інтервалів">Обробка списку інтервалів</h2>
+
+<p>При складанні списків стилів потрібно настроїти свої стилі, щоб вони мали однакові вертикальні відстані як їх оточуючі елементи (такі як абзаци та зображення, іноді їх називають вертикальним ритмом) і однакові між собою горизонтальні відстані (ви можете побачити  <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">закінчений стиль приклад</a>  в Github, і <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">знайти вихідний код</a> також.)</p>
+
+<p>CSS, який використовується для стилізації тексту та інтервалу, виглядає наступним чином:</p>
+
+<pre class="brush: css">/* General styles */
+
+html {
+  font-family: Helvetica, Arial, sans-serif;
+  font-size: 10px;
+}
+
+h2 {
+  font-size: 2rem;
+}
+
+ul,ol,dl,p {
+  font-size: 1.5rem;
+}
+
+li, p {
+  line-height: 1.5;
+}
+
+/* Description list styles */
+
+
+dd, dt {
+  line-height: 1.5;
+}
+
+dt {
+  font-weight: bold;
+}
+
+dd {
+  margin-bottom: 1.5rem;
+}</pre>
+
+<ul>
+ <li>Перше правило встановлює розмір шрифту на рівні сайту та розмір шрифту в базовому розмірі 10 пікселів. Вони успадковуються на всій сторінці.</li>
+ <li>Правила 2 та 3 встановлюють відносні розміри шрифтів для заголовків, різні типи списку (діти елементів списку успадковують їх) та абзаци. Це означає, що кожен параграф і список матимуть однаковий розмір шрифту та верхній та нижній інтервал, що допоможе зберегти вертикальний ритм узгоджено.</li>
+ <li>Правило 4 встановлює те ж саме {{cssxref("line-height")}} на абзаци та елементи списку - тому абзаци та окремий елемент списку матимуть однаковий інтервал між рядками. Це також допоможе зберегти вертикальний ритм узгоджено.</li>
+ <li>Правила 5 та 6 застосовуються до списку опису - ми встановили те ж саме <code>line-height</code> в термінах та описі списку опису, як ми робили з абзацами та елементами списку. Знову ж таки, послідовність хороша! Ми також робимо, що описові терміни мають жирний шрифт, тому вони виглядають простіше.<span id="cke_bm_126E" style="display: none;"> </span></li>
+</ul>
+
+<h2 id="List-specific_styles">List-specific styles</h2>
+
+<p>Now we've looked at general spacing techniques for lists, let's explore some list-specific properties. There are three properties you should know about to start with, which can be set on {{htmlelement("ul")}} or {{htmlelement("ol")}} elements:</p>
+
+<ul>
+ <li>{{cssxref("list-style-type")}}: Sets the type of bullets to use for the list, for example, square or circle bullets for an unordered list, or numbers, letters or roman numerals for an ordered list.</li>
+ <li>{{cssxref("list-style-position")}}: Sets whether the bullets appear inside the list items, or outside them before the start of each item.</li>
+ <li>{{cssxref("list-style-image")}}: Allows you to use a custom image for the bullet, rather than a simple square or circle.</li>
+</ul>
+
+<h3 id="Bullet_styles">Bullet styles</h3>
+
+<p>As mentioned above, the {{cssxref("list-style-type")}} property allows you to set what type of bullet to use for the bullet points. In our example, we've set the ordered list to use uppercase roman numerals, with:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+}</pre>
+
+<p>Це дає нам такий вигляд:</p>
+
+<p><img alt="an ordered list with the bullet points set to appear outside the list item text." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p>
+
+<p>You can find a lot more options by checking out the {{cssxref("list-style-type")}} reference page.</p>
+
+<h3 id="Bullet_position">Bullet position</h3>
+
+<p>The {{cssxref("list-style-position")}} property sets whether the bullets appear inside the list items, or outside them before the start of each item. The default value is <code>outside</code>, which causes the bullets to sit outside the list items, as seen above.</p>
+
+<p>If you set the value to <code>inside</code>, the bullets will sit inside the lines:</p>
+
+<pre class="brush: css">ol {
+  list-style-type: upper-roman;
+  list-style-position: inside;
+}</pre>
+
+<p><img alt="an ordered list with the bullet points set to appear inside the list item text." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p>
+
+<h3 id="Using_a_custom_bullet_image">Using a custom bullet image</h3>
+
+<p>The {{cssxref("list-style-image")}} property allows you to use a custom image for your bullet. The syntax is pretty simple:</p>
+
+<pre class="brush: css">ul {
+  list-style-image: url(star.svg);
+}</pre>
+
+<p>However, this property is a bit limited in terms of controlling the position, size, etc. of the bullets. You are better off using the {{cssxref("background")}} family of properties, which you'll learn a lot more about in the <a href="/en-US/docs/Learn/CSS/Styling_boxes">Styling boxes</a> module. For now, here's a taster!</p>
+
+<p>In our finished example, we have styled the unordered list like so (on top of what you've already seen above):</p>
+
+<pre class="brush: css">ul {
+  padding-left: 2rem;
+  list-style-type: none;
+}
+
+ul li {
+  padding-left: 2rem;
+  background-image: url(star.svg);
+  background-position: 0 0;
+  background-size: 1.6rem 1.6rem;
+  background-repeat: no-repeat;
+}</pre>
+
+<p>Here we've done the following:</p>
+
+<ul>
+ <li>Set the {{cssxref("padding-left")}} of the {{htmlelement("ul")}} down from the default <code>40px</code> to <code>20px</code>, then set the same amount on the list items. This is so that overall the list items are still lined up with the order list items and the description list descriptions, but the list items have some padding for the background images to sit inside. If we didn't do this, the background images would overlap with the list item text, which would look messy.</li>
+ <li>Set the {{cssxref("list-style-type")}} to <code>none</code>, so that no bullet appears by default. We're going to use {{cssxref("background")}} properties to handle the bullets instead.</li>
+ <li>Inserted a bullet onto each unordered list item. The relevant properties are as follows:
+  <ul>
+   <li>{{cssxref("background-image")}}: This references the path to the image file you want to use as the bullet.</li>
+   <li>{{cssxref("background-position")}}: This defines where in the background of the selected element the image will appear — in this case we are saying <code>0 0</code>, which means the bullet will appear in the very top left of each list item.</li>
+   <li>{{cssxref("background-size")}}: This sets the size of the background image. We ideally want the bullets to be the same size as the list items (or very slightly smaller or larger). We are using a size of <code>1.6rem</code> (<code>16px</code>), which fits very nicely with the <code>20px</code> padding we've allowed for the bullet to sit inside — 16px plus 4px of space between the bullet and the list item text works well.</li>
+   <li>{{cssxref("background-repeat")}}: By default, background images repeat until they fill up the available background space. We only want one copy of the image inserted in each case, so we set this to a value of <code>no-repeat</code>.</li>
+  </ul>
+ </li>
+</ul>
+
+<p>This gives us the following result:</p>
+
+<p><img alt="an unordered list with the bullet points set as little star images" src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p>
+
+<h3 id="list-style_shorthand">list-style shorthand</h3>
+
+<p>The three properties mentioned above can all be set using a single shorthand property, {{cssxref("list-style")}}. For example, the following CSS:</p>
+
+<pre class="brush: css">ul {
+  list-style-type: square;
+  list-style-image: url(example.png);
+  list-style-position: inside;
+}</pre>
+
+<p>Could be replaced by this:</p>
+
+<pre>ul {
+  list-style: square url(example.png) inside;
+}</pre>
+
+<p>The values can be listed in any order, and you can use one, two or all three (the default values used for the properties that are not included are <code>disc</code>, <code>none</code>, and <code>outside</code>). If both a <code>type</code> and an <code>image</code> are specified, the type is used as a fallback if the image can't be loaded for some reason.</p>
+
+<h2 id="Controlling_list_counting">Controlling list counting</h2>
+
+<p>Sometimes you might want to count differently on an ordered list — e.g. starting from a number other than 1, or counting backwards, or counting in steps of more than 1. HTML and CSS have some tools to help you here.</p>
+
+<h3 id="start">start</h3>
+
+<p>The {{htmlattrxref("start","ol")}} attribute allows you to start the list counting from a number other than 1. The following example:</p>
+
+<pre class="brush: html">&lt;ol start="4"&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('start', '100%', 150) }}</p>
+
+<h3 id="reversed">reversed</h3>
+
+<p>The {{htmlattrxref("reversed","ol")}} attribute will start the list counting down instead of up. The following example:</p>
+
+<pre class="brush: html">&lt;ol start="4" reversed&gt;
+  &lt;li&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p>
+
+<h3 id="value">value</h3>
+
+<p>The {{htmlattrxref("value","ol")}} attribute allows you to set your list items to specific numerical values. The following example:</p>
+
+<pre class="brush: html">&lt;ol&gt;
+  &lt;li value="2"&gt;Toast pitta, leave to cool, then slice down the edge.&lt;/li&gt;
+  &lt;li value="4"&gt;Fry the halloumi in a shallow, non-stick pan, until browned on both sides.&lt;/li&gt;
+  &lt;li value="6"&gt;Wash and chop the salad.&lt;/li&gt;
+  &lt;li value="8"&gt;Fill pitta with salad, humous, and fried halloumi.&lt;/li&gt;
+&lt;/ol&gt;</pre>
+
+<p>Gives you this output:</p>
+
+<p>{{ EmbedLiveSample('value', '100%', 150) }}</p>
+
+<div class="note">
+<p><strong>Note</strong>: Even if you are using a non-number {{cssxref("list-style-type")}}, you still need to use the equivalent numerical values in the <code>value</code> attribute.</p>
+</div>
+
+<h2 id="Active_learning_Styling_a_nested_list">Active learning: Styling a nested list</h2>
+
+<p>In this active learning session, we want you to take what you've learned above and have a go at styling a nested list. We've provided you with the HTML, and we want you to:</p>
+
+<ol>
+ <li>Give the unordered list square bullets.</li>
+ <li>Give the unordered list items and the ordered list items a line height of 1.5 of their font-size.</li>
+ <li>Give the ordered list lower alphabetical bullets.</li>
+ <li>Feel free to play with the list example as much as you like, experimenting with bullet types, spacing, or whatever else you can find.</li>
+</ol>
+
+<p>If you make a mistake, you can always reset it using the <em>Reset</em> button. If you get really stuck, press the <em>Show solution</em> button to see a potential answer.</p>
+
+<div class="hidden">
+<h6 id="Playable_code">Playable code</h6>
+
+<pre class="brush: html">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
+  &lt;h2&gt;HTML Input&lt;/h2&gt;
+  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;ul&gt;
+  &lt;li&gt;First, light the candle.&lt;/li&gt;
+  &lt;li&gt;Next, open the box.&lt;/li&gt;
+  &lt;li&gt;Finally, place the three magic items in the box, in this exact order, to complete the spell:
+    &lt;ol&gt;
+      &lt;li&gt;The book of spells&lt;/li&gt;
+      &lt;li&gt;The shiny rod&lt;/li&gt;
+      &lt;li&gt;The goblin statue&lt;/li&gt;
+    &lt;/ol&gt;
+  &lt;/li&gt;
+&lt;/ul&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;CSS Input&lt;/h2&gt;
+  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/textarea&gt;
+
+  &lt;h2&gt;Output&lt;/h2&gt;
+  &lt;div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"&gt;&lt;/div&gt;
+  &lt;div class="controls"&gt;
+    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
+    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
+  &lt;/div&gt;
+&lt;/div&gt;
+</pre>
+
+<pre class="brush: js">var htmlInput = document.querySelector(".html-input");
+var cssInput = document.querySelector(".css-input");
+var reset = document.getElementById("reset");
+var htmlCode = htmlInput.value;
+var cssCode = cssInput.value;
+var output = document.querySelector(".output");
+var solution = document.getElementById("solution");
+
+var styleElem = document.createElement('style');
+var headElem = document.querySelector('head');
+headElem.appendChild(styleElem);
+
+function drawOutput() {
+  output.innerHTML = htmlInput.value;
+  styleElem.textContent = cssInput.value;
+}
+
+reset.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = cssCode;
+  drawOutput();
+});
+
+solution.addEventListener("click", function() {
+  htmlInput.value = htmlCode;
+  cssInput.value = 'ul {\n  list-style-type: square;\n}\n\nul li, ol li {\n  line-height: 1.5;\n}\n\nol {\n  list-style-type: lower-alpha\n}';
+  drawOutput();
+});
+
+htmlInput.addEventListener("input", drawOutput);
+cssInput.addEventListener("input", drawOutput);
+window.addEventListener("load", drawOutput);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>
+
+<h2 id="See_also">See also</h2>
+
+<p>CSS counters provide advanced tools for customizing list counting and styling, but they are quite complex. We recommend looking into these if you want to stretch yourself. See:</p>
+
+<ul>
+ <li>{{cssxref("@counter-style")}}</li>
+ <li>{{cssxref("counter-increment")}}</li>
+ <li>{{cssxref("counter-reset")}}</li>
+</ul>
+
+<h2 id="Summary">Summary</h2>
+
+<p>Lists are relatively easy to get the hang of styling once you know a few associated basic principles and specific properties. In the next article we'll get on to link styling techniques.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p>
+
+<p> </p>
+
+<h2 id="In_this_module">In this module</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Styling lists</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Styling links</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Web fonts</a></li>
+ <li><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Typesetting a community school homepage</a></li>
+</ul>
+
+<p> </p>