<section id="description">
<p>Вы использовали атрибуты <code>id</code> или <code>class</code> к элементам, чтобы задать им специфические стили. Эти атрибуты известны как селекторы <code>ID</code> и <code>class</code>. Существуют и другие селекторы, которые вы можете использовать в CSS для выбора пользовательских групп элементов. Давайте снова рассмотрим CatPhotoApp, чтобы использовать селекторы в CSS. Для этой задачи вы будете использовать селектор атрибутов <code>[attr=value]</code>, чтобы установить чекбоксы в CatPhotoApp. Этот селектор соответствует элементам стилей с определенным значением атрибута. Например, приведенный ниже код изменяет отступы всех элементов с атрибутом <code>type</code>, имеющим значение  <code>radio</code>: <pre class="language-css"><code>[type = 'radio'] {
  margin: 20px 0px 20px 0px;
}</code></pre></p>

<p>
  Заметка: более подробно этот момент разбирался: <a href="https://freecode.academy/learn/exercises/bad87fee1348bd9aecf08806/discuss/aa579dd7d7d5f402c7bfb4c16">здесь</a>.
</p>
</section>

Use Attribute Selectors to Style Elements

<section id="description">
<p><dfn>Переменные CSS</dfn> - это мощный способ изменить сразу несколько свойств стиля CSS, изменив только одно значение. Следуйте инструкциям ниже, чтобы увидеть, как изменение только трех значений может изменить стиль многих элементов.</p></section>

Use CSS Variables to change several elements at once

<section id="description">
<p>Чтобы создать переменную CSS, вам просто нужно дать ей <code>имя</code> с двумя знаками <code>--</code> перед ним и присвоить ему <code>значение</code> подобное этому: <pre class="language-css"><code>--penguin-skin: gray; </code></pre> Это создаст переменную с именем <code>--penguin-skin</code> и присвоит ей значение <code>gray</code>. Теперь вы можете использовать эту переменную в другом месте вашего CSS, чтобы изменить значение других элементов на серый.</p></section>

Create a custom CSS Variable

<section id="description">
<p>После создания вашей переменной вы можете присвоить ее значение другим свойствам CSS, указав имя, которое вы ему дали. <pre class="language-css"><code>background: var(--penguin-skin); </code></pre> Это изменит фон любого элемента, на который вы нацеливаетесь, на серый, поскольку это значение переменной <code>--penguin-skin</code>. Обратите внимание: стили не будут применяться, если имена переменных не будут точно совпадать (они чувствительны к регистру).</p></section>

Use a custom CSS Variable

<section id="description">
<p>При использовании переменной в качестве значения свойства CSS вы можете добавить резервное значение, которое ваш браузер вернет, если данная переменная недействительна. Пример: <pre class="language-css"><code>background: var(--penguin-skin, black);</code></pre> Это установит фон в черный, если переменная <code>--penguin-skin</code> не была установлена. Обратите внимание, что это может быть полезно для отладки.</p></section>

Attach a Fallback value to a CSS Variable

<section id="description">
<p>Когда вы создаете переменную, она становится доступной для использования внутри элемента, в котором вы его создаете. Он также становится доступным внутри любых элементов, вложенных в него. Этот эффект известен как <dfn>каскадный</dfn> . Из-за каскадирования переменные CSS часто определяются в <dfn>корневом</dfn> элементе. <code>:root</code> - это селектор <dfn>псевдокласса</dfn> , который соответствует корневому элементу документа, обычно <code>html</code> элемент. Создав переменные в <code>:root</code> , они будут доступны по всему документу и могут быть доступны из любого другого селектора позже в таблице стилей.</p></section>

Cascading CSS variables

<section id="description">
<p>Когда вы создаете переменные в <code>:root</code> они задают значение этой переменной для всей страницы. Вы можете переписать эти переменные, установив их снова в пределах определенного элемента.</p></section>

Change a variable for a specific area

