Des dels inicis del HTML pla, simple i senzill; els dissenyadors Web van estar construint totes les pàgines amb taules (les que serveixen per ser omplertes de dades) on hi cabia des de les imatges fins a paràgrafs sencers. Bé, així és com es comença qualsevol a fer la seva primera pàgina Web. Però indiscutiblement és veu amb certes limitacions provocades per la manca de competitivitat dissenyadora de les taules. Amb uns coneixements més avançats, un altre dels problemes que ens trobem quan dissenyem amb HTML és que el codi es fa molt pesat i dificultós a l’hora de depurar i trobar errors.
El desembre del 1996 la W3C va recomanar (fer un estàndard) les CSS amb un nivell 1, això vol dir només alguns atributs dels que consta aquest llenguatge. Aquest va ser el primer pas. El segon pas va ser el 1998 i a partir de aleshores va ser quan les taules van començar a desaparèixer. La llibertat de les CSS facilitava molt la feina, i en aquest sentit els desenvolupadors se’n beneficiaven molt. Tot i això a partir del 1998 les CSS van avançar lentament i aquest cop s’ha de donar la culpa als browsers (navegadors), ja que tant Netscape, IE o Mozzilla van tardar a reconèixer les CSS i poder-les aplicar a les pàgines Web. Avui en dia ja podem brindar per les CSS i que tots els navegadors, encara que alguns millors que d’altres, ens apliquen les CSS correctament.
El Cascading Style Sheets, es pot inserir en el HEAD del document HTML o bé en un arxiu a part i cridar-lo des del HTML com ja hem explicat a l’apartat HTML. Per recordar-ho, s’utilitza la etiqueta LINK:
<link rel="stylesheet" type="text/css" href="../styles-site.css" title="Estil de la pàgina Web"/>
Si es vol inserir dins el HEAD del document HTML, això només serà útil en cas que haguem d’afegir un format més a la pàgina i aquest sigui de poc pes, ja que en cas contrari només farà que augmentar el pes del document HTML, i treien el CSS a un altre arxiu aconseguim que a l’hora de visitar la Web, el navegador ens guardi al caché (en memòria) el fitxer, només s’hagi de descarregar un sol cop i utilitzar-lo per totes les pàgines que ens calgui. Exemple del codi que afegirem al apartat HEAD del HTML:
<style type="text/css">
.Estilo3 {
color: #000000;
font-weight: bold;
}
</style>
Amb l’últim exemple hem vist més o menys com funciona el codi CSS, però ara l’aprofundirem més, aprendre’m a crear-lo:
El primer que hem de saber és que els CSS sempre es componen de la mateixa manera:
# o .Etiqueta o classe {
Atribut:valor;
Atribut2:valor2;
...;
}
Tot i estructurar-lo amb diferents línies també es podria fer de forma lineal. El més important és no descuidar-se del signe “#” davant dels atributs i el “.” davant de les classes (sense cap espai entre el signe i el nom, ja sigui etiqueta o classe). Tampoc dels “{” (inicial) “}” (final) i dels “ ; ” (per separar atributs).
A continuació cal explicar les diferències entre etiqueta i classe, sense descuidar-nos del que les componen, o les caracteritzen: els atributs.
Les etiquetes sempre van introduïdes per “#”, i ens defineixen una identificació, que vindrà a ser una casella de les famoses taules que tothom hem utilitzat. Això és un tipus de requadre imaginari que el podrem situar allí on vulguem de la pantalla mitjançant els atributs. Un exemple d’una etiqueta és els requadres que utilitzo per emmarcar el codi, que amb les etiquetes els situo més endins que el text.
Exemple d’etiqueta:
#codi {
text-align:left;
padding:7.5px;
width: 500px;
border-style:solid;
border-width: 1px;
margin-left:30px;
}
Les classes sempre van introduïdes per “.”, i ens defineixen un tipus de format que vulguem utilitzar pel nostre disseny, normalment s’utilitza per donar format del tipus: lletra, color, etc. al text. Un exemple de classe és els enllaços de la dreta que tenen com a propietats el color de la lletra, el fons, etc.
Exemple de classe:
.sidelink {
display: block;
width: 120px;
background: #f0f0f0;
padding: 3px 4px 3px 8px;
margin: 5px 10px 5px 0;
}
Els atributs en canvi són tot el que hem vist que contenien les etiquetes i les classes. N’hi ha de tot tipus, però són fàcils d’entendre gràcies al seu significat intrínsec. Ja que així sabem que del anglès “margin” estem definint el marge, o del anglès “width” l’amplada.
A continuació facilito tres enllaços a diferents pàgines Web on expliquen tots els atributs dels que consta els CSS. És qüestió d’anar aprenent-los amb la pràctica ;)!
Llista de propietats CSS per Design Web Club. Castellà
All CSS properties Listed Alphabetically. Anglès
Atributos de las hojas de estilo. Castellà
Per donar-vos un exemple del que et permet dissenyar el CSS i com n’és de senzill modificar el disseny d’una Web només modificant el CSS. He variat tot el disseny d’aquesta pàgina i amb un sol enllaç en el qual vario el CSS que utilitza aquesta pàgina, el disseny canviarà completament. Disseny alternatiu. CSS del disseny alternatiu.
Com hem vist, el CSS el considero un dels llenguatges més importants i a conèixer. Et permet crear de totes les formes i colors, amb el gust que tu vulguis, i sense límits. Per acabar i d’aquesta manera s’entendrà molt millor els CSS explicaré pas a pas el disseny d’aquesta pàgina. Des del HTML pla, fins al que esteu observant ara. Disseny pas a pas.