CSS
Aloittelijan CSS-opas - Opi CSS:n perusteet selkeästi ja ilmaiseksi
Voit lukea tämän opassarjan alusta loppuun tai siirtyä suoraan sinulle tärkeisiin aiheisiin. Sarjan rakenne tukee molempia oppimistapoja.
Johdatus CSS:ään – Näin pääset alkuun CSS:n kanssa
Opi mitä CSS on ja miten se muutti web-kehitystä. Tutustu sen periaatteisiin, versioihin ja CSS-tyylien kirjoittamiseen tarvittaviin taitoihin.
Näin liität CSS-tyylin HTML-dokumenttiin
Opi eri tavat liittää CSS-tyylejä HTML-dokumenttiin: rivinsisäinen, upotettu, ulkoinen ja tuotu tyyli. Tunnista tilanteeseesi sopiva tapa.
Kuinka kohdistaa CSS-tyylit eri ympäristöihin HTML:n media-attribuutilla
Opi, kuinka HTML:n media-attribuutti mahdollistaa CSS:llä toteutun ulkoasun kohdentamisen eri laitteille ja ympäristöihin.
CSS:n @-säännöt – yleiskatsaus
Katsaus CSS:n @-sääntöihin ja niiden keskeisiin käyttötapoihin kuten tyylien tuontiin, mediarajauksiin ja web-fonttien lataamiseen.
CSS:n @media-sääntö ja mediakyselyt(mediaqueryt)
Opi CSS:n @media-sääntöjen ja mediaqueryjen rooli responsiivisessa web-suunnittelussa, RWD:n yleisimmät breakpointit ja meta viewportin merkitys.
CSS:n @page-sääntö ja sivutettu media
Hallitse CSS:n @page-sääntö ja sivutettu media: sivukoot, marginaalit, leikkausmerkit, sivunvaihdot ja typografian hallinta tulostuksessa.
CSS:n Cascade-prosessi
Opi, miten CSS:n Cascade-prosessi mahdollistaa eri lähteistä olevien tyylisääntöjen yhdistämisen ja priorisoinnin sivun esityksessä.
CSS:n valitsimet
Opi kohdistamaan tyylit tarkasti. Esittelyssä tyyppivalitsimet, luokka- ja ID-valitsimet, attribuuttivalitsimet sekä pseudovalitsimet.
Miten CSS-säännöt periytyvät
Opi, miten CSS:n periytyminen helpottaa tyylien hallintaa. Opettele hyödyntämään periytymistä ja kirjoita selkeämpiä ja tehokkaampia tyylejä.
CSS:n syntaksi, ominaisuudet, arvot ja mittayksiköt
Opi CSS:n syntaksi, ominaisuudet ja arvot. Tuntemalla nämä perusteet kirjoitat selkeämpää, tehokkaampaa ja helpommin ylläpidettävää koodia.
CSS:n laatikkomalli määrää elementin koon ja asettelun
Opi CSS:n laatikkomallin (box model) perusteet. Ymmärrä, miten näiden laatikoiden ominaisuudet vaikuttavat elementin ulkoasuun ja sijoitteluun.
Kuinka CSS ja JavaScript tukevat toisiaan
Opi, miten CSS ja JavaScript toimivat yhdessä ja miten parhaat käytännöt kuten classList ja progressiivinen parannus ovat kehittyneet.
Opi CSS-tyylien parhaat käytännöt ja sudenkuopat
Opi CSS-tyylien edut, sudenkuopat ja parhaat käytännöt. Saat työkaluja, joiden avulla voit kirjoittaa selkeämpää ja helpommin ylläpidettävää koodia.
CSS:n selainkohtaiset laajennukset, fallback-arvot ja feature detection (@supports)
Opi, miten rakennat CSS-tyylejä, jotka toimivat eri selaimissa. Tutustu CSS:n vendor prefixeihin, fallback-arvoihin ja @supports-sääntöön.
CSS-tyylimäärittelyjen referenssi
CSS-referenssi listaa yleisimmät CSS 1 ja CSS 2 -ominaisuudet. Hyödynnä sitä koodauksen tukena ja nopeuta työtäsi.
Suosittelemme myös tutustumaan käytännönläheiseen CSS-koulutukseen, joka on saatavilla kautta Suomen joko lähiopetuksena tai verkkokurssina. Asiantuntijaopastuksen avulla opit CSS:n käytön ohjatusti ja syvällisesti. Tutustu koulutuksen sisältöön ja ilmoittaudu mukaan.