<section id="description">
<p>Переменные CSS могут упростить использование медиа-запросов. Например, когда ваш экран меньше или больше точки прерывания вашего медиа-запроса, вы можете изменить значение переменной, и она будет применять свой стиль везде, где он используется.</p></section>

Use a media query to change a variable

<section id="description">
  <p><b>Примечание:</b> этот материал не имеет существенного значения.</p>
<p>При работе с CSS вы, вероятно, столкнетесь с проблемами совместимости браузеров в какой-то момент (не все браузеры поддерживают переменные). Вот почему важно задавать значения по умолчанию в переменных, чтобы избежать потенциальных проблем. Когда ваш браузер анализирует CSS веб-страницы, он игнорирует любые свойства, которые он не распознает или не поддерживает. Например, если вы используете переменную CSS для назначения цвета фона на сайте, Internet Explorer игнорирует цвет фона, поскольку он не поддерживает переменные CSS. В этом случае браузер будет использовать любое значение, которое он имеет для этого свойства. Если он не может найти какое-либо другое значение, установленное для этого свойства, оно вернется к значению по умолчанию, которое обычно не является идеальным. Это означает, что если вы хотите предоставить значение по умолчанию, это так же просто, как предоставить еще одно широко поддерживаемое значение непосредственно перед вашей декларацией. Таким образом, у более старого браузера есть что-то, на что можно положиться, в то время как более новый браузер будет просто интерпретировать любое объявление, которое позднее появится в каскаде.</p></section>

Improve Compatibility with Browser Fallbacks

<section id="description">
<p>В нескольких последних задачах вы задавали внутренние или внешние отступы элементов в пикселях ( <code>px</code> ). Пиксели - это тип единицы длины, что говорит браузеру о том, какой задать размер или отступ элемента. В дополнение к <code>px</code> , CSS имеет несколько различных единиц измерения длины, которые вы можете использовать. Два основных типа единиц длины являются абсолютными и относительными. Абсолютные единицы привязываются к физическим единицам длины. Так, например, <code>in</code> и <code>mm</code> соответствуют дюймам и миллиметрам. Единицы абсолютной длины приближаются к фактическому измерению на экране, но есть некоторые различия в зависимости от разрешения экрана. Относительные единицы, такие как <code>em</code> или <code>rem</code>, относятся к другому значению длины. Например, <code>em</code> основывается на размере шрифта элемента. Если вы используете его для установки самого свойства <code>font-size</code>, оно относится к <code>font-size</code> родительского <code>font-size</code>. <strong>
  </p>
<p>
  Заметка</strong> <br> Существует несколько относительных параметров единиц измерения, которые привязаны к размеру окна просмотра. Они описаны в разделе <a href="https://freecode.academy/learn/sections/ck4h36qjt0hon0782spk44668">Принципы адаптивного веб-дизайна</a>.</p></section>

Understand Absolute versus Relative Units

<section id="description">
<p>Как и с шестнадцатеричным кодом, вы можете смешивать цвета в RGB, используя комбинации разных значений.</p></section>

Use RGB to Mix Colors

<section id="description">
<p>Одной из замечательных особенностей атрибутов <code>id</code> является то, что, подобно классам, вы можете их использовать в качестве селекторов для оформления спомощью CSS. Однако <code>id</code> не может использоваться повторно и должен применяться только к одному элементу (Технически может, то есть вы можете создать несколько элементов с одним и тем же <code>id</code>, но настоятельно рекомендуется не допускать этого и следить, чтобы <code>id</code> всегда были уникальными). <code>id</code> также имеет более высокую специфичность (важность), чем класс, поэтому, если оба CSS-правила применяются к одному и тому же элементу и имеют конфликтующие стили, применяются стили <code>id</code>. Вот пример того, как вы можете взять свой элемент с атрибутом <code>id=cat-photo-element</code> и присвоить ему зеленый цвет фона. В вашем элементе <code>style</code> : <pre class="language-css"><code>#cat-photo-element { 
  background-color: green; 
} </code></pre> Обратите внимание, что внутри вашего элемента <code>style</code> вы всегда ссылаетесь на классы, помещая <code>.</code> (точку) перед их именами, а перед именами идентификаторов вы указываете <code>#</code>.</p></section>

