initial commit

2 files changed, 427 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>