Практична № 3. Стильове оформлення сторінок із CSS

Опрацюйте відео-урок та теоретичний матеріал:

Створивши сторінку, її інформаційне та змістове наповнення, можна приступати до дизайну – тобто графічного оформлення цієї сторінки. За стандартом HTML таке оформлення задається через стилі, а точніше каскадні аркуші стилів.

Стиль – це набір правил оформлення та форматування, який можна застосувати до різних елементів сторінки. Каскадні аркуші стилів (CSS, Cascading Style Sheets) містять опис формату частини або всього тексту. В одному документі можна описати кілька аркушів, браузер використовуватиме їх каскадом, відповідно до пріоритету цих описів.

Стиль можна задавати для конкретного тега, для стандартних тегів у документі чи кількох документах, а також для ідентифікаторів та класів, створених для проекту.

Таким чином виділяється зовнішній аркуш стилів, внутрішній, вбудований стиль тегу та стилі класів та ідентифікаторів. Вони застосовуються по порядку, і найменший пріоритет мають зовнішні аркуші стилів, а найвищий – стилі конкретних тегів.

Стилі визначають форматування, а також розташування елементів у документі. Так, можна змінити вигляд усіх заголовків чи вирівнювання усіх зображень документа. Крім того можна задати певне оформлення для горища чи підвалу сайту, навігаційної панелі тощо.

Приклади стильових ефектів:

background – колір тла;
font-family – вид шрифта;
font-size – розмір шрифта;
color – колір шрифта;
text-decoration – оздоблення тексту;
font-weight – жирність шрифта;
text-align - вирівнювання тексту;
padding - внутрішній відступ між вмістом елемента та його рамкою;
margin-top - зовнішній відступ зверху елемента;
margin-top – відстань від верхнього рядка;
line-height – висота рядка.

Довідник стилів: https://css.in.ua/

Якщо для однакових елементів потрібна різна стилізація, то використовують класи або ідентифікатори.

Практична робота: Стильове оформлення сторінок із використанням CSS
Ви вже створили свої перші сторінки на минулому уроці. Тепер до них потрібно додати оформлення із використанням CSS.

1. За посиланням: https://codepen.io/mawuena/pen/NWRQNay?editors=1100 - очистите вкладки.
2. У вкладку HTML додасте вашу інформацію з минулого сайту (виділено червоним - змінюєте на своє):

3. Далі на вкладку CSS додаєте готовий стиль (копіюєте звідси, але змініть HEX-коди кольорів на власні згенеровані):

body {
  margin: 0;
  font-family: sans-serif;
  background-color: #E0F7FA;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background-color: #1C5D99;
  color: white;
  text-align: center;
  padding: 15px 10px;
}

nav {
  display: flex;
  gap: 8px;
  padding: 10px;
}

nav a {
  flex: 1;
  background-color: #639FAB;
  color: white;
  text-align: center;
  padding: 10px 0;
  text-decoration: none;
  font-weight: bold;
  border-radius: 6px;
}

main {
  padding: 15px;
}

footer {
  background-color: #1C5D99;
  color: white;
  text-align: center;
  padding: 10px;
  margin-top: auto;
}

Скрін вашої роботи прикріпіть до цього завдання (має бути і стилі CSS, і вигляд самої сторінки)

Приклад як має бути (у вас буде ваша інформація і колірна гама)