Sfida di ripasso n. 1

Fa parte della sezione Stilizzare con CSS del percorso HTML di Coddy. Lezione 29 di 76.

Sfida

Facile

Ora che hai imparato diverse tecniche per applicare stili al testo e agli sfondi usando CSS, è il momento di mettere alla prova le tue conoscenze con una sfida completa. Applicherai ciò che hai imparato su colori, codici esadecimali, valori RGB e trasparenza con RGBA per creare un design specifico.

Ti viene fornito un documento HTML con un'intestazione (<h1>), un paragrafo (<p>) e un elemento div (<div>). Il tuo compito è usare le proprietà di stile del testo e dello sfondo che hai imparato per applicare uno stile a questi elementi in modo che corrispondano al design mostrato nell'immagine qui sotto:

Segui i passaggi qui sotto:

Scrivi una regola CSS che selezioni l'elemento <h1>. Imposta color su white, background-color su #000080 (blu navy) e text-align su center.
Scrivi una regola CSS che selezioni l'elemento <p>. Imposta color su #FFFFFF (bianco), background-color su rgba(0, 0, 0, 0.5) (nero semitrasparente) e font-size su 18px.
Scrivi una regola CSS che selezioni l'elemento <div>. Imposta background-color su rgba(237, 170, 26, 1) (giallo dorato) e color su white.

Provalo tu

<html>
<head>
    <title>Recap Challenge #1</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>