Создайте карточку с CSS

Условие

Создайте карточку товара (изображение, название, цена, кнопка) и подключите к странице внешний файл styles.css в <head>.

Требования

В <head> есть <link rel="stylesheet" href="styles.css">
Карточка обёрнута в <div class="card">
Внутри карточки есть img, заголовок, цена и кнопка
Никаких inline-стилей через атрибут style

Начальный код

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Карточка товара</title>
</head>
<body>
</body>
</html>

▶ Открыть в HTML Editor

Подсказки

link в head подключает CSS ещё до того, как браузер начнёт отрисовывать body — это правильное место для него.
Класс card затем стилизуется в styles.css, а не через style="..." на самом элементе.

Показать решение

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <title>Карточка товара</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="card">
    <img src="product.jpg" alt="Беспроводные наушники">
    <h2>Беспроводные наушники</h2>
    <p class="price">1299 руб</p>
    <button>Купить</button>
  </div>
</body>
</html>

Похожие инструменты

HTML Редактор онлайн

Онлайн HTML редактор с подсветкой синтаксиса, нумерацией строк и живым превью. Без регистрации, без сервера.

Подключение CSS

Как подключить внешний CSS-файл или задать стили прямо в head.

CSS Минификатор

Сожмите CSS файл онлайн, увидьте размер до/после и процент экономии. Без сервера.