initial commit

2 files changed, 159 insertions, 0 deletions

diff --git a/files/uk/web/guide/css/getting_started/index.html b/files/uk/web/guide/css/getting_started/index.html
new file mode 100644
index 0000000000..d273ec9d69
--- /dev/null
+++ b/files/uk/web/guide/css/getting_started/index.html
@@ -0,0 +1,46 @@
+---
+title: Getting started with CSS
+slug: Web/Guide/CSS/Getting_started
+translation_of: Learn/CSS/First_steps
+---
+<p><span class="seoSummary">Це керівництво ознайомить Вас з основними функціями та мовою (синтаксисом) каскадних таблиць стилів (<a href="/uk/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS"><strong>Cascading Style Sheets</strong></a> - CSS). Ви використовуєте CSS, щоб змінити зовнішній вигляд структурованого документу, такого як веб-сторінка. Урок також включає приклади вправ, які ви можете спробувати виконати на власному комп’ютері, щоб побачити ефекти CSS і функції, що реалізуються в сучасних браузерах.</span></p>
+
+<p>Посібник призначений для початківців і будь-кого, хто б хотів повторити основи CSS. Якщо ви маєте більше досвіду з CSS, основна сторінка CSS містить <a href="/en-US/docs/Web/Guide/CSS" title="/en-US/docs/Web/Guide/CSS">списки</a> більш просуненого рівня.</p>
+
+<nav class="fancyTOC"><a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/What_is_CSS" rel="next" title="Chapter 'What is CSS' of the CSS tutorial">що таке CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="Chapter 'Why use CSS' of the CSS tutorial">Навіщо використовувати CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/How_CSS_works" title="Chapter 'Як працює CSS' of the CSS tutorial">Як працює CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance" title="Chapter 'Cascading and inheritance' of the CSS tutorial">каскадування та успадковування</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Selectors" title="Chapter 'Selectors' of the CSS tutorial">Селектори</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="Chapter 'Readable_CSS' of the CSS tutorial">Читабельний CSS</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Text_styles" title="Chapter 'Text_styles' of the CSS tutorial">Текстові стилі</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Color" title="Chapter 'Color' of the CSS tutorial">Колір</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Content" title="Chapter 'Content' of the CSS tutorial">Контент</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Lists" title="Chapter 'Lists' of the CSS tutorial">Списки</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Boxes" title="Chapter 'Boxes' of the CSS tutorial">Boxes</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Layout" title="Chapter 'Layout' of the CSS tutorial">Layout</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Tables" title="Chapter 'Tables' of the CSS tutorial">Таблиці</a> <a class="button" href="/uk/docs/Web/Guide/CSS/Getting_Started/Media" title="Chapter 'Media' of the CSS tutorial">Медіа</a></nav>
+
+<h2 id="Що_потрібно_для_початку_роботи">Що потрібно для початку роботи</h2>
+
+<ul>
+ <li>Текстовий редактор</li>
+ <li>Сучасний браузер</li>
+ <li>Певний досвід роботи з текстовим редактором і браузером</li>
+</ul>
+
+<p>Не зважаючи на те, що вправи можуть допомогти тобі в навчанні, ти не зобов’язаний хз виконувати. Ти можеш просто читати керівництво та розглядати зображення.</p>
+
+<p><strong>На замітку:</strong> Керівництво розглядає тему як CSS працює з кольором. Буде простіше завершити ці секції з кольоровим дисплеєм та нормальним кольоровим зором.  </p>
+
+<h2 id="Як_використовувати_це_керівництво">Як використовувати це керівництво</h2>
+
+<p>В опрацюванні цього керівництва читай сторінки уважно і в визначеній послідовності. Якщо ти пропустиш сторінку, надалі може бути важко зрозуміти наступні сторінки підручника. </p>
+
+<h3 id="Частина_І_основи_CSS">Частина І: основи CSS</h3>
+
+<p>На кожній сторінці переглянь відділ <em>Інформація,</em> щоб зрозуміти як працює CSS. Спробуй  секцію <em>Дія,</em> щоб випробувати CSS на власному комп’ютері.</p>
+
+<p>To test your understanding, take the challenge at the end of each page. Solutions to the challenges are linked under the challenges, so you don't need to look at them if you don't want to.</p>
+
+<p>Щоб глибше зрозуміти CSS, прочитай інформацію, яку ти знайдеш в блоці з заголовком <em>Детальніше</em>. Використай лінки у них, щоб знайти довідникову інформацію про CSS.</p>
+
+<h3 id="Частина_II_Сфера_CSS">Частина II: Сфера CSS</h3>
+
+<p>Друга частина підручника надає приклади, які показують сферу CSS з іншими веб- і Mozilla технологіями.</p>
+
+<ol>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/JavaScript" title="en/CSS/Getting_Started/JavaScript">JavaScript</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/SVG_and_CSS" title="en/CSS/Getting_Started/SVG_graphics">SVG-графіка</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XML_data" title="en/CSS/Getting_Started/XML_data">XML дані</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XBL_bindings" title="en/CSS/Getting_Started/XBL_bindings">XBL сполучення</a></li>
+ <li><a href="/uk/docs/Web/Guide/CSS/Getting_Started/XUL_user_interfaces" title="en/CSS/Getting_Started/XUL_user_interfaces">Користувацбкі інтерфейси ХUL</a></li>
+</ol>
diff --git a/files/uk/web/guide/css/getting_started/what_is_css/index.html b/files/uk/web/guide/css/getting_started/what_is_css/index.html
new file mode 100644
index 0000000000..dfaba8a76d
--- /dev/null
+++ b/files/uk/web/guide/css/getting_started/what_is_css/index.html
@@ -0,0 +1,113 @@
+---
+title: What is CSS?
+slug: Web/Guide/CSS/Getting_started/What_is_CSS
+translation_of: Learn/CSS/First_steps/How_CSS_works
+---
+<div>{{CSSTutorialTOC}}</div>
+
+<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started", "Getting started")}} <span class="seoSummary">This first section of the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en/CSS/Getting Started">CSS Getting Started</a> tutorial briefly explains Cascading Style Sheets (CSS). You'll also create a simple document to use for CSS exercises in subsequent sections.</span></p>
+
+<h2 class="clearLeft" id="Інформація_Що_таке_CSS">Інформація: Що таке CSS?</h2>
+
+<p>Каскадні таблиці стилів (англ. - <em>Cascading Style Sheets </em> <dfn><abbr title="Cascading Style Sheets">CSS</abbr></dfn>) - мова, що визначає як вміст сторінки буде візуально офрмлений та представлений користувачам. Складові документу ж описують мовою розмітки, на зразок <a href="https://developer.mozilla.org/en-US/docs/Glossary/HTML">HTML</a>.</p>
+
+<p><em>Документ</em> являє собою інформацію, структуровану для подання з використанням <em>мови розмітки</em>.</p>
+
+<p><em>Presenting</em> a document to a user means converting it into a usable form for your audience. Browsers, like Firefox, Chrome or Internet Explorer, are designed to present documents visually, for example, on a computer screen, projector or printer.</p>
+
+<div class="tuto_example">
+<p><strong>Приклади</strong></p>
+
+<ul>
+ <li>A web page like the one you are reading is a document.<br>
+  The information that you see in a web page is usually structured using the markup language HTML (HyperText Markup Language).</li>
+ <li>Dialogs in an application, also called modal windows, are often documents.<br>
+  Such dialogs may also be structured using a markup language, like XUL (XML User Interface Language), which you will find in some Mozilla applications.</li>
+</ul>
+</div>
+
+<p>In this tutorial, boxes captioned <strong>Детальніше</strong> like the one below contain optional information and links to more resources on a concept or topic covered in a section. Read them as you see them, follow the links, or skip these boxes and return to read them later.</p>
+
+<div class="tuto_details">
+<div class="tuto_type">Детальніше</div>
+
+<p>Документ- це не те ж саме, що і файл. Втім, ти можеш зберегти документ у файлі.</p>
+
+<p>Документ, який ти зараз читаєш не збережений окремим файлом. Коли твій веб-браузер переходить на цю сторінку, сервер робить запит до бази данних та генерує документ, зібравши частини документу з різних фалів. Однак, в цьому уроці ти будеш працювати також і з  документами, збереженими у файлах.</p>
+
+<p>Більше інформації про документи та мови розміток ти можеш знайти в фнших розділах цього веб-сайту:</p>
+
+<table style="background-color: inherit; margin-left: 2em;">
+ <tbody>
+  <tr>
+   <td><a href="/en-US/docs/Web/HTML" title="/en-US/docs/Web/HTML">HTML</a></td>
+   <td>для веб-сторінок</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XML" title="/en-US/docs/XML">XML</a></td>
+   <td>для структурованих документів в загальному</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/Web/SVG" title="/en-US/docs/Web/SVG">SVG</a></td>
+   <td>для графіки</td>
+  </tr>
+  <tr>
+   <td><a href="/en-US/docs/XUL" title="/en-US/docs/XUL">XUL</a></td>
+   <td>для інтерфейсів користувачів у браузері Mozilla</td>
+  </tr>
+ </tbody>
+</table>
+
+<p>У другій частині ціього навчального посібника ти знайдеш приклади цих мов розміток.</p>
+</div>
+
+<div class="tuto_details">
+<div class="tuto_type">Детальніше</div>
+
+<p>In formal CSS terminology, the program that presents a document to a user is called a <em>user agent</em> (UA). A browser is just one kind of UA. CSS is not just for browsers or visual presentation, but for Part I of this tutorial, you'll only work with CSS in a browser.</p>
+
+<p>For formal definitions of terminology relating to CSS, see <a class="external" href="http://www.w3.org/TR/CSS21/conform.html#q1">Definitions</a> in the CSS Specification from the World Wide Web Consortium (W3C), an international community that sets open standards for the web.</p>
+</div>
+
+<h2 id="До_роботи_Створення_документу">До роботи: Створення документу</h2>
+
+<ol>
+ <li>Створи нову паку на своєму комп'ютері для того, щоб зберігати та упорядковувати вправи з наших уроків.</li>
+ <li>Open your text editor and create a new text file. This file will contain the document for the next few tutorial exercises.</li>
+ <li>Copy and paste the HTML shown below. Save the file using the name <code>doc1.html</code>
+  <pre class="brush: html">&lt;!DOCTYPE html&gt;
+&lt;html&gt;
+  &lt;head&gt;
+  &lt;meta charset="UTF-8"&gt;
+  &lt;title&gt;Sample document&lt;/title&gt;
+  &lt;/head&gt;
+
+  &lt;body&gt;
+    &lt;p&gt;
+      &lt;strong&gt;C&lt;/strong&gt;ascading
+      &lt;strong&gt;S&lt;/strong&gt;tyle
+      &lt;strong&gt;S&lt;/strong&gt;heets
+    &lt;/p&gt;
+  &lt;/body&gt;
+&lt;/html&gt;</pre>
+
+  <p>{{ LiveSampleLink('Action_Creating_a_document', 'View above Demo') }}</p>
+ </li>
+ <li>Open a new tab or a new window in your browser, then open the file you just created.
+  <p>You should see the text with the initial letters bold, like this:</p>
+
+  <table style="border: 2px outset #3366bb; padding: 1em;">
+   <tbody>
+    <tr>
+     <td><strong>C</strong>ascading <strong>S</strong>tyle <strong>S</strong>heets</td>
+    </tr>
+   </tbody>
+  </table>
+
+  <p>What you see in your browser might not look exactly the same because of settings in your browser and in this wiki. Some differences in the font, spacing and colors are not important.</p>
+ </li>
+</ol>
+
+<h2 id="Що_далі">Що далі?</h2>
+
+<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS", "Why use CSS?")}}Your document does not yet use CSS. In the <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Why_use_CSS">next section</a> you'll use CSS to style your document.</p>