Use an id Attribute to Style an Element

<section id="description">
<p>В дополнение к классам каждый элемент HTML также может иметь атрибут <code>id</code>. Существует несколько преимуществ использования атрибутов <code>id</code>: вы можете использовать <code>id</code> для стилизации одного элемента, а позже вы узнаете, что вы можете использовать их для выбора и изменения определенных элементов с помощью JavaScript. Атрибуты <code>id</code> должны быть уникальными. Браузеры не будут ругаться, если вдруг будет несколько элементов с одинаковым id, но это широко распространенная практика. К тому же, могут возникнуть логические ошибки. К примеру, если вы выполните <code>document.getElementById(idName)</code>, этот метод вернет первый попавшийся элемент с указанным id, и если вдруг на странице их больше, чем один, то вы можете просто получить не тот элемент, какой рассчитывали. Поэтому, пожалуйста, старайтесь следить за тем, чтобы <code>id</code> были уникальны в рамках документа. Вот пример того, как вы присваиваете элементу <code>h2</code> идентификатор <code>cat-photo-app</code> : <pre class="language-html"><code>&#x3C;h2 id="cat-photo-app">...&#x3C;/h2></code></pre></p>
</section>

Set the id of an Element

<section id="description">
<p>Вы можете установить цвет фона элемента при помощи свойства <code>background-color</code>. Например, если вы хотите, чтобы цвет фона элемента был <code>green</code>, вы должны поместить его в элемент <code>style</code>: <pre class="language-css"><code>.green-background {
  background-color: green;
} </code></pre></p>
</section>

Give a Background Color to a div Element

<section id="description">
<p>Иногда вам нужно настроить элемент таким образом, чтобы он имел разный <code>margin</code> на каждой из сторон. CSS позволяет вам контролировать <code>margin</code> всех четырех отдельных сторон элемента с параметрами <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> .</p></section>

Add Different Margins to Each Side of an Element

<section id="description">
<p>В прошлом уроке мы убедились, что браузеры читают стили CSS сверху вниз. Это означает, что в случае конфликта браузер будет использовать ту декларацию CSS, что прописана в последнюю очередь. Но мы еще не закончили. Существуют и другие способы переопределения CSS. Вы помните атрибуты id? Давайте переопределим ваши классы с <code>pink-text</code> и <code>blue-text</code> и сделаем ваш элемент <code>h1</code> оранжевым, указав элементу <code>h1</code> идентификатор, а затем прописав стиль для этого идентификатора.</p></section>

Override Class Declarations by Styling ID Attributes

<section id="description">
<p>CSS имеет свойство под названием <code>width</code>, которое управляет шириной элемента. Как и в случае с размерами шрифтов, мы будем использовать пиксели <code>px</code> (pixels), чтобы указать ширину изображения. Например, если мы хотим создать стиль CSS для класса <code>larger-image</code>, который дал бы HTML-элементам ширину 500 пикселей, мы будем использовать: <pre class="language-html"><code>&#x3C;style>
  .larger-image {
    width: 500px;
  }
&#x3C;/style> </code></pre></p>
</section>

Size Your Images

<section id="description">
<p>class - это атрибут HTML-тегов, который позволяет как бы объединить несколько разных тегов в группу. Это позволяет потом легко найти все эти элементы по имени класса, а так же прописать стили для таких классов. Вот пример объявления стилей CSS для конкретного класса: <pre class="language-html"><code>&#x3C;style>
  .blue-text {
    color: blue;
  }
&#x3C;/style> </code></pre> 

