HTML e CSS: Cosa sono e a cosa servono, ecco la guida completa

L’acronimo HTML sta per HyperText Markup Language. Si tratta di un codice che non può essere considerato un linguaggio di programmazione ma un linguaggio di markup.

Per linguaggio di Markup si vuole specificare che il codice HTML viene utilizzato per identificare in una serie di modi gli elementi specifici di una pagina web. Quindi il codice HTML non può essere definito linguaggio di programmazione in quanto manca di elementi utili alla programmazione stessa. Il compito di un vero linguaggio di programmazione è quello di far evolvere il sistema binario in una serie di azioni, mentre lo schema di markup non ha logica, di contro riesce a definire in maniera puntuale gli elementi di una pagina.

Infatti, nel codice HTML sono presenti dei tag, dei segnaposto che servono per identificare il tipo di formattazione del contenuto che può essere una tabella, testo, titolo o la presenza di un oggetto nella pagina, come un’immagine o un audio. Il tag viene solitamente definito utilizzando la sintassi di tipo <nome del tag>.

CSS è l’acronimo di Cascading Style Sheet, un linguaggio di formattazione che non solo consente di separare il contenuto di una pagina dalla struttura, ma anche di definire proprietà che fino a quel momento solo il codice HTML permetteva di fare.

HTML e CSS sono degli strumenti molto potenti se usati contemporaneamente; se da un lato, HTML definisce la disposizione dei contenuti nella struttura, dall’altro CSS ne modella la visualizzazione nel browser o nelle email.

Indice

1. Come funziona HTML
2. Come funziona CSS
3. HTML e CSS: unico strumento

CSS definisce invece i fogli di stile, proprietà aggiuntive che non sono presenti in HTML. Sono principalmente tre i metodi di applicazione di CSS ad un documento:

• Esternamente – il foglio che contiene le informazioni del CSS è un file esterno, che viene allegato con un tag <script>
• Internamente –  tutte le istruzioni CSS vengono inserite all’interno della <head> del sito, con appositi tag <STYLE></STYLE>
• Inline – le istruzioni CSS vengono inserite come valori dell’attributo STYLE presente all’interno di uno specifico tag. In questo caso, la regola CSS varrà esclusivamente per il tag nel quale è stato inserito ed eventualmente per i tag contenuti all’interno del medesimo tag. Ad esempio, provate ad immaginare una serie di scatole, ciascuna contenuta all’interno di una scatola più grande. Una regola CSS può essere applicata INLINE alla scatola più grande ed eventualmente apportare modifiche anche alle scatole più piccole contenute nella scatola più grande.

Per sviluppare le email vengono utilizzati due modi di applicazione differenti:

se il CSS viene applicato internamente significa definirlo nella head con il tag <style>

quando si usa il metodo inline, significa che viene direttamente applicato sul tag.

Applicare invece il CSS interno significa che nel tag <style> verranno definite tutte le regole che gestiscono la visualizzazione del <body>, del <table> e della CTA. Facciamo un esempio:

Se si vogliono conoscere le proprietà presenti nel tag<body> basterà citare il nome del tag che in questo caso è solo body. Con l’uso delle proprietà inline, il browser sarà in grado di mostrare tutti gli elementi del contenuto. Questo significa che i testi avranno dimensioni di 16px e colore #0e0e0e. Si può anche definire la classe; in questo caso la CTA e tutte le sue proprietà si applicheranno solo agli elementi su cui è stata definita. Parliamo quindi di eredità. Secondo questi approcci, tutte le proprietà applicate a un elemento padre vengono ereditate dagli elementi figli, in questo caso la classe CTA eredita dal body tutti gli elementi per poi andare a sottoscrivere.