1. HTML Yapısı: Bilgilendirme kutusunu içeren bir

   p

   etiketi oluşturun ve bu etikete bir sınıf ekleyin 2.

<p class="notice">Bilgilendirme metni</p>
Kopyala

2. CSS Stilleri: Kutuya arka plan rengi ve kenarlık ekleyin 23.

.notice {
  background-color: #EFEFEF;
  border: 3px solid #444;
}
Kopyala

3. İç Boşluk ve Dış Boşluk: Metin ve kutu için nefes alacak bir alan sağlamak amacıyla

   padding

   ve

   margin

   ekleyin 23.

.notice {
  padding: 1rem;
  margin: 2rem 0;
}
Kopyala

4. Ek Özellikler: Kutuya ek mesajlar veya simgeler eklemek için

   ::before

   sözde sınıfını kullanabilirsiniz 2.

.notice::before {
  content: "NOTE";
  background: #AACCFF;
  width: 5rem;
  display: block;
  text-align: center;
}
Kopyala