Как сделать css файл?

Создайте обычный текстовый файл с расширением .css, например style.css, положите его рядом с html-страницей или в отдельную папку css, а затем подключите в head html-документа через тег link с атрибутами rel равным stylesheet и href, указывающим путь до файла, например css слэш style точка css, после этого все стили, написанные в этом файле, применяются ко всей странице, и редактировать их можно в любом текстовом редакторе без специальных программ, главное следить чтобы путь в href совпадал с реальным расположением файла, иначе стили просто не подгрузятся и страница останется без оформления, при этом браузер об этом никак явно не предупредит, кроме пустого запроса в вкладке Network инструментов разработчика.

• Открываешь любой редактор, хоть блокнот, хоть VS Code, не важно.
• Сохраняешь файл с расширением .css, не .txt, не .doc, именно .css.
• Кладёшь рядом с index.html или в папку css, как удобнее.
• В html внутри head пишешь строку с link, rel равен stylesheet, href равен пути до файла.
• Путь важен: если файл в подпапке css, пиши css/style.css, а не просто style.css.
• Проверяешь через вкладку Network в devtools, что файл реально загрузился, а не 404.
• Если стили не применяются, но файл грузится, скорее всего перепутан селектор или файл кэшируется браузером, жёстко обнови страницу через ctrl shift r.
• Один css файл можно подключить к нескольким html страницам сразу, это и есть смысл выносить стили отдельно, а не пихать их в каждый файл через style внутри тега.
• Для больших проектов файлы обычно разбивают по смыслу, вроде header.css, footer.css, buttons.css, а потом либо подключают все ссылками, либо собирают сборщиком вроде vite в один файл.
• Порядок подключения имеет значение, стили ниже по списку перебивают те что выше, если селекторы одинаковой силы.
• Если файлов несколько и они конфликтуют друг с другом, проще всего смотреть вкладку Elements в devtools, там видно какое именно правило и из какого файла победило для конкретного элемента.
• Не подключайте css внутри тега body, спецификация ожидает link только в head, в некоторых браузерах это может привести к задержке применения стилей.

я сначала файл сохранил как style.css.txt, винда расширение спрятала, час разбирался почему ничего не работает