復習チャレンジ

CoddyのHTMLジャーニー「Styling with CSS」セクションの一部 — レッスン 38/76。

チャレンジ

簡単

この復習チャレンジでは、width、height、margin、padding、border を使用して、本の情報ボックスをスタイリングします。これにより、コンテンツの構造化、余白の作成、そしてクリーンなレイアウトのためのボーダーの適用能力をテストします。

3つの div 要素が含まれるHTMLドキュメントが提供されており、それぞれに book name（書名）、author（著者）、short description（短い説明）が記載されています。あなたのタスクは、width、height、margin、padding、border を使用してこれらのボックスをスタイリングすることです。

以下の手順に従ってください：

クラス "book" を持つすべての要素をターゲットにするクラスセレクターを使用して、CSSルールを記述します。
各ブックボックスの width を 350px に、height を 150px に設定します。
各ブックボックスの内側に 15px の padding を追加し、コンテンツの周囲にスペースを作成します。
各ブックボックスに、太さ 3px、色は black の solid border を設定します。
各ブックボックスの間に 20px の margin を追加して、間隔を空けます。

自分で試してみよう

<html>
<head>
    <title>Book collection</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="book">
        <h3>Harry Potter and the Sorcerer's Stone</h3>
        <p>Author: J.K. Rowling</p>
        <p>Description: A young wizard's journey to defeat a dark wizard.</p>
    </div>

    <div class="book">
        <h3>The Great Gatsby</h3>
        <p>Author: F. Scott Fitzgerald</p>
        <p>Description: A tragic story of wealth, love, and betrayal in the 1920s.</p>
    </div>

    <div class="book">
        <h3>1984</h3>
        <p>Author: George Orwell</p>
        <p>Description: A dystopian novel about totalitarianism and surveillance.</p>
    </div>
</body>
</html>