Menu
CoddyTech

Thử thách ôn tập số 2

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

challenge icon

Thử thách

Dễ

Trong thử thách ôn tập thứ hai này, bạn sẽ áp dụng kiến thức về các thuộc tính tạo kiểu văn bản trong CSS để tái tạo một thiết kế cụ thể. Thử thách này sẽ kiểm tra khả năng kết hợp nhiều thuộc tính văn bản như color, font-family, font-size, font-weight, text-align và text-decoration để khớp với thiết kế đã cho. 

Bạn được cung cấp một tài liệu HTML có tiêu đề (<h1>), một đoạn văn (<p>), một liên kết (<a>) và một danh sách không có thứ tự (<ul>) gồm các mục danh sách (<li>). Nhiệm vụ của bạn là dùng các thuộc tính tạo kiểu văn bản đã học để định dạng những phần tử này sao cho khớp với thiết kế trong hình bên dưới:

Làm theo các bước sau:

  1. Viết quy tắc CSS áp dụng cho phần tử <h1>. Đặt color thành black, font-family thành "Times New Roman", Times, serif, font-size thành 48px, font-weight thành bold và text-align thành center.
  2. Viết quy tắc CSS áp dụng cho phần tử <p>. Đặt color thành gray, font-family thành Arial, Helvetica, sans-serif, font-size thành 18px và text-align thành center.
  3. Viết quy tắc CSS áp dụng cho phần tử <a>. Đặt color thành red và text-decoration thành none.
  4. Viết quy tắc CSS áp dụng cho tất cả phần tử <li>. Đặt color thành green, font-family thành "Courier New", Courier, monospace, font-size thành 25px và font-weight thành 600.

Tự làm thử

<html>
<head>
    <title>Recap Challenge #2</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph with a <a href="#">link</a>.</p>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>
</body>
</html>

Tất cả bài học trong Tạo kiểu với CSS

Tự luyện tập: Playground Web