Вы можете видеть, что в <code>&#x3C;style></code> мы прописали правило CSS для тегов с классом <code>blue-text</code>. Теперь вы можете указать этот класс нужным вам элементам, например вот так: <pre class="language-html"><code>&#x3C;h2 class="blue-text">CatPhotoApp&#x3C;/h2></code></pre> 
Обратите внимание, что в элементе <code>style</code> CSS имена классов начинаются с точки. В атрибуте класса HTML-элементов имя класса не включает точку. Так происходит потому что в теге мы имя класса явно задали в качестве свойства атрибуту <code>class</code>, а в CSS нет. Там мы использовали короткую запись, используя точку как спецсимвол перед именем класса. Чтобы в CSS явно указать класс по имени, надо писать так: <pre class="language-css"><code>[class=className]{
  /* styles */
}</code></pre> </p>
<p>
  Напомню, что ранее мы уже использовали другую короткую запись, используя знак <code>#</code> перед id элемента. Явная же запись выглядела бы так: <pre class="language-css"><code>[id=idName]{
    /* styles */
  }</code></pre>
</p>
</section>

Use a CSS Class to Style an Element

<section id="description">
<p>Еще один способ отображения цветов в CSS - использование значений <code>RGB</code> . Значение RGB для черного выглядит так: <code>rgb(0, 0, 0)</code> Значение RGB для белого выглядит следующим образом: <code>rgb(255, 255, 255)</code> Вместо того, чтобы использовать шесть шестнадцатеричных цифр, например, с шестнадцатеричным кодом, с <code>RGB</code> вы укажете яркость каждого цвета числом от 0 до 255 (то есть шестнадцатеричные значения представлены в привычной нам десятиричной системе). Если вы правильно посчитаете, две цифры для одного цвета равные 16 на 16, что дает нам всего 256 значений. Таким образом, <code>RGB</code> начинает отсчет с нуля, и имеет то же количество возможных значений, что и шестнадцатеричный код. Вот пример того, как изменить фон <code>body</code> на оранжевый, используя его код RGB. <pre class="language-css"><code>body {
  background-color: rgb(255, 165, 0);
} </code></pre></p>
</section>

Use RGB values to Color Elements

<section id="description">
<p>Вы можете выбрать, какой шрифт должен использовать элемент, используя свойство <code>font-family</code> . Например, если вы хотите чтобы шрифтом элемента <code>h2</code> был шрифт под названием <code>sans-serif</code>, то вы должны использовать следующий CSS: <pre class="language-css"><code>h2 {
  font-family: sans-serif;
} </code></pre></p>
</section>

Set the Font Family of an Element

<section id="description">
<p>Наш класс <code>pink-text</code> переопределил декларацию CSS в <code>body</code> элементе! Мы просто доказали, что наши стили переопределяют CSS элемента <code>body</code>. Итак, следующий логический вопрос: что мы можем сделать, чтобы переопределить наш стиль для класса <code>pink-text</code>?</p></section>

Override Styles in Subsequent CSS

<section id="description">
<p>В предыдущем уроке мы убедились, что стили для <code>id</code> имеют преимущество над стилями для <code>class</code>. Существуют и другие способы переопределения CSS. Вы помните встроенные стили? Или как их еще называют <code>инлайновыми</code>.</p></section>

Override Class Declarations with Inline Styles

<section id="description">
<p>Ура! Мы убедились, что встроенные стили переопределяют все объявления CSS в вашем элементе <code>style</code>. Но подождите! Есть еще один способ переопределить стили CSS. 
</p>
<p>
  <b>Замечание: </b> все же старайтесь избегать этого приема. Используйте его только в крайних случаях. И да, одни стили, заданные с флагом !important перебиваются другими стилями с таким же флагом в порядке очередности:)
