CSS basics
Llegeix les primeres passes del curs de CSS de Gonzalo Pérez de la Ossa.
També pots llegir la introducció al CSS d'aquest altre manual.
Per començar cal aclarir que el CSS és un afegit de l'estàndard HTML per manipular elements d'un document HTML. En caldrà, doncs:
- Adreçar-nos a un element del document (tag). Per exemple, al tag <P> (paràgraf) o al tag <H1>.
- Aplicar-li una determinada propietat. Per exemple, que volem el text en color vermell.
Llegiu aquest apartat sobre l'adreçament i les propietats (dins del capítol de primeres passes).
Contingut
Aplicar estils CSS a un document HTML
Agafgem 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 <p>).
Inline
Apliquem l'estil dins del l'element concret amb el paràmetre style="...".
<p style="color:red;">El text en vermell</p>
Aquesta forma inline s'utiltiza força en el cas dels elements sense format SPAN (dintre d'un paràgraf). Per exemple:
| Aquest exemple: | Donaria com a resultat: |
|---|---|
Això seria un text normal amb alguna
<SPAN style="color:green">nota verda</SPAN> entre mig.
|
Això seria un text normal amb alguna nota verda 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 (<p>) el color vermell.
<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>
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í:
<HTML>
<HEAD>
<TITLE>...</TITLE>
<LINK rel="stylesheet" type="text/css" href="estils.css" />
</HEAD>
<BODY>
<p>El text en vermell.</p>
</BODY>
</HTML>
I per altra banda necessitem fer un arxiu estils.css amb el següent contingut:
p {
color: red;
}
Exemple amb 2 propietats
Hem vist com canviar el color del text amb la propietat CSS color. Si volem canviar el tamany de la lletra ho podem fer amb la propietat font-size. Per exemple, farem una lletra molt gran (40px) pel H1 en color verd i una lletra molt petita pel P (8px) en color magenta:
<HTML>
<HEAD>
<TITLE>Exemple de CSS</TITLE>
<STYLE type="text/css">
H1 { /* aquest selector apunta als tags <H1> */
color: green;
font-size: 40px;
}
P { /* aquest selector apunta als tags <P> (paràgraf) */
color: magenta;
font-size: 10px;
}
</STYLE>
<BODY>
<P>Comencem amb un paràgraf normal, petitet.</P>
<H1>Seguim amb un encapçalament grossot</H1>
<P>I finalitzem amb un altre paràgraf peitet.</P>
</BODY>
</HTML>
Donaria com a resultat:
Exercicis
Òbviament s'han de resoldre utilitzant CSS i sense utilitzar tags HTML com FONT.
- Fes un document HTML amb CSS incrustada. Escriu:
- El títol del document amb H1 (en verd, tamany 30)
- Els teus plats favorits (mínim 3!) amb H2 (en marró, tamany de lletra 24)
- Una llista d'ingredients per cada plat (utilitza llistes HTML amb els tags UL o OL). Color oliva ("olive").
- Una petita descripció o recepta de cuina amb el tag P (color "teal" o cyan).
- Passa l'exercici 1 a una fulla d'estils externa.
