Esercizi Stile del Testo CSS
Pratica la personalizzazione del testo del tuo sito web, modificando font, dimensioni e colori attraverso le regole CSS. Aggiungi un tocco distintivo e coinvolgente al tuo contenuto testuale.
Esercizio 1
Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il colore del testo a blu.
<!DOCTYPE html><html> <head> <title>Esercizio 1</title> <style> p { color: blue; } </style> </head> <body> <p>Questo è un paragrafo con testo blu.</p> </body></html>
Esercizio 2
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il colore del testo a rosso e il font a Arial.
<!DOCTYPE html><html> <head> <title>Esercizio 2</title> <style> a { color: red; font-family: Arial, sans-serif; text-decoration: none; } </style> </head> <body> <a href="#">Questo è un link con testo rosso e font Arial.</a> </body></html>
Esercizio 3
Crea una pagina HTML con un elemento di intestazione (h1) all'interno. Usa il CSS per impostare la dimensione del testo a 24px.
<!DOCTYPE html><html> <head> <title>Esercizio 3</title> <style> h1 { font-size: 24px; } </style> </head> <body> <h1>Questo è un titolo con dimensione del testo di 24px.</h1> </body></html>
Esercizio 4
Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare il grassetto sul testo del paragrafo.
<!DOCTYPE html><html> <head> <title>Esercizio 4</title> <style> p { font-weight: bold; } </style> </head> <body> <p>Questo è un paragrafo con testo in grassetto.</p> </body></html>
Esercizio 5
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare lo stile del testo a corsivo.
<!DOCTYPE html><html> <head> <title>Esercizio 5</title> <style> a { font-style: italic; text-decoration: none; } </style> </head> <body> <a href="#">Questo è un link con testo in corsivo.</a> </body></html>
Esercizio 6
Crea una pagina HTML con un elemento di intestazione (h2) all'interno. Usa il CSS per impostare il colore di sfondo del testo a giallo.
<!DOCTYPE html><html> <head> <title>Esercizio 6</title> <style> h2 { background-color: yellow; } </style> </head> <body> <h2>Questo è un sottotitolo con sfondo giallo.</h2> </body></html>
Esercizio 7
Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare la dimensione del testo a 18px e il colore di sfondo del testo a verde.
<!DOCTYPE html><html> <head> <title>Esercizio 7</title> <style> p { font-size: 18px; background-color: green; } </style> </head> <body> <p>Questo è un paragrafo con testo di dimensione 18px e sfondo verde.</p> </body></html>
Esercizio 8
Crea una pagina HTML con un link all'interno. Usa il CSS per impostare il testo in maiuscolo.
<!DOCTYPE html><html> <head> <title>Esercizio 8</title> <style> a { text-transform: uppercase; text-decoration: none; } </style> </head> <body> <a href="#">Questo è un link con testo in maiuscolo.</a> </body></html>
Esercizio 9
Crea una pagina HTML con un elemento di intestazione (h3) all'interno. Usa il CSS per impostare il testo sottolineato.
<!DOCTYPE html><html> <head> <title>Esercizio 9</title> <style> h3 { text-decoration: underline; } </style> </head> <body> <h3>Questo è un sottotitolo con testo sottolineato.</h3> </body></html>
Esercizio 10
Crea una pagina HTML con un paragrafo all'interno. Usa il CSS per impostare lo spazio tra le lettere (letter-spacing) a 2px.
<!DOCTYPE html><html> <head> <title>Esercizio 10</title> <style> p { letter-spacing: 2px; } </style> </head> <body> <p>Questo è un paragrafo con spaziatura tra le lettere di 2px.</p> </body></html>