Mostra la font per a CSS basics

== Aplicar estils CSS a un document HTML ==
Agafem l'exemple del paràgraf en color vermell. En HTML utilitzaríem el tag FONT. En CSS ho podem fer de 3 maneres:
#Inline.
#Amb el tag STYLE (dins el HEAD).
#En una fulla apart (document .css).

En el cas 2 i 3 caldrà adreçar-se a quin element HTML (tag) volem aplicar el color. Vegeu l'exemple per al paràgraf (tag <nowiki><p></nowiki>).


=== Inline ===
Apliquem l'estil dins del l'element concret amb el '''paràmetre style="..."'''.
<syntaxhighlight lang="xml">
<p style="color:red;">El text en vermell</p>
</syntaxhighlight>

Aquesta forma inline s'utiltiza força en el cas dels elements sense format SPAN (dintre d'un paràgraf). Per exemple:

{| border="1" width="800" style=""
! Aquest exemple:
! Donaria com a resultat:
|-
|<syntaxhighlight lang="xml">
Això seria un text normal amb alguna
 <SPAN style="color:green">nota verda</SPAN> entre mig.
</syntaxhighlight>
|Això seria un text normal amb alguna <SPAN style="color:green">nota verda</SPAN> entre mig.
|}


=== Fulla d'estils incrustada (embedded) ===
Podem reunir tots els paràmetres CSS en un apartat del HTML, en particular dins el HEAD en l''''element STYLE'''. Assignarem als tags de paràgraf (<nowiki><p></nowiki>) el color vermell.
<syntaxhighlight lang="xml">
 <HTML>
     <HEAD>
          <TITLE>...</TITLE>
          <STYLE type="text/css">
               p {      /* aquest selector apunta als tags <p> (paràgraf) */
                  color: red;
               }
          </STYLE>

     <BODY>
          <p>El text en vermell.</p>
     </BODY>
 </HTML>
</syntaxhighlight>


=== Fulla d'estils externa ===
Com a '''document extern amb el tag LINK''' dins del HEAD (caldria fer un document "estils.css" amb les dades incloses abans en l'element STYLE).

El document HTML pintaría així:
<syntaxhighlight lang="xml">
 <HTML>
     <HEAD>
          <TITLE>...</TITLE>
          <LINK rel="stylesheet" type="text/css" href="estils.css" />
     </HEAD>

     <BODY>
          <p>El text en vermell.</p>
     </BODY>
 </HTML>
</syntaxhighlight>

I per altra banda necessitem fer un '''arxiu estils.css''' amb el següent contingut:
<syntaxhighlight lang="css">
    p {
         color: red;
    }
</syntaxhighlight>