CSS on verkkosivujen ulkoasun muotoiluun kehitetty kieli, jota käytetään määrittelemään, miltä sivujen sisältö näyttää. Sen avulla voi muuttaa esimerkiksi tekstien värejä, fonttityylejä, asetteluja ja taustavärejä selvästi ja helposti.
Mikä on CSS ja mihin sitä käytetään
CSS eli Cascading Style Sheets on erillinen kieli, jota käytetään yhdessä HTML kanssa. Se mahdollistaa sivujen visuaalisen ilmeen yksityiskohtaisen hallinnan ja pitää rakenteen sekä ulkoasun selkeästi erillään. Tämä tekee muotoilusta joustavaa ja helpottaa muutosten tekemistä myöhemmin.
CSS on erityisen hyödyllinen silloin, kun sama ulkoasu halutaan useille sivuille. Yksi CSS-tiedosto voi muotoilla koko sivuston, mikä säästää aikaa ja vaivaa. Sivujen ulkoasun ylläpito ja päivitykset voidaan näin keskittää yhteen paikkaan.
CSSä voi muokata pieniä yksityiskohtia, kuten tekstin väriä, sekä suurempia kokonaisuuksia, kuten elementtien asettelua. Tämän takia se on olennainen osa nykyaikaista web-kehitystä (CSS perusteet).
Yleisin syntaksi ja rakenne
CSS säännöt koostuvat yleensä valitsimesta ja julistuksesta, joissa määritetään tyyliominaisuudet. Tärkeimmät osat:
- Valitsin (selector): Määrittää, mihin elementtiin sääntö kohdistuu.
- Ominaisuus (property): Kertoo, mitä ominaisuutta muutetaan.
- Arvo (value): Määrittelee ominaisuuden uuden arvon.
Esimerkki:
p {
color: blue;
font-size: 18px;
}
Tässä kaikki
-elementit saavat sinisen värin ja 18 pikselin fonttikoon.
Kaiken CSS-koodin kirjoitus toimii pääpiirteissään tällä tavalla, vaikka ominaisuuksia ja arvoja on satoja erilaisia. Hyvä muotoilu on myös luettavaa ja selkeästi ryhmiteltyä.
Selektorit ja valitsimet
Valitsimet ovat CSS ydin, koska niiden avulla kerrotaan, mihin HTML-elementteihin tyylimäärityksiä sovelletaan.
Yleisimmät valitsimet:
- Elementtivalitsin: Kohdistaa kaikki saman elementin (esim. p, h1).
- Luokkavalitsin: Käytetään pisteellä .class (esim. .otsikko).
- ID-valitsin: Käytetään risuaita-merkillä #id (esim. #pää).
Esimerkkejä:
h1 { color: red; }
.oma-luokka { background: yellow; }
#tunnus { font-weight: bold; }
Käyttämällä näitä voi valita yksittäisiä osia tai ryhmiä sivulta, ja muokata niitä helposti. Useampaa valitsinta voi myös yhdistää, jolloin muotoilusta saa hyvin yksilöllistä (lue lisää valitsimista).
Tärkeimmät CSS-ominaisuudet
CSSä tärkeimmät ominaisuudet liittyvät sivun ulkoasun, rakenteen ja responsiivisen toimivuuden määrittelyyn. Näiden työkalujen käyttö auttaa tekemään verkkosivusta helppolukuisen, hyvältä näyttävän ja toimivan eri laitteilla.
Värit ja taustat
Väritysten avulla sivun elementit erottuvat selkeästi toisistaan. CSSä värit määritellään useimmiten nimillä, heksakoodeilla (#FF0000) tai RGB-arvoilla. Esimerkiksi, tekstin ja taustan värit erotetaan ominaisuuksilla color ja background-color.
Taustakuvaa voi lisätä background-image-ominaisuudella, jonka avulla voidaan käyttää esimerkiksi valokuvia tai kuvioita. Taustaan liittyy myös ominaisuuksia kuten background-repeat, background-size, ja background-position, joilla hallitaan, miten kuva sijoittuu ja toistuuko se.
Tärkeimmät ominaisuudet:
- color
- background-color
- background-image
- background-repeat
- background-size
- background-position
Värit ja taustat vaikuttavat sivun luettavuuteen ja tunnelmaan. Kannattaa valita kontrastiltaan selkeitä väriyhdistelmiä. Lisätietoa kannattaa katsoa kohdasta CSS perusteet: syntaksi, ominaisuudet ja arvot.
Typografia ja fonttien hallinta
Tekstin ulkoasu tehdään pääasiassa typografian CSS-ominaisuuksilla. Fonttikoko määritellään font-size-ominaisuudella, ja fonttiperhe valitaan font-family-ominaisuudella. Fontin painotus ja tyyli taas määritetään font-weight ja font-style-ominaisuuksilla.
Listaus yleisimmistä typografiaominaisuuksista:
- font-family
- font-size
- font-weight
- font-style
- text-align
- line-height
- text-decoration
Esimerkiksi otsikot voivat käyttää paksumpaa kirjasinta (font-weight: bold), kun taas leipätekstissä käytetään selkeää ja helposti luettavaa fonttia. Tekstien välistys hoidetaan line-height-ominaisuudella, joka parantaa luettavuutta. Alleviivauksen ja muiden tyylien luomiseen käytetään text-decoration.
Laatikon malli ja marginaalit
CSS laatikkomalli tarkoittaa sitä, että jokaista sivun elementtiä kohdellaan laatikkona. Jokaisella laatikolla on sisältö, reunukset (border), täyte (padding) ja ulkoiset marginaalit (margin). Näitä hallitaan seuraavilla ominaisuuksilla:
- width ja height (koko)
- padding (sisäinen tila)
- border (reunat)
- margin (ulkoinen tila)
Tämä rakenne auttaa määrittämään esimerkiksi nappien, kuvien ja tekstilaatikoiden sijainnin ja koon tarkasti. Esimerkiksi, margin: 20px; lisää 20 pikselin tyhjän tilan elementin ulkopuolelle. padding taas pitää sisällön erossa reunoista. Lisää aiheesta CSS (Cascading Style Sheets) – ITKP1011 Web-julkaiseminen.
Responsiivinen suunnittelu
Responsiivinen suunnittelu tekee sivustosta mukautuvan eri näyttöjen kokoihin. CSSä tätä tehdään mm. media queries -ominaisuudella (@media). Sillä voidaan määrittää, miltä sivu näyttää puhelimessa, tabletilla tai tietokoneella.
Keskeiset ominaisuudet tähän ovat:
- @media (media queries)
- max-width ja min-width
- flexbox sekä grid
Responsiivisuudessa on tärkeää käyttää suhteellisia yksiköitä kuten prosentteja (%) ja em-yksiköitä, jolloin sisältö skaalautuu joustavasti. Tämän ansiosta sivu näyttää hyvältä niin pienellä näytöllä kuin suurella tietokoneella. Perusasiat voi oppia esimerkiksi CSS Tyylitiedoston Käyttö | Web-kehityksen Perusteet | Hakatemia.
CSS käyttövinkit ja parhaat käytännöt
Hyvin järjestetty CSS auttaa löytämään oikeat kohdat nopeasti ja säästää aikaa päivitysten yhteydessä. Koodin uudelleenkäytettävyys tekee koko sivuston muotoilusta helpompaa ja vähentää virheitä.
Tyylitiedoston järjestely
Selkeä CSS-tiedosto on helppolukuinen ja nopea muokata. On hyödyllistä ryhmitellä koodi loogisesti, esimerkiksi otsikoiden, kappaleiden sekä painikkeiden mukaan. Tällöin samankaltaiset tyylit löytyvät vierekkäin, ja laajoista tiedostoista tulee helpompia hallita.
Kommenttien lisääminen auttaa muita koodinlukijoita (tai itseä myöhemmin) ymmärtämään, mihin tyylit liittyvät. Esimerkiksi /* Ylätunnisteen tyylit */ kertoo nopeasti, mistä on kyse. Suuret projektit hyötyvät myös modulaarisesta rakenteesta, jossa CSS jaetaan esimerkiksi osiin, kuten layout, värit ja elementit.
Yhtenäinen nimetyskäytäntö (kuten BEM tai hyvien luokanimiä koskevien sääntöjen käyttäminen) vähentää sekaannuksia. On järkevää käyttää pieniä kirjaimia ja välttää erikoismerkkejä.
Tärkeitä vinkkejä:
- Ryhmittele tyylejä logiikan mukaan
- Lisää selkeät kommentit
- Käytä yhtenäistä nimistöä
Ylläpidettävyys ja uudelleenkäyttö
CSS ylläpidosta tulee sujuvaa, kun samoja tyylejä voi käyttää uudelleen. Yksi keino on luoda yleiskäyttöisiä luokkia, kuten .btn tai .main-title. Kun samoja luokkia käytetään eri puolilla sivua, muutokset vaikuttavat kaikkiin kohteisiin kerralla.
On suositeltavaa käyttää suhteellisia yksiköitä (esim. em, rem) absoluuttisten sijaan. Tämä helpottaa mukauttamista eri laitteille ja parantaa saavutettavuutta, kuten kerrotaan CSS perusteista.
Yhtenäisyys tuo selkeyttä. Esimerkiksi värien säilyttäminen muuttujissa varmistaa saman ilmeen koko sivustolla. Preprosessorit kuten Sass mahdollistavat muuttujien ja sekoitusten käytön, mikä tekee koodista entistä tehokkaampaa.
Hyviä tapoja ylläpidettävään CSS:ään:
- Käytä uudelleenkäytettäviä luokkia
- Suosi suhteellisia yksiköitä
- Hyödynnä muuttujia väreissä ja fonteissa
- Dokumentoi ratkaisut kommentein