Esan dugun moduan, HTML egitura sortzen duen lengoaia da, eta ez da itxura aldatzeko erabili behar. Beraz, web-orriko elementu batzuei (kolorea, letra-tipoa, betegarriak, lerrokatzea…) formatua zuzenean jartzeko, estilo-orriak erabil ditzakegu, edo, besterik gabe, estiloa: zuzenean style atributua jarrita elementu bakoitzean edo orri horretan.

Hau guztia CSS3 estilo-orriekin batera ikusiko dugu sakonago. Baina, oraingoz, ikus ditzagun testuetan erabilgarriak diren estilo-deklarazio batzuk.

Estiloa deklaratzeko, bada sintaxi jakin bat. Honela idazten da estilo orrietan:

Baina estilo hori HTMLko elementu bati lotzeko erabili behar dugun deklarazioa beste hau da:

• color. Kolorea ezartzeko erabiltzen da, eta ia HTMLko etiketa guztiak erabiltzen dituzte. Koloreen izen guztiak ez daude onetsita; beraz, hobe da RGB balioa jartzea.

color: RGB balioa | kolore_izena;

color: #013ADFr;

color: pink;

• font-size. Letra-tipoaren tamaina zehazteko erabiltzen da.

font-size: xx-small|x-small|small|medium|large|x-large|xx-large;

font-size: x-large;

font-size: SS_unitateak;

font-size: 14px;

• font-family. Letra-tipoaren familia zehazteko erabiltzen da. Hasierako balioak generikoak dira; beraz, nabigatzaileek eta erabiltzaileek ulertzen dituzten edo sisteman dituzten letra-tipoak erabiltzen ditu.

Tipografia normalak erabil daitezke; baina, izen batek espazioak baditu, komatxoen artean jarri behar da.

font-family: serif|sans-serif|cursive|fantasy|mosopace;

font-family: ohiko_letra_tipoak;

font-family: arial,helvetica;

font-family: fantasy;

• font-weight. Karaktereen zabalera zehazteko ibiltzen da. Horrekin, letra lodia ere jar daiteke. 400=normala; 700=lodia (bold).

font-weight: normal | bold| lighter| 100 | 200 | 300 | 400 | 500 | 600| 700| 800| 900;

font-weight: bold;

font-weight: 200;

• font-style. Letra-tipoaren estiloa adierazteko da.font-style:normal|italic|oblique;

font-style: normal;

font-weight: italic;

• line-height. Lerro baten altuera adierazteko da, hau da, lerro-tartea. HTMLrekin soilik ezin da aldatu.

line-height: normal | CSS_unitateak;

line-height; 12px;

line-height: normal;

• text-decoration. Testuaren apaingarria adierazteko erabiltzen da (azpimarratuta, lerroa testu gainean edo marratuta). HTMLrekin soilik ezin da aldatu.

text-decoration:none | [underline || overline || line-through];

text-decoration: none;

text-decoration: underline;

• text-align. Testuaren lerrokatzea adierazteko da.

text-align: left | right | center | justify;

text-align: right;

text-align: center;

• text-indent. Testuen koskak jartzeko da. Berria da bertsio honetan.

text-indent: CSS_unitateak;

text-indent: 10px;

text-indent: 2in;

• text-transform. Testua moldatzeko aukera ematen du: lehen hizkia larriz, dena larriz edo dena xehez.

text-transform: capitalize | uppercase | lowercase | none;

text-transform: none;

text-transform: capitalize;

• background-color. Atzeko planoari edo elementu bati kolorea ezartzeko.

background-color: RGB balioa | kolore_izena;

background-color: green;

background-color: #0000FF;

• background-image. Atzeko planoari edo elementu bati irudia ezartzeko erabiltzen da.

background-image: url (irudiaren_izena helbide absolutuarekin edo erlatiboarekin);

background-image: url(eguzkia.jpg);

background-image: url(https://cdn.pixabay.com/photo/2018/02/09/21/46/rose-3142529_960_720.jpg);

• margin-left. Ezkerreko marjinaren tamaina adierazteko.

margin-left: CSS_Unitateak;

margin-left: 1cm;

margin-left: 0,5in;

• margin-right. Eskuineko marjinaren tamaina adierazteko.

margin-right: CSS_Unitateak;

margin-right: 6%;

margin-right: 5px;

• margin-top. Goialdeko marjinaren tamaina adierazteko.

margin-top: CSS_Unitateak;

margin-top:2%;

margin-top:3cm;

• margin-bottom. Behealdeko marjinaren tamaina adierazteko.

margin-botom: CSS_Unitateak;

margin-botom: 3pt;

margin-botom: 0px;

2.6 Padding (betegarria)

• padding-left. Objektu baten eta haren edukitzailearen artean txertatutako ezkerreko espazioa. Espazio horren planoa eta edukitzailearen atzeko planoa berbera da.

padding-left: CSS_Unitateak;

padding-left: 1%;

padding-left: 0,5in;

• padding-right. Objektu baten eta haren edukitzailearen artean txertatutako eskuineko espazioa.

padding-right: CSS_Unitateak;

padding-right: 0,5cm;

padding-right: 3pt;

• padding-top. Objektu baten eta haren edukitzailearen artean txertatutako goialdeko espazioa.

padding-top: CSS_Unitateak;

padding-top: 10pt;

padding-top: 3cm;

• padding-bottom. Objektu baten eta haren edukitzailearen artean txertatutako behealdeko espazioa.

padding-bottom: CSS_Unitateak;

padding-bottom: 2in;

padding-bottom: 4px;

2.7 Border (Ertza)

• border-color. Objektu baten ertzaren kolorea adierazteko. Ertz guztiak kolorez bereiz daitezke: border-top-color, border-right-color, border-bottom-color eta border-left-color.

border-color:RGB balioa | kolore_izena;

border-color:pink;

border-color:#0000FF;

• border-style. Objektu baten ertzaren kolorea adierazteko. Ertz guztiak kolorez bereiz daitezke: border-top-color, border-right-color, border-top-color eta border-left-color.

border-style: none | dotted | solid | double| grove | rigde | inset | outset;

border-style: groove;

border-style: solid;

• border-width. Objektu baten ertzaren zabalera adierazteko.

border-width: CSS_unitateak;

border-width: 12px;

border-width: 1in;

Beste batzuk

• float. Elementu bat ezkerrera edo eskuinera lerrokatzeko erabiltzen da. Ondoko testua elementu horren inguruan batuko da.

float: none | left | right;

float: right;

• clear. Edozein elementuk eskuinean eta ezkerrean lerrokatuta dituen irudiak edo elementuak kendu egiten ditu.

clear: none | left | right;

clear: right;