Після встановлення шаблону у вебмайстрів-початківців із часом виникає закономірне запитання: як змінити колір, оформлення заголовків, додати об’єм або збільшити їхній шрифт. Багатьох новачків це ставить у глухий кут, адже незрозуміло, що і де шукати.
Звісно, можна заглибитися у вивчення всіх тонкощів сайтобудування, але якщо поки що великих перспектив не видно, виникає ще одне закономірне запитання: чи справді вам це потрібно?
На освоєння основ вебмайстерності піде чимало часу. А час — це гроші. Тому якщо вам потрібно лише трохи скоригувати окремі елементи шаблону і ви не знаєте, як знайти потрібний HTML-код незалежно від платформи сайту, ця стаття саме для вас.
HTML і CSS — взаємозв’язок
Насправді тему можна було б назвати приблизно так: «Як редагувати CSS-код». Але почнемо з HTML, а завершимо CSS. Річ у тім, що коли потрібно змінити колір, шрифт сайту чи оформлення інших елементів, шлях зазвичай приводить до CSS-файлів.
Для початку визначимося з двома поняттями:
— HTML-код є основою, на якій створюється сайт. Саме завдяки йому браузер розуміє, які елементи та в якому порядку виводити на ту чи іншу сторінку.
— CSS-код — це мова стилів, що відповідає за зовнішній вигляд вебсторінок. Саме його зазвичай потрібно редагувати, коли необхідно змінити оформлення сайту.
Отже, якщо потрібно змінити, наприклад, колір заголовка статті або пунктів меню, редагувати слід один із CSS-файлів. Це важливо зрозуміти ще на початковому етапі самостійного внесення змін.
Де знаходиться HTML-код сторінки
Не приховуватиму: коли я лише знайомився з принципами сайтобудування, був не просто «чайником», а справжнім іржавим самоваром 
. Тому у вас, як і в мене, усе обов’язково вийде.
Повернімося до теми редагування коду сторінки. Спочатку потрібно подивитися HTML-код. Я покажу це на прикладі браузера Opera, оскільки переважно працюю саме в ньому. Якщо ви користуєтеся іншим браузером, не поспішайте закривати сторінку: принцип перевірки майже скрізь однаковий.
Як змінити стиль заголовка
В одній із попередніх статей я розповідав, «Як прибрати посилання із заголовка Joomla», а сьогодні покажу, як підправити оформлення й зробити його привабливішим.
Припустімо, потрібно змінити колір і розмір заголовка статті. Для цього натискаємо на ньому правою кнопкою миші та в меню вибираємо перегляд або інспектування елемента. Після цього відкриється панель розробника з HTML-кодом і стилями. Таким способом можна переглянути та підправити практично кожен елемент шаблону.
Далі зверніть увагу на скриншот.
У його верхній частині виділено HTML-код, що відповідає за виведення заголовка H1. Під час перевірки відповідний елемент підсвічується. Нам же потрібно звернути увагу на нижню частину панелі, де показані CSS-стилі. Залежно від шаблону назва CSS-файлу може відрізнятися, але часто це style.css або template.css.
З файлом визначилися, але як дізнатися, де він знаходиться? Наведіть курсор на назву style.css — біля неї буде показаний шлях до файлу. Там само зазвичай вказується і номер рядка, який потрібно відредагувати.
Важливий момент! Перед внесенням змін зробіть резервну копію сайту — про всяк випадок 
Деякі властивості CSS
Нижче наведу кілька властивостей, за допомогою яких можна вносити зміни та експериментувати зі стилями.
— font-size — зміна розміру тексту.
— text-decoration — залежно від значення відповідає, зокрема, за підкреслення або перекреслення тексту.
— font-family — сімейство шрифтів.
— font-weight — насиченість шрифту.
— color — колір тексту.
Якщо після редагування нічого не змінилося, очистіть кеш браузера. Як бачите, щоб змінити зовнішній вигляд заголовків і освіжити дизайн сайту, найчастіше потрібно підправити CSS-код, а не HTML.
Дякую за увагу і до зустрічі на сторінках StimylRosta.
