1. HTML Yapısı: Alert mesajını içeren bir

   div

   elemanı oluşturulur 13.
2. Temel Stil:

   .alert

   sınıfı kullanılarak genel stiller tanımlanır; bu sınıf, padding, border-radius ve font-size gibi özellikleri içerir 1.
3. Özel Sınıflar:

   .success

   ,

   .warning

   ,

   .error

   gibi sınıflarla belirli arka plan, kenarlık ve metin renkleri atanır 1.
4. Mesaj Ekleme: Her alert kutusu, türüne uygun bir mesaj görüntüler 1.
5. Responsive Tasarım: Relative birimler ve scalable font boyutları kullanılarak alert'lerin farklı ekranlarda uyum sağlaması sağlanır 1.

.alert {
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: bold;
}

.success {
  color: #155724;
  background-color: #d4edda;
  border: 1px solid #c3e6cb;
}

.warning {
  color: #856404;
  background-color: #fff3cd;
  border: 1px solid #ffeeba;
}

.error {
  color: #721c24;
  background-color: #f8d7da;
  border: 1px solid #f5c6cb;
}
``` [1](https://www.geeksforgeeks.org/how-to-create-an-alert-message-box-using-css/).
Kopyala