Let's break down a gradient banner rule by rule, using the internal method's version.
.banner { background: linear-gradient(90deg, #1E2A5A, #3E5AA6); color: white; padding: 24px; }. The background shorthand here holds a linear-gradient() function directly 90deg sets the flow direction to left-to-right, then #1E2A5A and #3E5AA6 are the two colors it blends between, starting dark navy on the left and ending lighter blue on the right.
color: white is set deliberately alongside the gradient since the background is a dark blue tone, black or dark text would be nearly invisible on it, so white text ensures strong contrast and readability.
padding: 24px gives the text room to breathe inside the banner instead of touching its edges directly without this, the text would look cramped right against the gradient's boundary.
The HTML side is just <div class="banner">Gradient banner</div> one class name connects this plain div to the entire visual rule. If you reused class="banner" on ten different divs across the site, every one of them would instantly get this exact same gradient, color, and padding, all from one rule.