Cascading Style Sheets, ose shkurt CSS eshte nje file stili i cili i jep forma, dimesion, ngjyra kodit HTML. Jane disa versione te CSS, dhe me i fundit eshte ai CSS3 me me shume atribute, por kujdes, pasi CSS3 suportohet vetem nga shfletueset e fundit. Firefox, Chrome, Opera dhe disa atirubute ne IE9.
Hapi i Pare - Vendosja e Kodit CSS ne File HTML.
Jane disa menyra siē jane shpejguar me pare, si te vendosim CSS ne HTML
Do ju rekomandoja te perdornit formen:
Ne tag HEAD shkruani:
Kodi HTML:
<link href="stili.css" rel="stylesheet" type="text/css">
dhe te evitoni ate inline - 3
REZULTATI FINAL I SHEMULLIT:
Krijoni nje file prova.html dhe nje file stili.css me notepad ose shkarkoni filet e bashkangjitur.
CSS eshte aplikuar direkt mbi tag kryesore te filet HTML- ne kete menyre mund ta kuptoni me lehte, por eshte me mire ta perdorni ne klasa apo ID, qe do flasim nje mesim tjeter.
Kodi HTML i Shembullit:
Kodi HTML:
<html>
<head>
<title>Lirenti.com Mesime CSS</title>
<link href="stili.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>File Provė pėr Lirenti.com!</h1>
<p>Hello! Mėsime CSS nė Shqip. Shkarko kėtė <a href="http://www.lirenti.com/threads/15481-Hapat-e-para-per-te-mesuar-CSS-Cascading-Style-Sheets">Tutorial Falas.</a></p>
</body>
</html>
Shpjegimi i CSS:
ēdo atribut CSS duhet te permbaj vleren mdis dypikave dhe pikepresjes atribut:vlera;
background-color:ngjyra; - specifikon ngjyren e sfondit. si ngjyre sfondi mund te vini dhe kodet hesadecimal te shoqeruar me nje hash#
Kodi HTML:
body{
background-color:#e0f6ff;
}
Eshte aplikuar mbi body
color:njyra; -specifkon ngjyren te tekstit. si ngjyre teksti mund te vini kodet hesadecimal te shoqeruar me nje hash#
font-size:numri; - specifikon madhesine e teksti i shprehur ne em (njesi matese) ose px (per pixel)
text-shadow - vetem ne CSS3 . IE9 nuk e lexon. Mundeson nje hije mbi tekstin e aplikuar
Kodi HTML:
h1{
color:#006f9c;
font-size:3em;
text-shadow:0 2px 1px #fff;
}
Aplikuar mbi H1
Kodi HTML:
p a{
color:#9c2c00;
}
Ngjyra e likut
Kodi HTML:
p a:hover{
color:#d55726;
}
Ngjyra e linkut kur kemi mousin siper.
Shkarkoni File e bashkangjitur ku permban te gjithe kodin me shembujt e mesiperm.