Osnove CSS-a
CSS (Cascading Style Sheets) je stilski jezik koji koristimo u kombinaciji sa HTML-om i on je zadužen za izgled HTML stranice. Preko njega definiramo vrstu slova, boje, margine, razmake, dimenzije i raspored elemenata na stranici. Istina je da sve to možemo napraviti i u HTML-u, ali koristeći CSS odvajamo dizajn od strukture sadržaja.
CSS možemo pisati u bilo kojem tekstualnom editoru, isto kao i HTML. Najpoznatiji tekstualni editor je Notepad i imamo ga na svakom računalu koje ima Windows sustav. Moj izbor je Notepad ++ jer ima malo naprednije mogućnosti i možete ga skinuti ovdje.
Što smo na kraju dobili?
Imamo uredniji i pregledniji kod. U HTML-u nabrajamo elemente koje koristimo na stranici, a u CSS-u dorađujemo izgled tih elemenata. Ako CSS koristimo kao eksternu datoteku, lako je možemo pozvati u bilo koji HTML dokument. Možemo napraviti brže i lakše korekcije na stranici (ako imamo preko nekoliko desetaka i više stranica u jednom potezu možemo promijeniti npr. boju teksta na svim stranicama ili font).
Vrste stilova
Postoje 3 načina na koje možemo pisati stil.
- Inline – pišemo unutar HTML datoteke
- Interni – pišemo unutar HTML datoteke
- Eksterni – pišemo u zasebnu datoteku
1. Inline stil upotrebljavamo “u redu”=”in line”, a to znači kod pisanja samog HTML dokumenta, po potrebi uključimo jedan redak stila koji definira npr. izgled nekog odlomka.
<p style=”background: blue; color: white;”>Plava pozadina sa bijelim tekstom.</p>
2. Interni stil upisujemo unutar HEAD elementa HTML datoteke.
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Ovo je primjer internog CSS-a</title>
<style type=”text/css”>
h1 {font size: 20px;
color: red;}
p {font size: 12px;
color: blue;}
</style>
</head>
<body>
<h1>Naslov je crvene boje, veličine 20px</h1>
<p> Tekst u odlomku je plave boje, veličine 12px.</p>
</body>
</html>
3. Eksterni stil je popularniji i praktičniji jer ga zapisujemo u zasebnu datoteku koja ima ekstenziju CSS i poslije je pozivamo u HTML datoteku unutar HEAD elementa. Znači imamo 2 dokumenta: index.htm i style.css
U HEAD dokumenta index.htm upisujemo sljedeće:
<link href=”style.css” rel=”stylesheet” type=”text/css” />
Ako se datoteka style.css nalazi u mapi CSS onda pišemo:
<link href=”css/style.css” rel=”stylesheet” type=”text/css” />
Primjer stranice:
HTML kod gornjeg primjera:
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title> </title>
<link href=”style.css” rel=”stylesheet” type=”text/css” />
</head>
<body>
<h1>Primjena CSS-a</h1>
<h2>Prvi podnaslov</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut eget lorem nisi, eget egestas erat. Integer enim dolor, placerat blandit aliquet eu, vehicula ac nisi. Donec magna est, consectetur laoreet vestibulum et, porta eget tortor. </p>
<h2>Drugi podnaslov</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel sapien ut turpis sollicitudin aliquet. Nunc viverra varius nisi, et euismod sapien posuere non. Donec augue erat, vehicula sed molestie ac, facilisis non ipsum. </p>
</body>
</html>
CSS kod gornjeg primjera:
h1 {
font-size: 30px;
color: red;
}
h2 {
font-size: 24px;
color: green;
}
p {
font-size: 12px;
color: blue;
}