Menu
Coddy logo textTech

Özet Meydan Okuması

Coddy'nin HTML Journey'sinin CSS Mastery bölümünün bir parçası — ders 6 / 43.

challenge icon

Görev

Kolay

CSS seçicilerini descendant (torun), child (çocuk), adjacent sibling (bitişik kardeş) ve general sibling (genel kardeş) birleştiricilerini kullanarak nasıl birleştireceğinizi öğrendiniz. Şimdi her şeyi pratiğe dökme zamanı!

  1. .rooms sınıfına sahip <div> içindeki doğrudan çocuk (direct children) olan tüm <p> öğelerini turkuaz mavisi (#40e0d0) kullanarak stillendirin.
  2. .facilities sınıfına sahip <div> öğesinin torunları (descendants) olan tüm <p> öğelerini deniz köpüğü yeşili (#2e8b57) kullanarak stillendirin.
  3. Bir <div> öğesinden sonra gelen her <p> öğesini kumlu bej (#f4a300) ile stillendirin.

Kendin dene

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

CSS Mastery bölümündeki tüm dersler