Archivi tag: incorporato

CSS3 Base – 2.6 – Applicare uno stile incorporato 

CSS3 Base, , , , , ,

In questa lezione vi insegno ad applicare uno stile incorporato nella pagina.

CSS incorporati

Un foglio di stile incorporato è un CSS che fa parte di una pagina web e vale solo per tale pagina.

All’interno del tag <head> inserite il tag <style>, che conterrà il codice CSS:

CSS Incorporato
CSS Incorporato

Tale codice avrà selettori in grado di individuare gli elementi HTML contenuti all’interno della pagina corrente, per poter modificare la loro formattazione.

Il CSS incorporato può essere poi arricchito da stili in linea.

Nell’immagine di esempio ho assegnato il colore blu a tutti i paragrafi della pagina: come faccio a colorarne uno di nero?

Applico uno stile in linea sul tag HTML proprio di quel determinato paragrafo:

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

Lo stile del CSS in linea è più specifica del CSS incorporato, perciò avrà la meglio.

Video

CSS3 Base – 2.2 – Dove posizionare il CSS

CSS3 Base, , , , , , , , , ,

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