Оригінальна публікація: External CSS Stylesheets – How to Link CSS to HTML and Import into Head

Вважається, що таблиці стилів CSS найкраще зберігати у зовнішньому файлі. А як додати CSS до файлу HTML?

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

Як додати файл CSS до файлу HTML

Ви можете додати файл CSS до свого файлу HTML, додавши елемент link всередині елемента head свого файлу HTML, ось так:

<!DOCTYPE html>
  <html>
    <head>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
    
    </body>
</html>

Елемент link має багато застосувань, тому важливо вказати відповідні атрибути, щоб імпортувати зовнішню таблицю стилів CSS. Зараз ми розглянемо декілька найважливіших атрибутів.

Атрибут rel

Перший з двох необхідних атрибутів — атрибут rel. Цей атрибут використовують, щоб повідомити браузеру про стосунки з імпортованим файлом.

Напишіть rel="stylesheet", аби повідомити браузер, що ви імпортуєте таблицю стилів.

Атрибут href

Другим необхідним атрибутом є href, який вказує файл для імпорту.

Файли CSS та HTML часто знаходяться в одній папці. У такому разі можна написати href="style.css".

Якщо файли CSS та HTML знаходяться в різних папках, вам потрібно написати шлях від файлу HTML до файлу CSS.

Наприклад, часто файл CSS знаходиться в папці, яка є братською для файлу HTML:

project --- index.html
            css ---------- style.css

У такому разі шлях потрібно написати ось так: "css/styles.css".

Атрибут type

<link rel="stylesheet" href="style.css" type="text/css">

Атрибут type використовують, щоб визначити тип змісту. Для таблиці стилів це буде text/css. Але оскільки css є єдиною використаною мовою таблиць стилів, його краще не використовувати.

Атрибут media

<link rel="stylesheet" href="style.css" media="screen and (max-width: 600px)">

Атрибут media не видно в прикладі. Це додатковий атрибут, за допомогою якого можна вказати, коли імпортувати певну таблицю стилів. Його значенням повинен бути медіатип або медіазапит.

Він може бути корисним, якщо ви хочете розділити стилі для різних пристроїв і розмірів екрана в окремих файлах. Вам потрібно буде імпортувати кожен файл CSS із власним елементом link.

Ви можете переглянути ці публікації (або інші джерела) про медіазапити, щоб дізнатись більше про значення атрибута:

Висновок

У цій публікації ви дізналися, як додати зовнішню таблицю стилів до вебсторінки за допомогою елемента link та атрибутів href й rel.

Ви також дізналися, що можна імпортувати декілька таблиць стилів і використовувати атрибут media, щоб визначити, коли кожну з них потрібно застосувати.

Розважайтесь над створенням вебсторінок!