Thiệp mời đám cưới

Thuộc phần Tạo kiểu với CSS trong hành trình HTML của Coddy. Bài học 75 trên 76.

Thử thách

Dễ

Trong thử thách này, chúng ta sẽ dùng CSS để định kiểu thiệp mời, tập trung vào bố cục, kiểu chữ và khoảng cách. Bạn sẽ áp dụng các thuộc tính như phần đệm, lề, đường viền và màu sắc để tái tạo thiết kế trong hình bên dưới.

Bạn được cung cấp một tài liệu HTML có một div với lớp .invitation, tiêu đề h2 và một số đoạn văn. Nhiệm vụ của bạn là định kiểu thiệp cưới này từng bước bằng CSS.

Hãy làm theo hướng dẫn cẩn thận và áp dụng từng kiểu theo thứ tự.

Bước 1: Định kiểu phần thân

Chọn phần tử body.
Đặt họ phông chữ thành "Times New Roman", serif.
Dùng các thuộc tính Flexbox để căn giữa thiệp mời một cách chính xác.
Đặt chiều cao thành 100vh.
Đặt màu nền sáng (#f8f5f0).

Bước 2: Định kiểu thiệp mời

Chọn lớp .invitation.
Đặt màu nền trắng (#fff).
Thêm đường viền 2px solid gold.
Thêm phần đệm (20px).
Đặt chiều rộng thành 350px.
Căn giữa văn bản.
Thêm bán kính đường viền để bo tròn các góc.
Thêm bóng đổ nhẹ bằng box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1).

Bước 3: Định kiểu văn bản

Chọn các phần tử h2.
- Đặt màu văn bản thành goldenrod.
- Đặt cỡ chữ thành 22px.
Chọn lớp .names.
- Dùng phông chữ viết tay ("Dancing Script", cursive).
- Đặt cỡ chữ thành 26px.
Chọn tất cả phần tử p.
- Đặt cỡ chữ thành 18px.
- Đổi màu văn bản thành #5a4d3f.

Tự làm thử

<html>
    <head>
        <title>Invitation Card</title>
        <link rel="stylesheet" href="styles.css">  
    </head>
    <body>
        <div class="invitation">
            <h2>Wedding Invitation</h2>
            <p class="names">Emma & James</p>
            <p class="message">Together with their families, invite you to celebrate their wedding.</p>
            <p class="detail"><strong>Date:</strong> Saturday, June 15, 2025</p>
            <p class="detail"><strong>Time:</strong> 4:00 PM - Reception to follow</p>
            <p class="detail"><strong>Venue:</strong> Rosewood Garden, Lakeview</p>
            <p class="note">Please RSVP by May 20th</p>
            <p class="footer">We look forward to celebrating with you!</p>
        </div>
    </body>
</html>