- Inline-стили – через атрибут
style:
<div style="color: red; font-size: 16px;">Текст</div>
- Тег
<style> – внутри HTML:
<style>
.text { color: blue; }
</style>
<p class="text">Текст</p>
- Внешний CSS – через
<link>:
<link rel="stylesheet" href="styles.css">
- CSS-модули – для изоляции стилей в компонентах (React/Vue):
import styles from './Component.module.css';
<div className={styles.header}>...</div>
- CSS-in-JS – например, styled-components:
const Button = styled.button`
background: ${props => props.primary ? 'blue' : 'gray'};
`;
- CSS-препроцессоры (Sass/Less):
$primary: #333;
.header { color: $primary; }
- CSS-фреймворки (Bootstrap, Tailwind):
<button class="btn btn-primary">Кнопка</button>
- Атрибут
class – для применения готовых стилей.