# Как правильно подключить стили CSS в HTML документ?
Стили CSS играют важную роль в оформлении веб-страниц, делая их более привлекательными и удобными для пользователей. Для того чтобы стили были применены к HTML документу, необходимо правильно подключить CSS файл. Ниже описаны основные способы подключения стилей CSS к HTML документу:
1. **Внешний CSS файл**:
Самый распространенный и рекомендуемый способ подключить стили CSS - использовать внешний CSS файл. Для этого необходимо создать отдельный файл с расширением ".css", содержащий CSS правила, и затем подключить его к HTML документу с помощью тега `<link>` внутри тега `<head>`:
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph with styled text.</p>
</body>
</html>
```
2. **Встроенные стили CSS**:
Можно также задать стили напрямую внутри HTML документа с помощью тега `<style>` внутри тега `<head>`. Этот способ удобен, если нужно определить стили только для определенной страницы:
```html
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
color: blue;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
<p>This is a paragraph with styled text.</p>
</body>
</html>
```
3. **Inline стили CSS**:
Если нужно применить стили непосредственно к определенному элементу, можно использовать атрибут `style` прямо в теге элемента:
```html
<!DOCTYPE html>
<html>
<body>
<h1 style="color: red;">Welcome to my website</h1>
<p style="font-size: 16px;">This is a paragraph with styled text.</p>
</body>
</html>
```
Выбор способа подключения стилей CSS зависит от конкретной задачи и уровня гибкости и масштабируемости, которую вы хотите достичь. Однако наиболее распространенным и удобным способом остается подключение внешнего CSS файла с помощью тега `<link>`, так как это позволяет отделить структуру документа от его оформления, что улучшает обслуживаемость и переиспользование стилей.