Eccoci a un nuovo tutorial! 🙂

Oggi introduco un nuovo linguaggio per poter realizzare al meglio i vostri siti web, ovvero i CSS (acronimo di Cascading Style Sheets) in italiano fogli di stile.

Ma cosa sono i CSS?

I CSS formano un linguaggio per poter definire il layout dei documenti HTML, ovvero si occupano dei font e dei colori, dei margini e delle linee, delle altezze e delle larghezze, delle immagini di sfondo, del posizionamento e così via. Quindi, per fare ancora più chiarezza sulla differenza tra i due linguaggi l’HTML viene utilizzato per strutturare il contenuto della pagina, mentre i CSS vengono usati per formattare la struttura del contenuto.

Ora vi domanderete: “ma in che modo posso collegare la pagina html con il suo foglio di stile? E’ semplicissimo!

Le soluzioni possibili sono due:

  1. Fogli di stile interni: il codice css viene scritto direttamente all’interno del codice html. Per farlo possiamo adottare due tecniche differenti: applicare uno stile inline (in linea con il codice html) oppure definire all’interno del documento HTML dei veri e propri fogli di stile.
  2. Fogli di stile esterni: il codice css viene scritto su una pagina a parte (creando un file che si chiamerà style.css) e che verrà successivamente inserito all’interno del codice html tramite il tag <link>.

I FOGLI DI STILE INTERNI

CSS IN LINEA

Se volessimo optare per questa soluzione, all’interno del tag html si utilizzerà l’attributo style, pertanto codice css e codice html risulteranno in linea. 

Nell’esempio sottostante ho fatto sì che l’h1 si colorasse di rosso e avesse come background il colore giallo.


1

Le cose da osservare all’interno del codice sono due:

  1. Si possono dichiarare più regole di stile (nel nostro caso il colore e lo sfondo dell’h1).
  2. Tali regole devono essere separate dal punto e virgola.  I due punti, invece, si usano per introdurre il valore della proprietà da impostare.

FOGLI DI STILE INCORPORATI

I fogli di stile incorporati sono quelli inseriti direttamente nel documento HTML tramite il tag <style>, all’interno della sezione <head>.


1

In questo caso le istruzioni non saranno più inserite all’interno di uno specifico tag html come abbiamo visto per i CSS in linea, ma saranno dichiarate ad inizio pagina, usando la dicitura <style type=“text/css”></style> posto all’interno della sezione <head></head>.

I FOGLI DI STILE ESTERNI

Un foglio di stile è definito esterno quando è separato dal documento html. Si tratta di un documento di testo (modificabile in un editor) al quale si assegna l’estensione .css.

Vi sono due metodi per poter inserire un css esterno:

  1. Tramite il tag <link>, collocato nella sezione <head></head>;
  2. Tramite la direttiva @import all’interno dell’elemento <style>.

Partiamo con il primo metodo!

All’interno del tag <link> andremo a scrivere i seguenti attributi:

<link href=“style.css” rel=“stylesheet” type=“text/css”>

href Serve a definire l’URL del foglio di stile ed è obbligatorio.
rel Descrive il tipo di relazione che intercorre tra il documento html e il file collegato, ovvero il file css. Anche questo attributo è obbligatorio.
 type  Identifica il tipo di dati da collegare. Per i CSS scriveremo text/css. In realtà, in html 5 tale attributo non è più obbligatorio.

Diversamente, utilizzando @import scriveremo il codice nel seguente modo:

<style>
     @import url(layout.css);
</style>

In questo caso il CSS si collega al documento html andando a definire un URL tra parentesi tonde. La dichiarazione si concluderà con un punto e virgola.

Tuttavia, tale modalità di inserimento è sempre più in disuso, mentre si va a prediligere quella basata sull’elemento <link>.

Conclusioni

A questo punto vi domanderete: ma qual è il metodo migliore per poter inserire i CSS? 

Il primo punto da sapere è che il layout della pagina non cambierà, anche nel caso doveste scegliere metodologie diverse.

Tuttavia, l’utilizzo dei fogli di stile esterni o incorporati ha i suoi vantaggi: le pagine html saranno più leggere, di facile lettura e di gestione!

In particolare, nel caso in cui doveste scrivere parecchio codice sarebbe opportuno non utilizzare i CSS inline, onde evitare che i vostri occhi si incrocino! 😛

😉




Add Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.