Aurreko puntuan ikusi dugunez, orri bati forma eman behar zaionean, HTMLa oso mugatua da; hainbat erabilera izateko pentsatuta dago, baina ez horretarako. Aurreko bertsioetan, formatua emateko hainbat atributu sartzen ziren kodean; baina, HTML5en, ez daude onetsita: dokumentuak irakurtzea zaila zen, eta formatu-aldaketak egitea, guztiz neketsua, elementuz elementu egin behar zelako.
Beraz, CSS estilo-lengoaiak (Cascading Style Sheets edo teilakatutako estilo-orriak) dokumentuak aurkeztea errazten du, eta horretako baliabideak eskaintzen: letra motak, koloreak, marjinak, lerroak, altuera, zabalera, atzeko planoak…
Zehatzago esanda, HTML edukia antolatzeko erabiltzen da; CSS, berriz, antolatutako edukiari forma emateko.
CSSrekin, sintaxi berezi baten bidez, informazioa nola agertuko den zehazten da:
Gainera, neurriak gehitzen dira. Lehen, ehunekoak (%) eta pixelak (px) txertatzen ziren. CSSrekin, berriz, ehunekoak (%), pixelak (px), hazbeteak (in), puntuak (pt) eta zentimetroak (cm) txerta daitezke.
Lau modutan erabiltzen dira estilo-orriak:
<span></span
> etiketarekin.style
erabilita.style
jarrita <head> </head>
. Hala, orri osoari ematen zaio formatua, eta aldatu behin baino ez dugu egingo.Horretarako, orriaren goiburuan <style> </style>
etiketak idatziko dira.
<body>
etiketari kolorea jarriz gero, gainerako elementu guztiek kolore hori hartuko dute, beste kolore bat ezarri ezik. Kasu honetan, <p>
paragrafoak eta <h1>
izenburuak berezko kolorea dute, <body>
etiketaren barruan egon arren.
Kanpoko fitxategia erabiliz gero, webguneko orri guztiek estilo bera izango dute sorreran; horrela, aldaketetan, batera aldatuko dira, eta HTML kodea laburtu egingo da.
Pausoz pauso, ikus dezagun nola erabili kanpoko orri-estiloa. Honela:
2. Web orrian, zer estilo-orri erabiliko dugun zehazteko, web orriaren goiburuan <link>
etiketa ezarriko dugu, honako atributu hauekin:
rel="stylesheet"
, esteka orri-estiloa dela esateko. type="text/css"
, testu-fitxategia dela adierazteko, css formatuan.href="izena.css"
, estilo-orriaren izena zehazteko.Koloreak aldatuz gero, honela:
Lehen aipatu bezala, estiloak etiketa batetik bestera jaraunsten dira (inherit). <body> etiketari estilo jakin bat ezarri badiogu, haren barruko etiketetan eragina izango du. Web-nabigatzaileek deskripzio zehatzena hartzen dute kontuan. Halaber, deklaratzeko moduak ere badu zerikusia. Eragin txikienetik handienera, hierarkia honako hau da: