CSS:n perusteet

CSS = Cascading Style Sheets eli "tyylisäännöstöjen sarja"

HTML = sivun sisältö ja rakenne

CSS = sisällön ja rakenteen tyylittely, koristelu ja layout

CSS:n avulla voidaan antaa dokumentin esitysasua koskevia ehdotuksia selaimille.

Eri selaimet saattaa näyttää asiat hieman eri tavalla. Safari on tällä hetkellä se joka aiheuttaa eniten ongelmia.

CSS on erilaisten tyyliä koskevien "sääntöjen" määrittelemistä HTML elementeille.

p {
  color: red;
}

Mitä tämä sääntö tekee?

p {
  color: red;
}

p eli paragraph elementtien tekstisisältö muuttuu punaiseksi

p {
  color: red;
}

selektori valitsee, mitä elementtejä sääntö koskee.

p {
  color: red;
}

aaltosulkujen sisään tulee deklaraatio joka määrittää elementin jollekkin ominaisuudelle jonkun arvon.

p {
  color: red;
}

deklaraation ensimmäinen osa on ominaisuus jota määritellään. Ominaisuus voi olla esimerkiksi väri, koko, kirjasinlaji tai vaikka taustakuva.

p {
  color: red;
}

ominaisuuden jälkeen tulee kaksoispiste eli : -merkki

p {
  color: red;
}

Ominaisuudelle määritellään joku arvo.

Tässä säännössä p elementtien (selektori) väriksi (ominaisuus) määritellään punainen (arvo).

p {
  color: red;
}

Yhden deklaraation loppuun tulee aina puolipilkku eli ; -merkki

p {
  color: red;
}

Sanotaan selaimelle (sääntö) että <p> elementtien (selektori) väriksi (ominaisuus) laitetaan punainen (arvo).

p {
  color: red;
  font-weight: bold; 
}

Yhdessä säännössä voi olla useita deklaraatioita jotka tulevat omille riveillensä.

p {
  color: red;
}
h1 {
  font-size:5rem;
}

Myös sääntöjä voi olla useita. Ne tulevat peräkkäin.

h1, p {
  color: red;
}

Sääntö voi koskea useampaa kuin yhtä selektoria. Selektorit erotetaan toisistaan pilkulla.

Säännöille annettavia ominaisuuksia ja niiden arvoja on satoja. Kaikki löytyvät hyvin selitettyinä ja havainnollistettuina mm. MDN:n sivuilta.

Kaikkia sääntöjä ei missään nimessä tarvi opetella tai muistaa ulkoa. Tärkeää on tietää perusperiaatteet ja osittain sen mikä on mahdollista jotta tiedon voi löytää myöhemmin.

Pääsääntöisesti sivun tulisi toimia ilman CSS tyylejä!

Nettisivuja kannattaa lähetä toteuttamaan sisältö edellä (HTML:llä). Kun on jotain sisältöä, on paljon helpompi lähteä miettimään miten sen haluaa muotoilla.

Jos tiedät mitä haluat saada aikaa mutta et tiedä miten, käytä hakukonetta. Jos haluat vaihtaa tekstikappaleen värin punaiseksi mutta et tiedä miten, voit etsiä esim. "mdn paragraph color".