Sitten päästään CSS:ään, eli kieleen, jolla määritellään sivuston ulkoasu. CSS:llä voi muuttaa minkä tahansa sivun osan ominaisuuksia, esimerkiksi näitä:

Kerrataan vielä, miltä sivumme näyttää nyt:

CSS:ää voidaan kirjoittaa suoraan HTML-tiedostoon, style-tagin sisään, tai sille voidaan tehdä oma tiedosto. Kirjoitetaan CSS tässä tutoriaalissa ensimmäisellä tavalla, mutta kun CSS-tiedoston pituus kasvaa, niin sen kirjoittaminen suoraan HTML:n sekaan tekee tiedostosta aika pitkän ja sekavan. Tämän sivun lopussa kerrotaan, miten HTML ja CSS voidaan erotella kahteen eri tiedostoon.

Lisätään HTML-tiedostoomme style-tagi, jotta voimme kirjoittaa CSS:ää. Style-tagi lisätään yleensä head-tagin sisään. Näin:

nettisivu.html

<!DOCTYPE html>
<html>
    <head>
        <title>Pieni nettisivu</title>
        <style>

        </style>
    </head>
    <body>
        <h1>Mun reseptejä</h1>
        <p>Tässä lista mun lemppariresepteistä.</p>
        <ul>
            <li><a href="https://sipu.li/">Kalakeitto</a></li>
            <li><a href="https://sipu.li/">Paistettu riisi</a></li>
            <li><a href="https://sipu.li/">Linssikeitto</a></li>
            <li><a href="https://sipu.li/">Perunamuussi</a></li>
        </ul>
        <img src="/images/cakes.webp">
    </body>
</html>

Sitten voidaan ruveta koodaamaan CSS:ää! Tässä muutamia esimerkkejä CSS:n käytöstä.

CSS näyttää tältä:

h1 {
    color: RebeccaPurple;
    background-color: #ffc964;
    padding: 10px;
    font-family: Sans Serif
}

CSS koostuu tällaisista lohkoista. Ennen lohkoa määritellään minkä tyyppisten elementtien tyyliä halutaan muuttaa, esim. h1-elementtien eli otsikoiden. Lohkon ympärille täytyy laittaa aaltosulkeet: {}. Tällaiset sulkeet saa tehtyä (suomalaisessa näppäimistössä) painamalla Alt Gr-nappia (välilyönnin oikealla puolella) ja 7- tai 0-nappia riippuen siitä kumman sulun haluat tehdä.

Lohkon sisälle listataan kaikki määriteltävät ominaisuudet puolipisteillä eroteltuna. Nämä ovat muotoa ominaisuuden nimi: ominaisuuden arvo;. Erilaisia ominaisuu

CSS:ssä voi käyttää joitain värin nimiä, kuten yllä näkyvä "rebeccapurple". Kaikki värin nimet löytyvät täältä. Jos haluat valita tarkemmin tietyn värin, voit käyttää color pickeriä ja määritellä värin hex- tai rgb-muodossa. Tässä esimerkkinä sama keltainen väri kummassakin muodossa:

Hex-muoto: #ffc964
RGB-muoto: rgb(255, 201, 100)

Voit käyttää kumpaa vaan muotoa.