Blogeri.hr > Blog Tutorijali > Uvod u CSS
Uvod u CSS
Što je CSS? CSS je skraćenica od Cascading Style Sheets.
CSS Uvod
CSS je kratica za Cascading Style Sheets. CSS služi za uređivanje izgleda HTML elemenata. Sa CSS-om možete poboljšati izgled i funkcionalnost samih web stranice i bloga te vam na taj način može uštedjeti puno vremena. Evo jednog konkretnog primjera:
body{
color: #FFFFFF;
background-color: #000000;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
body je prva riječ koja označava tag koji se formatira. Iza slijedi vitičasta zagrada iza koje počinjemo sa atributima. Atributi su engleske riječi koje logično objašnjavaju o kakvom se formatiranju radi. Iza atributa dolazi dvotočka, a poslije nje pišemo vrijednost (boja, veličina). Na kraju dolazi točka zarez što znači da smo gotovi sa ovim atributom i prelazimo na slijedeći. Atribut color služi za promjenu boje teksta, background-color za promjenu boje pozadine, font-family za promjenu fonta (Verdana, Arial, Times New Roman), font-size je veličina font (u pixelima) a font-weight označava debljinu slova (normal, bold, bolder, lighter).
Ima tri načina da se CSS kôd integrira sa HTML kôdom:
1. Izravno na HTML tag
Ovaj način se ne preporuča u formatiranju cijelog HTML dokumenta nego možda za samo jedan element i kada je to baš potrebno.
<body style="color: #FFFFFF; background-color: #000000; font-family: Verdana; font-size: 13px; font-weight: bold;">
2. Unutar zaglavlja dokumenta
CSS kôd ubacimo unutar <head> taga na slijedeći način:
<head>
<style type="text/css">
body{
color: #FFFFFF;
background-color: #000000;
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
</style>
</head>
3. Eksterna datoteka
Ovo je vjerovatno najbolja varijanta i najpreglednije izvedeno. Uđete u neki tekstualni editor, napišete CSS kôd, spremite dokument sa nastavkom .css te ga uploadate na neki server. Za spajanje tog dokumenta sa ostatkom HTML kôda koristite slijedeći kôd:
<link href="http://www.link.com/stil.css" rel="stylesheet" type="text/css" />
Ovo bi bio nekakav uvod u HTML i CSS. Kasnije ćemo se pozabaviti konkretnijim primjerima i slučajevima.