</p>
<p>Это самый мощный метод для всех. Но прежде чем мы это сделаем, давайте поговорим о том, зачем нам вообще такое может понадобиться. Во многих ситуациях вы будете использовать библиотеки CSS. Они могут случайно переопределить ваш собственный CSS. Поэтому, когда вам абсолютно необходимо убедиться, что элемент имеет определенный CSS, вы можете использовать флаг <code>!important</code> Давайте вернемся к нашему объявлению класса <code>pink-text</code>. Помните, что наш класс <code>pink-text</code> был переопределен последующими объявлениями классов, декларациями id и встроенными стилями.</p></section>

Override All Other Styles by using Important

<section id="description">
<p>Многие люди чувствуют себя в замешательстве, когда им предоставляется возможность использовать более 16 миллионов цветов. И очень сложно запомнить шестнадцатеричный код. К счастью, вы можете сократить его. Например, шестнадцатеричный код красного цвета <code>#FF0000</code> можно сократить до <code>#F00</code> . Эта сокращенная форма дает одну цифру для красного, одну цифру для зеленого и одну цифру для синего. Это уменьшает общее количество возможных цветов до 4096. Но браузеры будут интерпретировать <code>#FF0000</code> и <code>#F00</code> как один и тот же цвет.</p></section>

Use Abbreviated Hex Code

<section id="description">
<p>Для представления цвета шестнадцатеричные коды используют 6 шестнадцатеричных цифр, по две для красного (R), зеленого (G) и синего (B) компонентов. Для этих трех чистых цветов (красный, зеленый и синий) мы можем варьировать количество каждого из них, чтобы создать более 16 миллионов других цветов! (12^2 = 256; 256^3 = 16777216) 
</p>
<p>
Например, чистый красный, смешанный с зеленоватым и не содержит синего. В шестнадцатеричном коде это означает, что это <code>#FFA500</code>. Цифра <code>0</code> является наименьшим числом в шестнадцатеричном коде и представляет полное отсутствие цвета. Цифра <code>F</code> является наивысшим числом в шестнадцатеричном коде и представляет максимально возможную яркость цвета.</p></section>

Use Hex Code to Mix Colors

<section id="description">
<p>Ранее для указания цвета мы использовали их имена (white, red, pink and etc.). Но существуют и другие способы представления цветов в CSS. Один из этих способов - использовать шестнадцатеричный код или <code>hex code</code> для краткости. Обычно мы используем <code>decimals</code> или базовые 10 чисел, которые используют символы от 0 до 9 для каждой цифры. <code>Hexadecimals</code> (или <code>hex</code> ) - это базовые 16 чисел. Это означает, что он использует шестнадцать различных символов. Как десятичные знаки, символы 0-9 представляют значения от нуля до девяти. Затем A, B, C, D, E, F представляют значения от десяти до пятнадцати. В целом, от 0 до F может представлять цифру в <code>hexadecimal</code> форме, что дает нам 16 возможных значений. Здесь вы можете найти более подробную информацию о <a target="_blank" href="https://ru.wikipedia.org/wiki/%D0%A8%D0%B5%D1%81%D1%82%D0%BD%D0%B0%D0%B4%D1%86%D0%B0%D1%82%D0%B5%D1%80%D0%B8%D1%87%D0%BD%D0%B0%D1%8F_%D1%81%D0%B8%D1%81%D1%82%D0%B5%D0%BC%D0%B0_%D1%81%D1%87%D0%B8%D1%81%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F">шестнадцатеричных числах</a>. В CSS мы можем использовать 6 шестнадцатеричных цифр для представления цветов, по два для красных (R), зеленых (G) и синих (B) компонентов. Например, <code>#000000</code> является черным и также является наименьшим возможным значением. Здесь вы можете найти более подробную информацию о <a target="_blank" href="https://ru.wikipedia.org/wiki/RGB">цветовой системе RGB</a> . <pre class="language-css"><code>body {
  color: #000000;
}</code></pre></p>
</section>

Use Hex Code for Specific Colors

<section id="description">
<p>Теперь давайте поговорим о наследовании в CSS. На каждой странице HTML есть элемент <code>body</code> .</p></section>

Style the HTML Body Element

