Как сделать css в html

kirilljsx

А я продолжаю рубрику для новичков! И на этот раз мы поговорим о том как сделать css в html

И так у нас есть с вами два основным способа, начнем с первого и самого примитивного.

Создадим файл index.html, и наполним его первоначальным:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<body>
    <h1>Привет мир!</h1>
</body>
</html>

Готово, вот наш html, а теперь идем дальше! Для того что бы добавить css мы можем:

Прописать тег прямо внутри самого файла index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Документ</title>
</head>
<!-- пишем пишем css тут-->
<style>
    h1 {
      color: red;
    }
</style>
<!-- пишем пишем css тут-->
<body>
    <h1>Привет мир!</h1>
</body>
</html>

Воуля, тестируем и открывам наш файл index.html в браузере и видим следующее:

Снимок экрана 2025-06-10 в 07.43.48.png

Способ второй будет куда интереснее и естественно правильнее, так как это разделит код на необходимые файлы, создадим с вами в той же папке где расположен index.html файл - style.css

Вот как показано на скриншоте:
Снимок экрана 2025-06-10 в 07.45.42.png

Далее в самом файле index.html нам необходимо указать что мы берем стилизацию из другого файла - style.css прописываем ссылку на файл внутри теги <head>, а старый код css переносим в наш новый файл:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- Прописываем ссылку на наш файл style.css -->
    <link href="./style.css" rel="stylesheet">
    <!-- Прописываем ссылку на наш файл style.css -->

    <title>Документ</title>
</head>
<!-- Убрали наш код css-->
<body>
    <h1>Привет мир!</h1>
</body>
</html>

В самом файле style.css не нужно использовать какие либо теги, мы просто вставляем код как он есть:

h1 {
      color: red;
    }

Воуля! Теперь вы знаете как использовать css в html!

Хотите больше примеров для новичков по html? Тогда регистрируйтесь на нашем форуме и оставляйте комментарии к посту, я с удовольствием вам помогу и подскажу

И не забывайте подписывать на мой ТГ канал:

Кирилл Дворянинов

Обо всем и не о чем сразу 👨🏻‍💻

Telegram (t.me)