CSS: inserire gli stili

Il linguaggio CSS può essere inserito in una documento xhtml in diversi modi:

CSS esterni: viene creato un file .css separato dal documento html, contenente le istruzioni CSS.

Per caricare le istruzioni viene inserito nel documento il tag <LINK> nella HEAD del documento:

<html>
<head>
<title>Inserimento di fogli di stile esterni in un documento</title>
<link rel="stylesheet" type="text/css" href="stile.css">
</head>
<body>
  • rel indica la relazione tra documenti, può essere stylesheet e alternate stylesheet (identifica un CSS come alternativo rispetto a quello standard);
  • href indica l'url assoluto o relativo dove è posizionato il file .css
  • type indica il tipo di file da collegare, per il linguaggio css è obbbligatoriamente text/css
  • media è opzionale e identifica il tipo di device (schermo, stampa) a cui applicare il foglio di stile.


Un altro modo per inserire un file .css è utilizzando @import all'interno dell'elemento <style> posizionato nell' head del documento html, dichiarando semplicemente l'url della posizione del file .css da richiamare:

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

CSS incorporati:
le istruzioni css vengono direttamente inserite nel documento html tramite l'elemento <style> nel head della pagina web, può avere i due attributi type e media:

<html>
<head>
<title>Fogli di stile incorporati in un documento html</title>
<style type="text/css">
body {
  background: #cccccc
}
</style>
</head>

CSS in linea:
vengono dichiarate delle istruzioni CSS direttamente all' interno di un tag:

 

<h1 style="color: #000000; text-decoration: underline;">titolo</h1>