<section id="description">
<p>Теперь мы доказали, что каждая HTML-страница имеет элемент <code>body</code>, которому так же могут быть заданы стили CSS. Помните, вы можете стилизовать свой элемент <code>body</code> так же, как любой другой элемент HTML, и все другие элементы наследуют стили <code>body</code>, так как являются его внутренними элементами.</p></section>


Inherit Styles from the Body Element

<section id="description">
<p>Иногда ваши HTML-элементы получают несколько стилей, которые конфликтуют друг с другом. Например, ваш элемент <code>h1</code> не может быть одновременно зеленым и розовым. Давайте посмотрим, что произойдет, когда мы создадим стиль, который делает текст розовым, а затем применим его к элементу. Будет ли наш стиль <em>переопределять</em> <code>color: green;</code> элемента <code>body</code>?</p></section>

Prioritize One Style Over Another

<section id="description">
<p>Теперь давайте изменим цвет некоторых наших текстов. Мы можем сделать это, изменив <code>style</code> вашего элемента <code>h2</code> . Свойство, отвечающее за цвет текста элемента, является свойством стиля <code>color</code> . Вот как вы можете задать цвет текста вашего элемента <code>h2</code> синим: <pre class="language-css"><code>&#x3C;h2 style="color: blue;">CatPhotoApp&#x3C;/h2></code></pre> Обратите внимание, что хорошей практикой является прекращение объявлений в <code>style</code> inline с помощью <code>;</code></p></section>

Change the Color of Text

<section id="description">
  <p>
    <code>CSS</code> расшифровывается как <code>Cascading Style Sheets</code>, то есть <code>Каскадные таблицы стилей</code>.
  </p>
<p>В CSS есть сотни свойств, которые вы можете использовать, чтобы изменить стили отображения элементов на вашей странице. Когда вы указали <pre class="language-css"><code>&#x3C;h2 style="color: red;">CatPhotoApp&#x3C;/h2></code></pre>, вы задали стиль конкретному элементу <code>h2</code>, используя <code>inline CSS</code>. Это один из способов указать стиль элемента, но есть лучше способы применить <code>CSS</code>. В верхней части кода создайте блок <code>style</code> следующим образом: <pre class="language-html"><code> &#x3C;style> <br> &#x3C;/style> </code></pre> Внутри этого блока <code>style</code> вы можете создать стили для отдельных элементов, используя CSS-селекторы (правила поиска элементов в документе). Например, если вы хотите, чтобы все элементы <code>h2</code> были красными, вы можете добавить правило CSS, которое выглядит так: <pre class="language-html"><code>&#x3C;style>
  h2 {
    color: red;
  }
&#x3C;/style> </code></pre> 

Обратите внимание, что важно иметь как открывающиеся, так и закрывающие фигурные скобки ( <code>{</code> и <code>}</code> ) вокруг правила CSS каждого селектора. Вы также должны убедиться, что правила CSS вашего селектора находится между открывающей и закрывающей фигурной скобкой. Наконец, обязательно добавьте точку с запятой в конец каждого из правил CSS вашего селектора.</p></section>

Use CSS Selectors to Style Elements

<section id="description">
<p>Размер шрифта контролируется свойством CSS <code>font-size</code> , например: <pre class="language-css"><code>h1 {
  font-size: 30px;
} </code></pre></p>
</section>

Change the Font Size of an Element

<section id="description">
<p>В дополнение к общим шрифтам, которые можно найти в большинстве операционных систем, можно так же использовать нестандартные пользовательские веб-шрифты для использования на нашем веб-сайте. Существует множество источников веб-шрифтов, но в этом примере мы сосредоточимся на библиотеке Google Fonts. <a href="https://fonts.google.com/" target="_blank">Google Fonts</a> - бесплатная библиотека веб-шрифтов, которую вы можете использовать в своем CSS, ссылаясь на URL-адрес шрифта. Итак, давайте попробуем импортировать и применить шрифт из библиотеки Google (обратите внимание, что если Google заблокирован в вашей стране, вам нужно будет пропустить этот пример). Чтобы импортировать шрифт Google, вы можете скопировать шрифт(ы) из библиотеки Google Fonts и затем вставить его в свой HTML. Для этого примера мы импортируем шрифт <code>Lobster</code>. Скопируйте следующий фрагмент кода и вставьте его в верхнюю часть редактора кода (перед элементом <code>style</code>): <pre class="language-html"><code>&#x3C;link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"></code></pre> 

