In questa lezione affronteremo i seguenti argomenti:
• Comprendere il ruolo di CSS nella progettazione web.
• Apprendere le differenze fondamentali tra HTML e CSS.
• Imparare a collegare un foglio di stile esterno a un documento HTML.
Panoramica sui Fogli di Stile (CSS)
CSS, acronimo di Cascading Style Sheets, è un linguaggio di stile utilizzato per definire l'aspetto e la formattazione di documenti HTML. La separazione tra struttura (HTML) e presentazione (CSS) consente una gestione più efficiente e flessibile del design di un sito web.
Differenze tra HTML e CSS:
HTML (HyperText Markup Language) è un linguaggio di markup utilizzato per definire la struttura e i contenuti di una pagina web. CSS, d'altra parte, si concentra sulla presentazione, definendo la formattazione, i colori, il layout e altri aspetti visivi del documento.
Collegamento di un Foglio di Stile esterno
Per collegare un foglio di stile esterno a un documento HTML, è possibile utilizzare il tag <link> nel <head> del documento.
Ad esempio:
<!DOCTYPE html>
<lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La Mia Pagina Web</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- Contenuto HTML qui -->
</body>
</html>
In questo esempio, il foglio di stile esterno è denominato "style.css". Questo file conterrà le istruzioni CSS per la formattazione della pagina.
Attività Pratica:
- Creare un documento HTML di base.
- Creare un foglio di stile esterno e collegarlo al documento HTML.
- Modificare il colore di sfondo e il colore del testo per vedere l'impatto dei cambiamenti.