Edellytykset

• Ultimate HTML

Tervetuloa verkkosuunnittelun maailmaan

CSS (Cascading Style Sheets) muuttaa tavallisen HTML:n visuaalisesti houkutteleviksi ja käyttäjäystävällisiksi verkkosivuiksi. Se hallitsee värejä, asettelua, välistyksiä ja yleistä ulkoasua—tuoden suunnittelusi eloon.

Mikä on CSS?

CSS, eli Cascading Style Sheets, on tyylikieli, jota käytetään HTML-dokumenttien (Hypertext Markup Language) esitystavan määrittelyyn. Mutta mitä tämä tarkoittaa?

Ajattele HTML:ää talon perustuksena – se tarjoaa verkkosivusi olennaisen rakenteen ja asettelun. Kuvittele nyt CSS sisustussuunnittelijana. Se vastaa tyylien, värien ja esteettisyyden lisäämisestä rakenteeseen, tehden siitä kutsuvan ja visuaalisesti houkuttelevan.

Katso tätä havainnollistusta:

Havainnollistuksen vasemmalla puolella näkyy pelkkä HTML. Oikealla puolella näkyy, kuinka CSS voi muuttaa saman sisällön tyylin ja värin avulla.

CSS-syntaksin ymmärtäminen

CSS saattaa aluksi vaikuttaa vieraalta kieleltä, mutta noudattaa yksinkertaista syntaksia. CSS-sääntö koostuu valitsimesta ja määrittelylohkosta. Valitsin kertoo, mihin HTML-elementteihin sääntöä sovelletaan, kun taas määrittelylohko sisältää yhden tai useamman ominaisuus-arvo-parin, jotka määrittelevät tyylin.

Käydään tämä läpi esimerkin avulla:

p {
  color: purple;
  background-color: green;
}

• p on valitsin, joka osoittaa, että tämä sääntö koskee kaikkia <p>-elementtejä;
• color: purple; määrittää, että tekstin värin tulee olla violetti;
• background-color: green; määrittää, että taustavärin tulee olla vihreä.

Syvennymme valitsimiin, ominaisuuksiin ja arvoihin tarkemmin myöhemmissä luvuissa, mutta toistaiseksi riittää, että CSS:n avulla voidaan valita elementtejä ja määrittää tyylejä aaltosulkujen {} sisällä.

Mitä seuraavaksi?

Tulevissa luvuissa käsitellään valitsimia, ominaisuuksia, arvoja ja käytännön tyylittelytekniikoita. Lopuksi osaat muuntaa perus-HTML:n selkeiksi ja houkutteleviksi ulkoasuiksi.