Теперь вы можете использовать шрифт <code>Lobster</code> в своем CSS, используя <code>Lobster</code> как имя шрифта, как в следующем примере: <br> <pre class="language-css"><code>font-family: FAMILY_NAME, GENERIC_NAME;</code></pre>. GENERIC_NAME необязателен и является резервным шрифтом, если другой указанный шрифт недоступен (таким образом можно перечислить сразу несколько шрифтов). Это будет рассматриваться в следующей задаче. Если в имени шрифта есть пробелы, то имена шрифта чувствительны к регистру и должны быть указаны в кавычках. Например, вам нужны кавычки, чтобы использовать шрифт <code>"Open Sans"</code>, но для шрифта <code>Lobster</code> кавычки не обязательны.</p></section>

Import a Google Font

<section id="description">
<p>Существует несколько стандартных шрифтов, доступных во всех браузерах. Эти типовые семейства шрифтов включают в себя <code>monospace</code> , <code>serif</code> и <code>sans-serif</code> Когда один шрифт недоступен, вы можете сказать браузеру использовать другой шрифт. Например, если вы хотите, чтобы элемент использовал шрифт <code>Helvetica</code> , но когда <code>Helvetica</code> недоступен использовался шрифт <code>sans-serif</code>, вы можете указать следующее: <pre class="language-css"><code>p { 
  font-family: Helvetica, sans-serif; 
} </code></pre> 

Имена общих имен шрифтов не чувствительны к регистру. Кроме того, им не нужны кавычки, потому что они являются ключевыми словами CSS.</p></section>

Specify How Fonts Should Degrade

<section id="description">
<p>Ваша фотография кошки в настоящее время имеет острые углы. Мы можем скруглить эти углы с помощью CSS-свойства, называемого <code>border-radius</code> .</p></section>

Add Rounded Corners with border-radius

<section id="description">
<p>В дополнение к пикселям вы также можете задать <code>border-radius</code> в процентном соотношении.</p></section>

Make Circular Images with a border-radius

<section id="description">
<p>Значение <code>margin</code> влияет на расстояние от рамки элемента (border) до окружающих его элементов. Здесь мы видим, что синий прямоугольник и красный прямоугольник вложены в желтый прямоугольник. Обратите внимание, что красный прямоугольник имеет больший <code>margin</code> чем синий, что делает его меньше. Когда вы увеличите <code>margin</code> синего прямоугольника, это увеличит расстояние между его границей и окружающими элементами.</p></section>

Adjust the Margin of an Element

<section id="description">
<p>Значение <code>margin</code> (поле) элемента контролирует объем пространства между значением <code>border</code> (границей) элемента и окружающими элементами. Если вы установите значение <code>margin</code> отрицательным, то размер элемента увеличится.</p></section>

Add a Negative Margin to an Element

<section id="description">
<p>Иногда вам нужно настроить элемент таким образом, чтобы на каждой его стороне было различное количество внутренних отступов - <code>padding</code> . CSS позволяет вам управлять <code>padding</code> всех четырех отдельных сторон элемента с помощью свойств <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code> .</p></section>

Add Different Padding to Each Side of an Element

<section id="description">
<p>Вместо того, чтобы отдельно указывать свойства <code>padding-top</code> , <code>padding-right</code> , <code>padding-bottom</code> и <code>padding-left</code>, вы можете указать их все в одной строке, например: <pre class="language-css"><code>padding: 10px 20px 10px 20px;</code> </pre>Эти четыре значения работают как часы: верх, правый, нижний, левый (12 часов, 3 часа, 6 часов, 9 часов) и будут давать то же самое, что и при использовании спецификаций дополнений для конкретной стороны.</p>

