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.
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:
- Viết quy tắc CSS áp dụng cho phần tử
<h1>. Đặtcolorthànhblack,font-familythành"Times New Roman", Times, serif,font-sizethành48px,font-weightthànhboldvàtext-alignthànhcenter. - Viết quy tắc CSS áp dụng cho phần tử
<p>. Đặtcolorthànhgray,font-familythànhArial, Helvetica, sans-serif,font-sizethành18pxvàtext-alignthànhcenter. - Viết quy tắc CSS áp dụng cho phần tử
<a>. Đặtcolorthànhredvàtext-decorationthànhnone. - Viết quy tắc CSS áp dụng cho tất cả phần tử
<li>. Đặtcolorthànhgreen,font-familythành"Courier New", Courier, monospace,font-sizethành25pxvàfont-weightthành600.
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
4Nền tảng về văn bản
Màu chữPhông chữCỡ chữĐộ đậm của chữCăn chỉnh văn bảnTrang trí văn bảnThử thách ôn tập số 1Thử thách ôn tập số 23Bộ chọn cơ bản
Giới thiệu về bộ chọnBộ chọn kiểuBộ chọn lớpBộ chọn IDBộ chọn nhómBộ chọn phổ quátThử thách về bộ chọn9Flexbox
Flexbox là gì?Hướng flexCăn chỉnh nội dungCăn chỉnh các phần tửCăn giữa hoàn hảoThử thách Flexbox12Kiến thức cơ bản về thiết kế đáp ứng
Thiết kế đáp ứng là gì?Thẻ meta viewportBố cục linh hoạtĐơn vị viewportKiến thức cơ bản về media queryHình ảnh linh hoạtTự luyện tập: Playground Web