Me gjuhën HTML i udhëzojmë shfletuesin se si të tregohen elementet në faqe të internetit. Këtë e bëjmë me anën e etiketave të caktuara që kuptohen nga shfletuesi në të cilin hapen faqet. CSS (shkurtimisht për Cascading Style Sheets) ka të njëjtën detyrë, mirëpo këtu caktohet pamja e përmbajtjes brenda një etikete të HTML-it nga një vend tjetër.
Para se të hapet faqja në shfletues lexohen së pari stilet e përcaktuara dhe pastaj zbatohen ato për etiketat në HTML, për objektet e identifikikuara ose me emër të dhënë.
Ekzistojnë tri lloje të stileve CSS:
Në këtë shembull të përdorimit të stileve (të ngulitura) tregohet faqja në shfletuesin e përdoruesit me sfond me ngjyrë të kaltër dhe me tekst me ngjyrë të bardhë.
<html>
<head>
<title>Titulli i faqes</title>
<style type="text/css">
<!--
body {
font-family: Porta, Teuta, "Comic Sans MS", Arial, Verdana;
background-color: blue;
color: white;
}
-->
</style>
</head>
<body>
<p>Përmbajtja e faqes</p>
</body>
</html>
Pa marrë parasysh se cila nga metodat përdoret, sintaksa (drejtshkrimi) i stileve CSS është njësoj.
| Kodi | Sqarimi |
| <style type="text/css"> ... </style> |
I themi shfletuesit se pamja e kësaj faqe është caktuar me stile CSS. Këto stile vlejnë vetëm për faqen në të cilën janë përdorur. Lexo këtu më shumë për përdorimin e stileve të cilat vlejnë vetëm për një dokument të uebit. |
| <link href="shembull.css" rel="stylesheet" type="text/css"> | Në rastin kur dokumenti përdor stile të caktuar në një dokument të jashtëm mund të lidhjet faqja kështu me atë dokument. Lexo këtu më shumë për përdorimin e stileve të jashtme. |
| <!-- ... --> |
Shenjat <!-- përmbajtja e komentit -->përdoren në HTML për të vendosur komente në kod që nuk duhet të tregohen si përmbajtje e faqes në shfletues. Kodi për CSS është vendosur këtu në të njëjtën mënyrë sepse disa shfletues të vjetër që nuk i kuptojnë stilet e tregojnë kodin si përmbajtje në faqe. Kjo ndodh me shfletuesit Internet Explorer 2 ose Netcape 3 me sistemet drejtuese Windows 3.1 ose 95, dhe është gati është e pamundshme të përdoret gabimisht nga shfletuesit e sotëm të uebit. |
| body | Etiketa HTML shënon përmbajtjen e faqes së uebit. Me stil CSS dëshirojmë këtu që e gjithë faqja të ketë këtë veti. Pra gjithçka brenda etiketave <body> ... <body> në këtë dokument. |
| { | Hapja e kllapës përdredhëse shënon fillim e përmbajtjes së vetive të stilit, në këtë rast për etiketën body. |
| font-family: Porta, Teuta, "Comic Sans MS", Arial, Verdana; | Fonti në dokument të uebit nuk është pjesë e atij dokumenti, por përdor fontet e instaluara në kompjuterin e përdoruesit. Pasi që nuk jemi të sigurt se cilat fonte janë të instaluara, mund të përdorim me CSS një familje të fonteve. Kjo do të thotë se dëshirojmë që të përdoret fonti i parë nga lista dhe nëse ai nuk është i instaluar fonti që vijoj pas presjes dhe kështu me radhë. Nëse asnjëri nga fontet nuk ësht i istaluar atëherë përdoret fonti i caktuar nga vetë përdoruesi për faqet e uebit. Për të ilustruar këtë shembull i kam përdorur unë dy emra të fonteve (Porta dhe Teuta të cilat ju sigurisht nuk i keni të intaluara në kompjuterin tuaj). Fontet që vijojnë pastaj prej Comic Sans e deri në fund janë të instaluar prej Windows 95 e tutje me sistemin drejtues. Edhe pse këto janë të instaluara nuk mund të jemi të sigurt se shihen. Përdoruesi mund të hap dosjen me fonte dhe të shlyej këto nga kompjuteri. Fonti Arial (teksti që duhet të shihni këtu) përdoret më së shumti për tekst në faqe të uebit. Në sistemin Apple tregohet Helvetica kur është caktuar Arial. Helvetica i ngjan fontit Arial. Fontet më më shumë se një emër duhet të shkruhen në thonjëza, përndryshe ngatërrohen me emra të ndryshëm të fontit. Emri i fontit ka dallim se a përdoret germë e madhe apo e vogël, por për fontet më të njohura gabimi korrigjohet nga sistemi drejtues. |
| : | Dy pika shënojnë fillimin e vetive për një zgjedhës. |
| ; | Pikëpresja shënon fundit e një vetie për një zgjedhës ose grup. |
| background-color: blue; | Ngjyra e sfondit. Këtu e kam përdorur unë emrin e ngjyrës, por emrat e ngjyrave janë të kufizuar. Në vend të emrit mund të përdorni kodin heksadecimal. |
| color: white; | Ngjyra e tekstit. |
| } | Mbyllja e kllapës përdredhëse shënon fundin e përmbajtjes. |