CSS estilo-orrietan erabiltzen diren elementuei hautatzaileak (hautagailuak) deritze.

Irudian ikusten den moduan, hautatzaileak atributu-balioen segida baten bidez zehazten dira; horrela, elementuei ezaugarriak aldatzen zaizkie.

CSS estilo-orrien sintaxiak dituen oinarrizko arauak ikusiko ditugu hurrengo puntuetan.

Estilo bat zehazteko, atributua (font-size, text-decoration…) ipini behar da lehenik; jarraian, bi puntu idatzi, eta, segidan, atributuaren balioa ezarri behar da, eta puntu eta komarekin amaitu. Estilo bereko atributu bat baino gehiago egon daiteke.

font-size: 10pt; text-decoration: underline; color: black;

Estilo horretan etiketa bati erreferentzia egiteko, etiketaren izena eta, giltzen artean, estiloaren ezaugarriak jarriko dira. Paragrafoa definitzeko, honela egingo da:

p {

font-size: 10pt;

text-decoration: underline;

color: black; }

Neurri-unitateak erlatiboak, absolutuak eta portzentajeak izan daitezke.

• Neurri erlatiboak web-orria ikusten dugun euskarriaren araberakoak dira (mugikorra, pantaila…); beraz, neurri erlatiboak hobesten dira.
  • em. Letra-tipoaren arabera. Oinarrizkoa 12 puntukoa bada, 1em 12 puntu izango da, eta 2em, 24 puntu.
  • ex. x hizkiaren altuera erabiltzen den letra motaren araberakoa da. Orokorrean, x hizkiaren altuera normal letra-tipoaren altueraren erdia da.
  • px. Pixela pantailaren puntutxo bakoitza da, irudi digital baten unitate txikiena. Pantailaren bereizmena nolakoa, pixela handiagoa edo txikiagoa izan daiteke.

● Neurri absolutuak finkoak dira, eta gailu guztietan berdintsu ikusten dira:

• pt: puntua. Puntu baten neurria 1/72 hazbetekoa^[1] da = 0,035 cm.
• in: hazbetea
• cm: zentimetroa
• mm: milimetroa
• pc: pica = 12 puntu

● Portzentajeak oso erabilgarriak dira, unitateak beste unitate batzuekiko zehazteko. 12 pt-ko unitatearekin % 150eko unitatea izango genuke, 18 pt-koa.

^[1] 1hazbete = 2,54 cm

Orokorrean, koloreak RGB balioetan zehazten dira, HTMLn egiten den moduan. Hala ere, bestela ere egin daiteke:

• RGB notazio hamaseitarra erabilita: kolorearen hiru balioak (gorria, berdea eta urdina) balio hamaseitarrarekin (00 eta FF bitartean) zehazten dira.

background-color: #ff8800;

• Notazio hamaseitar laburtua erabilita: aurrekoaren antzekoa, baina kolore bakoitzari zenbaki bakar bat ezarrita.

background-color: #f80;

• Kolorearen izena ipinita: ingelesez jartzen da.

background-color: black;

• RGB portzentajearekin: RGBn balioak portzentajeka zehazten dira; denak hartuta % 100 balira, kolorea zuria litzateke, eta denak % 0 balira, beltza.

background-color: rgb(0%, 10%, 0%);

• RGB notazio hamaseitarra erabilita: kolore bakoitza 0tik 255era bitartean zehazten da.

background-color: rgb(200,255,0);

• Kolore gardena ezarrita: berez ez da kolorea; baina, jarritakoan, elementuak edukitzailearen kolorea hartuko duela adierazten du.

background-color: transparent;

Hainbat elementuk atzeko planoko irudiak onartzen dituzte. Irudiak helbideak (url) txertatuta ezartzen dira.

url(irudiaren_helbidea)

url(https://i.pinimg.com/736x/bb/6e/ed/bb6eedc6907519c545c29841dc26680e.jpg)

Helbideak absolutuak edo erlatiboak izan daitezke. Erlatiboa bada, nabigatzaileak CSS dokumentua dagoen helbidetik hartutako informazioa interpretatzen du; absolutuetan, helbide osoa izaten du kontuan, ordea.

url("../irudiak/ emaitza-1.jpg")

url(http://www.guraso.eus/wp-content/uploads/sites/116/2016/05/emaitza-1.jpg)