CSS Stílusleíró nyelv
A modern weblapoknál elvárás, hogy a tartalom, és a design elkülönüljön egymástól.
A Példa régi, elavult kódja:
<head>
</head>
<body>
<table width="800">
<tr>
<td colspan="2" align="center" bgcolor="yellow"><h1><font color="blue" size="16">fejléc, logó, reklámcsík (banner)</font></h1></td>
</tr>
<tr>
<td bgcolor="blue">
<a href="http://google.com"><font color="white">Google</font></a><br><br>
<a href="http://facebook.com"><font color="white">Facebook</font></a>
</td>
<td>
tartalom
</td>
</tr>
</table>
</body>
</html>
Ugyanez modern változatban formázásokat elkülönítve és táblázat helyett div dobozokkal:
<html>
<head>
<style type="text/css">
#keret { width: 800px; }
#fejlec {background-color: yellow; }
#fejlec h1 { color: blue; font-size: 16pt; text-align: center; }
#menu {background-color: blue; }
#menu a { color: white; }
</style>
</head>
<body>
<div id="keret">
<div id="fejlec"><h1>fejléc, logó, reklámcsík (banner)</h1></div>
<div id="oldalmenu">
<a href="http://google.com">Google</a><br>
<a href="http://facebook.com">Facebook</a>
</div>
<div id="tartalom">
tartalom
</div>
</div>
</body>
</html>
Különbség a body-n belül látható. Már ennél a kis kódnál is 2/3-ára csökkent a betűk száma és nagyobb szövegnél még nagyobb mértékű csökkenés keletkezhet. A tartalom ezért jobban áttekinthető. A formázások helyett szinte csak az utasítások neveit tartalmazzák a TAG-ek.
A head részben megjelent a style TAG, amelyben összegyűjtve találhatóak a stílusformázások.
Ha ezeket a stílusformázásokat külön fájlban tároljuk, akkor ugyanahhoz a weblaphoz többféle kinézetet (skint) is használhatunk, vagy ugyanazt a stílust több oldalhoz is használhatjuk. Így pl. ha egy 10 oldalból álló weblapnál meg akarjuk változtatni a címsorok betűméretét, akkor nem kell minden oldalt átszerkeszteni, hanem elég csak a css fájlban egy hegyen elvégezni a módosításokat. Ezáltal egyszerűbben alakítható a honlap, és kisebb a méretű fájlok miatt kisebb adatforgalmat eredményez a honlap megtekintése.
A keret táblázat helyett div-ekkel történő kialakítása rugalmasabb elrendezést ad, így ugyanaz a weblap akár másképpen nézhet ki mobilon és számítógépen anélkül, hogy két változatban kellett volna elkészíteni.
A CSS ráadásul sokkal több formázási lehetőséget ad, mint az eredeti html formázások.
További előny, hogy a böngészők, keresőprogramok, felolvasó programok, ... is könnyebben boldogulnak egy letisztult html forráskóddal, ezért pl a google a találati listában is előrébb teszi a modernebb oldalakat.
A CSS-t a weblapba 3 féle módon illeszthetjuk be:
- külső css fájl beolvasásával a weblap head részében: <link rel="stylesheet" type="text/css" href="stilusfajl.css" />
- A head részben style utasításba ágyazva: <style type="text/css"></style>
- Az adott elem (pl bekezdés, táblázat) tulajdonságaként megadva: style=""
pl: <p style="margin:10px;color:#ff0000;">ez egy bekezdés, aminek 10px a margója, és piros a betűszíne</p>
pl: <img src="valami.jpg" style="border: 1px solid blue;" />ez a kép kék körvonallal van ellátva
- A CSS utasításokat megadhatjuk TAG-ekre, pl ha minden bekezdést középre akarunk igazítani:p {text-align:center;}
- Ha nem minden bekezdést szeretnénk középre igazítani, akkor osztályokat hozhatunk létre. Az osztályokat ponttal jelöljük:.kozepre {text-align:center;}Ilyenkor a html kodban jelölni kell a kiválasztott bekezdést:<p class="kozepre">Ez egy kozepre nevű stílusosztályba sorolt bekezdés</p>
- Ha egy konkrét TAG-et szeretnénk megformázni (pl. a fejlécet tartalmazó div-et), akkor egyedi azonosítót(ID) adhatunk neki. Az id-t kettős kereszttel jelöljükk:#fejlec {text-align:center; width:600px;}A html kódban így hivatkozunk:<div id="fejlec">Ez a div doboz tartalmazza a fejlécet</div>