CSS_001_Основи стилізації з HTML та CSS

CSS — це потужний інструмент, який дозволяє надати стиль і життя вашим елементам HTML. У цьому блозі ми розглянемо простий приклад того, як CSS може перетворити вашу веб-сторінку за допомогою градієнтів, тіней і ефектів кольору. Ми пояснимо код крок за кроком, щоб зрозуміти, як кожен рядок впливає на фінальний результат.

Структура HTML

Ось проста структура HTML, з якою ми працюємо:

Це моя перша практика з CSS 
CSS — це весело
       ```  ## Пояснення:  1. ``: Оголошує тип документа як HTML5. 2. ``: Вказує, що мова документа — англійська. 3. ``: Містить метадані та посилання на зовнішні ресурси.  - ``: Встановлює кодування символів на UTF-8, що дозволяє використовувати широкий спектр символів. - ``: Робить сторінку адаптивною, встановлюючи ширину перегляду відповідно до ширини екрану пристрою. - ``: Встановлює заголовок веб-сторінки (відображається на вкладці браузера). - ``: Посилається на зовнішній CSS файл (`main.css`), щоб стилізувати елементи HTML.  1. ``: Містить основний вміст веб-сторінки.  - `
`: Створює контейнер div для групування та стилізації вмісту. - `
`: Визначає заголовок першого рівня з текстом "You are the CSS". - `
`: Визначає заголовок другого рівня з текстом "Anyone escaped there."  ## CSS стилі  Ось CSS, який використовується для стилізації елементів HTML:  ``` .container {        background: linear-gradient(to left, #9d0dbd, #df9fed);    box-shadow: 3px 5px 3px blue;   }      h1 {    color: black;    text-shadow: 5px 5px 5px rgb(116, 113, 113);      }      h2 {       color: rgb(5, 116, 22);    text-shadow: 5px 5px 5px rgb(116, 113, 113);   } ```  ## Пояснення кожного правила CSS  ## 1. `.container`  Клас `container` застосовує стилі до елемента `
` та всього, що в ньому міститься.  `background: linear-gradient(to left, #9d0dbd, #df9fed);`  - Це створює градієнтний фон, який переходить від фіолетового (`#9d0dbd`) до світло-рожевого (`#df9fed`), рухаючись **з правого на ліво**.  `color: blue;`  - Встановлює колір тексту всередині контейнера на синій.  `box-shadow: 3px 5px 3px blue;`  - Додає тінь навколо контейнера. Параметри: - **3px**: Горизонтальна тінь. - **5px**: Вертикальна тінь. - **3px**: Розмиття тіні. - **blue**: Колір тіні.  ## 2. `h1`  Тег `h1` визначає перший заголовок.  `color: black;`  - Встановлює колір тексту на чорний.  `text-shadow: 10px, 100px;`  - Цей рядок є недійсним, оскільки `text-shadow` потребує чотирьох значень (x-озміщення, y-озміщення, радіус розмиття та колір). Він не працюватиме і повинен бути видалений.  `text-shadow: 30px 10px 10px gray;`  - Коректно застосовує тінь до тексту. Параметри: - **30px**: Горизонтальне зміщення (переміщає тінь вправо). - **10px**: Вертикальне зміщення (переміщає тінь вниз). - **10px**: Радіус розмиття (м’які краї тіні). - **gray**: Колір тіні.  ## 3. `h2`  Тег `h2` визначає другий заголовок.  `color: rgb(0, 204, 255);`  - Встановлює колір тексту на яскравий циан за допомогою значень RGB: - **0**: Інтенсивність червоного. - **204**: Інтенсивність зеленого. - **255**: Інтенсивність синього.  ## Фінальний результат  Коли буде виконано вищезазначений код, ось що ви побачите:  - **Контейнер** з градієнтним фоном (фіолетовий до рожевого) і **синьою тінню**. - **Заголовок першого рівня** (`h1`) з чорним текстом і сірою тінню, яка виглядає зміщеною та злегка розмита. - **Заголовок другого рівня** (`h2`) з яскравим циановим текстом.  ![pic](https://drive.javascript.org.ua/d541ce042c1_6afZz_P9GQ_w5dIPChEvMQ_png)



Перекладено з: [CSS_001_Styling Basics with HTML and CSS](https://medium.com/@staytechrich/css-001-styling-basics-with-html-and-css-35b1f7d6f2da)