تحدي المراجعة

جزء من قسم Styling with CSS في رحلة HTML على Coddy — الدرس 38 من 76.

التحدي

سهل

في تحدي المراجعة هذا، ستستخدم width، وheight، وmargin، وpadding، وborders لتنسيق صناديق معلومات الكتب. سيختبر هذا قدرتك على هيكلة المحتوى، وإنشاء التباعد، وتطبيق الحدود للحصول على تخطيط منظم.

لقد تم تزويدك بمستند HTML يحتوي على ثلاثة أقسام div، كل منها يحتوي على اسم الكتاب، والمؤلف، ووصف قصير. مهمتك هي تنسيق هذه الصناديق باستخدام width، وheight، وmargin، وpadding، وborders.

اتبع الخطوات أدناه:

اكتب قاعدة CSS باستخدام محدد فئة (class selector) يستهدف جميع العناصر التي تحمل الفئة "book".
اضبط الـ width لكل صندوق كتاب على 350px والـ height على 150px.
أضف padding بمقدار 15px داخل كل صندوق كتاب لإنشاء مساحة حول المحتوى.
اضبط solid border بعرض 3px ولون black لكل صندوق كتاب.
أضف margin بمقدار 20px بين كل صندوق كتاب لتباعدها عن بعضها البعض.

جرّب بنفسك

<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>