<p>
  Заметка: в часовой нотации не обязательно указывать все 4 значения. Можно 3 и даже 2. Оставшиеся неуказанный значения "зазеркалят" противоположные. К примеру, укажем так: <pre class="language-css"><code>padding: 10px 20px 30px;</code> </pre>

Как видим, здесь нет последнего значение, то есть которое "на 9 часов". Для него противоположное положение - "3 часа", то есть второй элемент. "Зазеркалив" значение второго элемента получим
<pre class="language-css"><code>padding: 10px 20px 30px 20px;</code> </pre>

</p>

<p>
  А если указано только два элемента, то "зеркалятся" элементы из "12 часов" в "6 часов" и "3 часа" в "9 часов". К примеру, укажем так:
  <pre class="language-css"><code>padding: 10px 20px;</code> </pre> то по факту получим 
<pre class="language-css"><code>padding: 10px 20px 10px 20px;</code> </pre>
</p>

<p>
  К слову, если так разобраться, то когда мы указываем всего одно значение, например <code>padding: 10px;</code>, то здесь тоже применяется "часовая нотация" и правила отражения. Просто это число "отражается во все стороны" и получается <pre class="language-css"><code>padding: 10px 10px 10px 10px;</code></pre>
</p>

<p>
  Такой прием действует и с маржинами (margin), и с бордерами (border) и со всеми остальными правилами, где применима "часовая нотация".
</p>
</section>

Use Clockwise Notation to Specify the Padding of an Element

<section id="description">
<p>Классы позволяют использовать одни и те же стили CSS для нескольких элементов HTML. Вы можете увидеть это, применив свой класс <code>red-text</code> к первому элементу <code>p</code> .</p></section>

Style Multiple Elements with a CSS Class

<section id="description">
<p>Давайте попробуем это снова, но с <code>margin</code> в этот раз. Вместо того, чтобы указывать свойства <code>margin-top</code> , <code>margin-right</code> , <code>margin-bottom</code> и <code>margin-left</code> отдельно, вы можете указать их все в одной строке, например: <code>margin: 10px 20px 10px 20px;</code> Эти четыре значения работают как часы: верхний, правый, нижний, левый и будут давать тот же результат, что и при использовании отдельных margin свойств.</p></section>

Use Clockwise Notation to Specify the Margin of an Element

<section id="description">
<p>Рамки (border) в CSS имеют такие свойства, как <code>style</code> , <code>color</code> и <code>width</code> Например, если бы мы хотели создать сплошную красную рамку с шириной 5 пикселей вокруг элемента HTML, мы могли бы использовать этот стиль: <pre class="language-html"><code>&#x3C;style>
  .thin-red-border {
    border-color: red;
    border-width: 5px;
    border-style: solid;
  }
&#x3C;/style> </code></pre></p>
</section>

Add Borders Around Your Elements

<section id="description">
<p>Теперь давайте немного отложим наше приложение , и узнаем больше о стилизации HTML. Возможно, вы это уже заметили, но все элементы HTML по существу представляют собой небольшие прямоугольники. Три важных свойства управляют пространством, которое окружает каждый элемент HTML: <code>padding</code> (внутренний отступ) , <code>margin</code> (внешний отступ) и <code>border</code> (рамка). Элемент в <code>padding</code> контролирует объем пространства между содержимым элемента и его <code>border</code> (рамкой). Здесь мы видим, что синий прямоугольник и красный прямоугольник вложены в желтый прямоугольник. Обратите внимание, что красное поле имеет больше <code>padding</code> (внутренний отступ) чем синий. При увеличении значения <code>padding</code> в синем прямоугольнике увеличится и расстояние между текстом и границей вокруг него.</p></section>