I fogli di stile CSS sono un elemento ormai imprescindibile nel webdesign. Abbiamo già visto in questo port come l’uso dei CSS in un documento HTML possa essere ricondotto a tre diversi casi (in linea, interno ed esterno). In questo contesto esamineremo più in dettaglio l’uso dei CSS in linea.
HTML con CSS in linea
L’uso dei CSS in linea consente di sfruttare le potenzialità dei fogli di stile direttamente sul singolo elemento del codice di HTML. Praticamente ogni tag di HTML può essere personalizzato mediante l’uso dei CSS in linea semplicemente introducendo l’attributo “style” seguito dai parametri che descrivono l’elemento di stile. Vediamo un paio di esempi che chiariscono meglio il concetto.
<p style=”color: rgb(153, 0, 0); font-weight: bold;”>Un paragrafo</p>
In questo primo spezzone di codice HTML vediamo l’uso dei CSS in linea applicati al tag “p” (paragrafo) di HTML. L’elemento di stile è introdotto dall’attributo “style” seguito da uno o più parametri racchiusi dal doppio apice e separati da un punto e virgola. In questo caso utilizziamo “color” per assegnare un colore al testo e “bold” per ottenere i caratteri in grassetto.
<body style=”background-color: rgb(255, 102, 0);>
In questo secondo esempio vediamo invece l’uso dei CSS in linea direttamente nell’elemento “body” di HTML. Nello specifico tramite “background-color” viene definito il colore di sfondo che avrà la pagina.
Uso dei CSS in linea
Come abbiamo visto i CSS in linea permettono di generare complessi effetti di formattazione del testo e degli elementi multimediali che non sarebbe possibile gestire con i soli elementi di HTML. Più in generale i CSS in linea possono essere utilizzati per sovrascrivere localmente le impostazioni di un foglio di stile interno o esterno. Un CSS in linea definisce infatti una direttiva prioritaria nell’interpretazione dei browser.