Kui soovime sama kujundusega teha aga valmis mitu lehte, siis on targem kasutada CSS-i.
CSS failis kirjeldatakse HTML dokumendi kujundus. Nii saame näiteks ka uutele HTML lehtedele anda ühesuguse kujunduse (näiteks pealkirjad H1 alati rohelised ja paksus kirjas, pealkirjad H2 sinised ja kaldu jne).
Õppimiseks teeme kõigepealt valmis ühe lihtsa veebilehe.
Avage Notepad ja kopeerige sinna allolev kood:
<!DOCTYPE html>
<html>
<head>
<title>CSS koodi katsetamine</title>
</head>
<body>
<h1>Pealkiri 1</h1>
<p>Siin on suur ja ilus pealkiri. Pealkirja all on lõik.</p>
<h2>Pealkiri 2</h2>
<p>Ka pealkirja 2 all on veidikene teksti.</p>
</body>
</html>
Salvestage fail nimega katsetus.html oma arvuti võrgukettale. NB! Salvestamisel meenuta neid juhiseid!
Vaata oma faili veebilehitsejaga.
CSS koodi võib lisada otse html dokumendi sisse. Sellisel juhul lisatakse see lehe päisesse <head> ... </head> märgendite vahele.
Kirjutage päissesse (või kopeerige siit) järgmised read:
<style type="text/css">
H1 {
color: green;
font-weight: bold;
font-size: 22 pt;
}
</style>
Salvestage dokument ja vaadake uuesti veebilehitsejaga. Mis juhtus pealkirjaga?
Lisage HTML dokumenti veel üks pealkiri stiiliga H1 ja salvestage dokument. Millise välimuse omandas lisatud pealkiri?
Kui soovime lisada samasugust väljanägemist ka järgmise lehekülge pealkirjadele, siis praegusel juhul tuleks ka selle päisesse stiilikoodid lisada.
Sellisel juhul on lihtsam salvestada stiilikoodid eraldi CSS faili
Selleks avage Notepadis uus dokument, salvesta see (jälle valige enne salvestamist Notpadis All files ja siis kirjutage failinimi koos laiendiga, näiteks laadid.css)
Nüüd kopeerige faili laadid.css järgmised read
H1 {
color: blue;
font-weight: bold;
font-size: 22 pt;
}
Avage HTML fail katsetus.html ning <style> ... </style> märgendite asemele kopeerige päisesse rida:
<link rel="stylesheet" href="laadid.css" type="text/css" />
See rida tähendab, et dokumendi stiil võetakse failist laadid.css
Salvestage oma dokument ja vaadake nüüd veebilehitsejaga. Mida märkasite?
Täiendame laadid.css dokumenti veel ning lisame sinna järgmised read:
h2{
color:blue;
font-size: 16pt;
text-decoration:underline;
}
p {
font-size: 12pt;
font-style: italic;
}
Salvestage css fail ning vaadake dokumenti katsetus.html veebilehitsejaga.
Codecademy's on kursus ka CSS'i kohta! Kellel huvi, siis õppige edasi!
http://www.codecademy.com/courses/web-beginner-et-ir3wv/0/1?curriculum_id=52b7bca98c1ccc4e47003d56
