How do I create an alert box in CSS?

Style a div with padding, a left border in the state colour, and a matching tinted background. Use one base class for the shape and a modifier class per state so success, warning and error share the same layout.

How do I make an alert dismissible?

Add a close button inside the alert and remove or hide the element on click. Give the button an aria-label such as "Close", since an icon-only button reads as nothing at all to a screen reader.

What does the loading="lazy" attribute on an img tag do?

Defers loading the image until it nears the viewport

Compresses the image file size automatically

Loads a low-resolution placeholder permanently instead of the full image

What is the purpose of the srcset attribute on an image?

Lets the browser pick the best image size for the display

Sets a fallback image if the main src fails to load

Defines the alt text for multiple languages

How can multi-line text be truncated with an ellipsis after a set number of lines, using CSS alone?

The -webkit-line-clamp property with display: -webkit-box

Multi-line truncation is impossible without JavaScript

Setting max-height alone automatically adds an ellipsis

In a 'read more / read less' content toggle, what typically changes when it's clicked?

A class or style toggles between truncated and full content

The browser fetches a new page for the full content

The text permanently disappears once it's collapsed

What's a key benefit of using the picture element over a plain img?

It lets you serve different images based on screen size

It automatically adds captions to every image

It is required for any image to display on a page

How to Create an Alert Message in CSS

Build a dismissible alert/banner that communicates a status message (success, warning, error, or info) with an appropriate color and an optional close button.

What an alert communicates

An alert (also called a banner or a message) is a short, prominent block of text that tells the visitor something happened: a form saved successfully, a payment failed, a maintenance window is coming up. Because alerts interrupt the normal flow of the page, they lean on color, an icon, and sometimes a border to be noticed immediately, and they're usually dismissible so they don't linger once read.

A good alert component supports a small set of variants - typically success, error, warning, and info - that share the same structure but swap colors. Building it with one base class plus a modifier class per variant keeps the CSS from repeating itself.

Example: alert with variants and a close button

<!DOCTYPE html>
<html>
<head>
<style>
  .alert {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 8px;
    border-left: 4px solid;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    margin-bottom: 12px;
  }
  .alert-message {
    flex: 1;
  }
  .alert-close {
    background: none;
    border: none;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    opacity: 0.6;
  }
  .alert-close:hover {
    opacity: 1;
  }

  .alert-success { background: #eafaf1; border-color: #2f9e5e; color: #1e6b40; }
  .alert-error   { background: #fdecec; border-color: #d9463f; color: #9c2b26; }
  .alert-warning { background: #fff8e6; border-color: #e0a52c; color: #91660f; }
  .alert-info    { background: #eaf3fd; border-color: #2f7dd9; color: #1d5aad; }

  .alert.is-hidden {
    display: none;
  }
</style>
</head>
<body>

<div class="alert alert-success" id="demo-alert">
  <span class="alert-message">Your changes have been saved.</span>
  <button class="alert-close" aria-label="Dismiss message">&times;</button>
</div>

<script>
  document.querySelectorAll('.alert-close').forEach(function (btn) {
    btn.addEventListener('click', function () {
      btn.closest('.alert').classList.add('is-hidden');
    });
  });
</script>

</body>
</html>

`btn.closest('.alert')` walks up from the clicked close button to the nearest ancestor with the `.alert` class, so the same click handler works no matter how many alerts are on the page - each button only ever hides its own alert, never someone else's.

Give the alert role="alert" (or role="status" for less urgent messages) so screen readers announce it as soon as it appears.
Never rely on color alone to distinguish variants - pair each color with a distinct icon or the word 'Error'/'Success' in the text.
border-left plus a light background tint is usually enough contrast; avoid a solid, saturated background that makes the text harder to read.

Deciding when an alert should auto-dismiss

Not every alert should behave the same way. A transient success or info message ("Link copied", "Draft saved") is safe to remove automatically after a few seconds, because missing it isn't costly - the action already succeeded. An error or warning alert usually should not auto-dismiss: the visitor may need time to read it, decide on a fix, and act, so leave those on screen until the close button is clicked or the underlying problem is resolved.

Example: a transient, auto-dismissing success toast

<!DOCTYPE html>
<html>
<head>
<style>
  .toast {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: #1e6b40;
    color: #fff;
    padding: 10px 16px;
    border-radius: 6px;
    font-family: system-ui, sans-serif;
    font-size: 0.9rem;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .toast.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
</style>
</head>
<body>

<div class="toast" id="toast" role="status">Link copied to clipboard.</div>
<button id="copy-btn">Copy link</button>

<script>
  var toast = document.getElementById('toast');

  document.getElementById('copy-btn').addEventListener('click', function () {
    toast.classList.add('is-visible');

    setTimeout(function () {
      toast.classList.remove('is-visible');
    }, 2500);
  });
</script>

</body>
</html>

role="status" tells assistive technology to announce the toast politely as soon as it appears, without interrupting whatever the visitor is currently doing - a good fit for low-urgency confirmations, as opposed to role="alert" which announces immediately and more assertively for messages the visitor must not miss.

Variant	Typical use	Suggested color cue
Success	Action completed correctly	Green
Error	Something failed and needs attention	Red
Warning	Caution, but not a hard failure	Amber/orange
Info	Neutral, informational message	Blue

Note: If an alert is inserted into the page after load (for example, following a form submission), place it inside a container with aria-live="polite" already in the markup. Adding role="alert" to an element that didn't exist when the page loaded is not reliably announced by every screen reader.

Exercise: Content Display

Which CSS properties together truncate overflowing text into a single line with an ellipsis?

Frequently Asked Questions

How do I create an alert box in CSS?: Style a div with padding, a left border in the state colour, and a matching tinted background. Use one base class for the shape and a modifier class per state so success, warning and error share the same layout.
How do I make an alert dismissible?: Add a close button inside the alert and remove or hide the element on click. Give the button an aria-label such as "Close", since an icon-only button reads as nothing at all to a screen reader.