Tyylitiedosto html-koodin apuna CSS Tyylitiedosto html-koodin apuna
HTML sivun perusasiat <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS koodia</title> </head> <body bgcolor="yellow"> Sivun sisältö </body> </html>
Taustaväri, kuva sivun taustaväri tai taustakuva upotetaan edelleenkin body tagin sisälle < BODY BACKGROUND ="yellow”> <BODY BACKGROUND=”tausta.gif">
Tekstin ominaisuudet kappaleessa <p style="ominaisuus:arvo;”> Tekstin väri <p style="color:red;">Tämän kappaleen teksti on punaista</p> lihavointi, kursivointi alleviivaus <p style="font-weight:bold;">Tämä teksti on lihavoitua.</p> <p style="font-style:italic;">Tämä teksti on kursivoitua.</p> <p style="text-decoration:underline;">Tämä teksti on alleviivattua.</p> Isompaa, eri kirjasin <p style="font-size:20px;">Tämä teksti on kooltaan 20pikseliä.</p> <p style="font-family:arial black;">Tässä tekstin fonttina on arial black.</p>
Asettelu Teksti: vasemmalla, keskitetty, oikealla <p style="text-align:left;">Tässä tekstin sijainti on vasemmalla.</p> <p style="text-align:center;">Tässä tekstin sijainti on keskellä.</p> <p style="text-align:right;">Tässä tekstin sijainti on oikealla.</p>
Elementit <div style="ominaisuus:arvo;”> <div style="color:red; font-size:20px; border:5px solid #000; width: 60%"> Tämä kappale on kirjoitettu DIV- tagin avulla elementin sisälle, jonka sisällä fontti on punaista ja kehystetty yhtenäisellä viivalla DIV-elementti on lohkotason elementti, jolla voidaan tehdä esimerkiksi sivupohjia. Elementtiin voidaan lisätä mm. taustakuva. Elementtikohtaisesti voidaan esimerkiksi muuttaa elementin sisällä olevan tekstin väriä, jolloin jokaista tekstipätkää ei tarvitse muokata erikseen. Elementti aloitetaan DIV-tagilla ja päätetään kuten muutkin <div> Elementin sisältö</div>
Listat, tyylitiedosto.css <div style="color:blue; font-size:20px; border:5px solid #000; width: 60%"> lista palloilla perinteisesti <LI>-tagilla: <ul style="list-style-type:disc;"> <li>CSS tyylitiedoston käyttö on tehokas keino hallita suurempia kokonaisuuksia</li> <li>Kun halutaan muuttaa esim. kaikki otsikot erilaisiksi voidaan käyttää erillistä tyylitiedostoa, jossa määritellään elementin ominaisuudet.</li> <li>Kyseinen tyylitiedosto tehdään erikseen muistiolla,</li>
Tyylitiedosto.css h1 { color:red; font-size:30px; } <li>tallennetaan esim tyylitiedosto.css, huomioi pääte .css </li> Kyseisen tyylitiedoston sisältö voisi olla esim, joka muuttaa kaikki H1-tason otsikot punaisiksi koko 30px: h1 { color:red; font-size:30px; } Muuten css- koodia voi käyttää vaikka kappale kerrallaan html-koodin rinnalla, kuten tässä ohjeessa tehtiin. Tyylitiedosto ladataan sivulle käyttöön head tagien väliin kirjoitettuna <link href="tyylitiedosto.css" media="screen" rel="stylesheet" title="main">
Sivupohjat Sivupohjia varten kannattaa tehdä koodi sivun sisältöä varten Varsinainen pohja määritellään tarkemmin erillisellä tyylitiedostolla
Sivun perusasiat+ elementit <html> <head> <title>CSS koodia</title> </head> <body> <DIV> elementti ja sille sisältö</DIV> <DIV> toinen elementti ja sillekin sisältö</DIV> </body> </html>
Elementtien nimeäminen Jotta elementit voidaan määritellä tarkemmin tyylitiedostossa ne kannattaa nimetä <div id="header">Headerin sisältö</div> <div id=“right">Oikean elementin sisältö</div> <div id="left">Vasemman... </div> <div id=“footer">Alimman... </div>
Tyylipohja.css Tyylipohja tehdään erikseen, jossa määritetään elementtien ominaisuudet Tekstin ominaisuudet kuten edellä opeteltiin… Tyylitiedosto tallennetaan samaan kansioon sivun kanssa päätteellä.css Tyylitiedosto otetaan käyttöön sivun head-tagissa <link href="tyylipohja.css" media="screen" rel="stylesheet" title="main">
Body body { width:900px; margin:2em auto; } Sivun leveys 900pikseliä, marginaalit 2em yläreunassa ja Auto keskittää selaimeen body { width:900px; margin:2em auto; }
Header #header { width:900px; height:200px; border:2px solid black; Header-elementti: leveys 900px, korkeus 200px, reunat mustat 2px, tausta harmaa, teksti keskitetty #header { width:900px; height:200px; border:2px solid black; background:grey; text-align:center; }
”Right”-elementti #right { float:right; width:640px; ”kelluu” oikeassa reunassa, marginaalit 20px ympärillä #right { float:right; width:640px; border:1px solid #000; background:#fdfdfd; margin:20px; }
”Left” elementti #left { width:220px; border:1px solid #000; Automaattisesti vasemmalla, ei tarvitse float-määritettä, marginaali ylhäällä 20px #left { width:220px; border:1px solid #000; background:#b2b2b2; margin-top:20px; }
”Footer”-elementti #footer { border:1px solid #000; background:yellow; CLEAR-attribuutilla voidaan määrittää saako elementin ympärillä olla kelluvia (FLOAT) elementtiä. Arvoina voidaan käyttää LEFT (ei vasemmalla), RIGHT (ei oikealla), tai BOTH (ei kummallakaan puolella. #footer { border:1px solid #000; background:yellow; clear:both; text-align:center; }