Aloitetaan vaikka avaamalla Notepad++. Avaa uusi tiedosto, jos siinä ei jo valmiina ole, ja sitten tallenna se html-tiedostoksi. Esim. nettisivu.html. Sitten paina Ctrl + N, joka avaa uuden dokumenin. Sen tallennat CSS-tyylitiedostoksi. Esim tyyli.css.
Aloitetaan tekemällä peruskoodit html-tiedostoon, eli kirjoita:
- Koodi: Valitse kaikki
<html>
<head>
<title> Sivun Otsikko </title>
<link rel="stylesheet" type="text/css" href="tyyli.css">
</head>
Noin, nyt "yläosa" on valmis.
Head-tagin jälkeen kirjoitetaan:
- Koodi: Valitse kaikki
<body>
</body>
</html>
Nyt noiden body-tagejen väliin tulee se sisältö, eli se koodi, mitä alamme tekemään.
Nyt tehdään divit, joista muodostuu sivupohja. Aloitetaan tekemällä logo. Se tapahtuu näin: (kirjoita body tagien väliin) Näillä ei sitten muuten ole väliä mihin järjestykseen laittaa...
- Koodi: Valitse kaikki
<div class="logo" align="left">
Sivusi nimi tähän
</div>
Sitten linkkivalikko:
- Koodi: Valitse kaikki
<div class="navi" align="left"
<a href="index.html"> LINKKI </a> <br><br>
<a href="index.html"> LINKKI </a> <br><br>
<a href="index.html"> LINKKI </a> <br><br>
<a href="index.html"> LINKKI </a> <br><br>
</div>
Nyt on tämäkin valmis. Sitten vielä sisältö..
- Koodi: Valitse kaikki
<div class="sisalto" align="left">
Tervetuloa minun sivuilleni. Täältä löytyy kaikenlaista jännää! Ja muistattehen, että tämä on tehty PePPeRin tutosta! ^^
</div>
Nyt on tuo valmis. Sitten alamme muokata css-tyylitiedostoa, joten otappa ja avaa se. Suosittelen tallentamaan ensin tämän työsi.
Nyt sinulla on taas tyhjä dokumentti edessäsi.
Aluksi voisimme säätää sivupohjan taustavärin, sekä tekstin koon, joten kirjoita ihan aluksi:
- Koodi: Valitse kaikki
body {
background-color: white;
font-family: Arial;
font-size: 12px;
}
background-color: taustaväri. ilmoitetaan joko sanalla tai hexalla (esim. #0000ff)
font-family: fontti (esimerkiksi Arial, Courier, Tahoma...)
font-size: fontin koko (ilmoitetaan pikseleinä, eli esim. 12px
Sitten laitamme linkkien värit:
- Koodi: Valitse kaikki
A:link {color: #000000; text-decoration:no;}
A:active {color: #000000; text-decoration:no;}
A:visited {color: #000000; text-decoration:no;}
A:hover {color: #ffffff; text-decoration:underline;}
link: tavallinen linkki, missä ei ole vielä käyty.
active: aktiivinen (hiiren painalluksen alainen) linkki
visited: vierailtu linkki
hover: linkki, kun hiiri on sen päällä
Noin. Tuohon color: -kohdan jälkeen kirjoitetaan se väri hexana.
Sitten alamme työstämään pohjaa. Aloitetaan logosta. Eli kirjoitappas:
- Koodi: Valitse kaikki
.logo{
text-decoration: underline;
font-size: 40px;
background-image: url(logo.png);
position:absolute;
left:400px;
top:25px;
width:500px;
height:100px;
z-index:0;
}
Background-imageen sulkuihin osoite taustakuvaan. Left ja Top-kohtiin laitetaan logon sijoittelu. Eli left määrää, että kuinka monta pikseliä (px) vasemmalta, ja top sen sijaan ylhäältä. Tämä voidaan ilmoittaa myös prosentteinä % mutta huomaa tällöin, että tämä vaihtelee resoluutiosta riippuen..
Sitten navibar:
- Koodi: Valitse kaikki
.navi{
background-image: url(navi.png);
position:absolute;
left:400px;
top:130px;
width:150px;
z-index:1;
}
Sitten vielä sisältö:
- Koodi: Valitse kaikki
.sisalto{
background-image: url(sisalto.png);
left:560px;
top:130px;
width:440px;
position:absolute;
z-index:2;
}
Koko html-tiedosto pitäisi nyt näyttää tältä:
<html>
<head>
<title> Sivun Otsikko </title>
<link rel="stylesheet" type="text/css" href="tyyli.css">
</head>
<body>
<div class="logo" align="left">
Sivusi nimi tähän
</div>
<div class="navi" align="left"
<a href="index.html"> LINKKI </a> <br><br>
<a href="index.html"> LINKKI </a> <br><br>
<a href="index.html"> LINKKI </a> <br><br>
<a href="index.html"> LINKKI </a> <br><br>
</div>
<div class="sisalto" align="left">
Tervetuloa minun sivuilleni. Täältä löytyy kaikenlaista jännää! Ja muistattehen, että tämä on tehty PePPeRin tutosta! ^^
</div>
</body>
</html>
css-tiedoston taas tältä:
body {
background-color: white;
font-family: Arial;
font-size: 12px;
}
A:link {color: #000000; text-decoration:no;}
A:active {color: #000000; text-decoration:no;}
A:visited {color: #000000; text-decoration:no;}
A:hover {color: #ffffff; text-decoration:underline;}
.logo{
text-decoration: underline;
font-size: 40px;
background-image: url(logo.png);
position:absolute;
left:400px;
top:25px;
width:500px;
height:100px;
z-index:0;
}
.navi{
background-image: url(navi.png);
position:absolute;
left:400px;
top:130px;
width:150px;
z-index:1;
}
.sisalto{
background-image: url(sisalto.png);
left:560px;
top:130px;
width:440px;
position:absolute;
z-index:2;
}
background-imagen voi korvata myös background-colorilla, jolloin laitetaan värikoodi hexana url:n tilalle. (esim. background-color: #ff0000;)
Toivottavasti saitte ees jotain selvää... Lisäilen juttuja,ku kerkeen.
Oma tulokseni. (en jaksanut panostaa...
*Perkele, haiseeko paprikat?!
.
Kerrankin ymmärsin jotain css:stä. 
