08. Что такое CSS

Ты уже знаешь, что HTML делает структуру сайта — как скелет. А теперь познакомься с CSS — это язык, который делает сайт красивым!

CSS — это как одежда для HTML. Он не меняет смысл, но делает всё ярче, стильнее и аккуратнее!

Что умеет CSS

С помощью CSS можно:
  • Изменять цвета текста и фона;
  • Задавать шрифт и размер текста;
  • Выравнивать элементы на странице;
  • Добавлять рамки, тени и отступы;
  • Создавать настоящие анимации!

Пример без CSS 


<h1>Мой сайт</h1>
<p>Привет! Это просто текст.</p>

Результат: чёрный текст на белом фоне. Немного скучно, правда?

Пример с CSS 


<h1 style="color: blue; text-align: center;">Мой сайт</h1>
<p style="font-size: 20px; color: green;">Теперь стало ярче!</p>

Теперь страница оживает! Но писать стили прямо в теги — не очень удобно. Поэтому CSS выносят в отдельный файл.

Как подключить CSS

1️⃣ Создай рядом с index.html новый файл под названием style.css. 2️⃣ Внутри него напиши: 

h1 {
  color: blue;
  text-align: center;
}
p {
  color: darkgreen;
  font-size: 18px;
}

3️⃣ Теперь подключи его в HTML — в блоке <head>: 


<link rel="stylesheet" href="style.css">

Готово! Теперь браузер будет использовать файл CSS, чтобы сделать твою страницу красивой.

Как это работает

Каждое правило CSS состоит из трёх частей:
  • Селектор — кому применять (например, h1 или p).
  • Свойство — что менять (например, color).
  • Значение — на что менять (например, blue).

Пример: 


p {
  color: red;
}
Это значит: «всем тегам p (абзацам) сделай текст красным»

Попробуй сам

Создай в HTML такой код: 

<h1>Мой сайт про котиков </h1>
<p>Я люблю кошек, потому что они милые и пушистые!</p>

А в style.css добавь: 


body {
  background-color: lightyellow;
  font-family: Arial, sans-serif;
}
h1 {
  color: purple;
  text-align: center;
}
p {
  color: darkorange;
  font-size: 20px;
  text-align: center;
}
Теперь у тебя получится настоящий тёплый сайт — будто открытка с котиком

Совет от профи

Хочешь быстро проверить результат? Просто сохрани файл и обнови страницу в браузере (F5). Браузер сразу покажет твои изменения — как волшебство!

Мини-проект

Создай свой сайт с названием Моё хобби. Добавь туда:
  • Заголовок с красивым цветом;
  • Абзац с описанием твоего хобби;
  • Фон страницы (например, голубой или зелёный);
  • Любой шрифт, например Comic Sans или Verdana;

Пример: 


body {
  background-color: lightblue;
  color: #333;
  font-family: 'Comic Sans MS';
}
h1 {
  color: darkred;
  text-shadow: 2px 2px 5px pink;
}

Забавный факт

CSS расшифровывается как Cascading Style Sheets — «Каскадные таблицы стилей». Слово «каскадные» значит, что стили накладываются один на другой, как слои краски.

Главное запомни

  • CSS отвечает за внешний вид сайта — цвета, шрифты, отступы и фон.
  • Файл со стилями имеет расширение .css
  • Он подключается к HTML через тег <link> внутри <head>.
  • Селектор выбирает элемент, а свойства управляют его стилем.

Мини-тест

  • Для чего нужен CSS?
  • Как подключить style.css к странице?
  • Что делает свойство color?
Следующий урок → Цвета, шрифты и фон