Archivi tag: in linea

CSS3 Base – 2.5 – Applicare uno stile in linea

In questa lezione vi mostro come si applica uno stile interno alla pagina, in particolare uno stile in linea.

CSS in linea

Lo stile in linea, come indica il nome, viene inserito in linea col codice HTML, cioè direttamente nel tag dell’elemento a cui viene applicato.

CSS In linea
CSS In linea

L’inserimento avviene con l’attributo style, che determina lo stile per quel determinato tag.

Il valore dell’attributo style sarà poi il blocco delle dichiarazioni CSS.

Esempio:

<p style=" color:blue "> testo del paragrafo </p>

In questo esempio, il CSS è inserito nel tag del paragrafo e la dichiarazione

color:blue

modifica il colore del testo solo per quel determinato elemento: gli eventuali altri paragrafi della pagina non vengono alterati.

Ecco il vantaggio di questo tipo di CSS: applica lo stile solo dove serve.

Ovviamente, se avessimo 10 paragrafi nella pagina e li volessimo tutti di colore blu, lo stile in linea sarebbe troppo macchinoso da applicare e scomodo in caso di aggiornamenti (ad esempio cambiare il colore in futuro): ecco perché esistono altri modi per inserire lo stile.

Il CSS in linea è utile quando volete applicarlo a pochi elementi, senza interferire con gli altri.

Video

CSS3 Base – 2.2 – Dove posizionare il CSS

In questa lezione vediamo dove collocare un foglio di stile nel nostro sito web.

Un foglio di stile può essere:

  • interno alla pagina web
  • esterno alla pagina web

CSS Esterni

Un foglio di stile esterno, viene legato alla pagina HTML mediante questo tag:

<link rel="stylesheet" type="text/css" href="fogliostile.css">

il tag <link> va posizionato dentro <head> del documento e l’attributo “href” indica il percorso ed il nome del foglio di stile.

Siccome è un file esterno, possiamo modificarlo senza dover toccare la pagina a cui è associato.

Se il foglio esterno è lo stesso per tutte le pagine di un sito, modificare lo stile significa cambiare l’aspetto dell’intero sito.

CSS Interni

Un foglio di stile si dice interno, quando è compreso nel codice della pagina a cui è associato, cioè risiede nello stesso file.

I CSS interni si dividono ulteriormente in:

  • stili incorporati, quando vanno inseriti nel tag <head> della pagina;
  • stili in linea, quando sono inseriti direttamente dentro il tag dell’elemento HTML che vogliono modificare.

Esempio di stile incorporato:

CSS Incorporato
CSS Incorporato

 

 

Esempio di stile in linea:

CSS In linea
CSS In linea

Stili in cascata

Cosa significa foglio di stile in cascata?

Significa che:

  • se definisco uno stile per tutto il sito, questo sarà ereditato da tutte le pagine che lo implementano;
  • se applico uno stile ad un elemento HTML mediante un CSS esterno, posso ridefinire tale stile inserendo un CSS interno;
  • se applico uno stile ad un elemento HTML mediante un CSS incorporato, posso ridefinirlo inserendo un CSS in linea nel tag dell’elemento.

In pratica, lo stile che definisco a monte per elementi generici può essere cambiato a valle, negli elementi più specifici.

Nelle prossime lezioni vedremo degli esempi su come posizionare ciascun tipo di CSS.

Video