Menu
CoddyTech

Thử thách ôn tập

Thuộc phần Thành thạo CSS trong hành trình HTML của Coddy. Bài học 6 trên 43.

challenge icon

Thử thách

Dễ

Bạn đã học cách kết hợp các bộ chọn CSS bằng bộ kết hợp hậu duệ (descendant), con trực tiếp (child), anh em liền kề (adjacent sibling) và anh em tổng quát (general sibling). Giờ là lúc áp dụng tất cả vào thực hành!

  1. Định dạng tất cả phần tử <p> là con trực tiếp bên trong <div> có lớp .rooms bằng màu xanh ngọc lam (#40e0d0).
  2. Định dạng tất cả phần tử <p> là hậu duệ của <div> có lớp .facilities bằng màu xanh lá bọt biển (#2e8b57).
  3. Định dạng mọi phần tử <p> đứng sau một phần tử <div> bằng màu be cát (#f4a300).

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <title>Recap Challenge</title>
    <style>
        /* Your CSS solution here */
        
    </style>
</head>
<body>
    <section>
  		<h1>Welcome to Paradise Resort</h1>
  
  		<div class="rooms">
    		<h2>Ocean View Rooms</h2>
    		<p>Room 101</p>
    		<p>Room 102</p>
  		</div>

  		<div class="facilities">
    		<h2>Resort Facilities</h2>
    		<div>
      			<p>Infinity Pool</p>
      			<p>Spa & Wellness Center</p>
    		</div>
    		<p>Beach Access</p>
  		</div>

  		<p>Beachfront Restaurant</p>
  		<p>Sunset Bar</p>
  		
	</section>
</body>
</html>

Tất cả bài học trong Thành thạo CSS

Tự luyện tập: Playground Web