CSS määrittää, miltä sivustosi näyttää. Värit, fontit, välit ja asettelu: kaikki on CSS:ää. Opi, mitä se on, miten se toimii ja miksi sillä on väliä brändillesi.
Oletko koskaan käynyt kahdella sivustolla, joiden sisältö on lähes sama mutta jotka näyttävät täysin erilaisilta? Toinen on viimeistelty, siisti ja helppolukuinen. Toinen tuntuu sekavalta, vanhanaikaiselta ja vaikealta selata. Sisältö voi olla identtinen. Se, mikä saa ne näyttämään niin erilaisilta, on CSS.
Edellisessä luvussa opit, että HTML antaa verkkosivulle rakenteen. Se kertoo selaimelle, mitä kaikki on: otsikko, kappale, kuva, painike. Mutta HTML:llä ei yksinään ole tyyliä. Ilman CSS:ää jokainen sivusto näyttäisi pelkältä tekstiasiakirjalta. CSS muuttaa tuon rakenteen visuaaliseksi kokemukseksi.
Mikä on CSS?
CSS tulee sanoista Cascading Style Sheets. Se on kieli, joka määrittää verkkosivun visuaalisen esitystavan. Kun HTML sanoo "tämä on otsikko", CSS sanoo "tämän otsikon pitäisi olla tummansininen, 32 pikseliä korkea ja käyttää tätä tiettyä fonttia". Kun HTML sanoo "tämä on painike", CSS sanoo "tämän painikkeen pitäisi olla vihreä, siinä pitäisi olla pyöristetyt kulmat ja sen pitäisi olla 20 pikselin päässä yläpuolella olevasta tekstistä".
Jokainen sivustolla näkemäsi visuaalinen valinta, kuten värit, fontit, koot, välit, asettelut, hover-efektit ja taustat, tulee CSS:stä. Se on verkon suunnittelukerros.
Miten CSS toimii?
CSS toimii kohdistamalla tyylisääntöjä HTML-elementteihin. Kerrot CSS:lle, mitä elementtiä tyylitellään, ja kuvailet sitten, miltä sen pitäisi näyttää. Nämä säännöt kirjoitetaan erilliseen tiedostoon, jonka selain lataa HTML:n rinnalle. Kun selain lukee molemmat tiedostot yhdessä, se soveltaa tyylit vastaaviin elementteihin ja näyttää valmiin sivun.
Nimen "cascading" eli kaskadoituva osa viittaa siihen, miten CSS ratkaisee ristiriidat. Jos samaan elementtiin kohdistuu useita tyylisääntöjä, CSS noudattaa tiettyä tärkeysjärjestystä päättääkseen, mikä sääntö voittaa. Täsmällisemmät säännöt ohittavat yleisemmät. Tämä järjestelmä antaa suunnittelijoille tarkan hallinnan siitä, miltä jokainen elementti näyttää koko sivustolla.
CSS:n tyypit
CSS:ää voi kirjoittaa kolmella eri tavalla. Jokainen toimii, mutta ne eivät sovi yhtä hyvin kaikkiin tilanteisiin.
1. Inline-CSS
Inline-CSS kirjoitetaan suoraan yhteen HTML-elementtiin. Se vaikuttaa vain siihen yhteen elementtiin ja ohittaa kaikki muut siihen kohdistuvat tyylit. Se on hyödyllinen nopeisiin kertaluontoisiin muutoksiin, mutta muuttuu ongelmaksi isommassa mittakaavassa. Jos haluat päivittää värin, jota käytetään 50 elementissä, joudut muuttamaan sen 50 paikassa yhden sijaan.
2. Sisäinen CSS
Sisäinen CSS kirjoitetaan style-tagin sisään itse HTML-tiedostoon, yleensä sivun alkuun. Se koskee vain kyseistä sivua. Tämä sopii yksittäisille sivuille tai pienille projekteille, mutta koko sivustolla se tarkoittaa samojen tyylien toistamista jokaisella sivulla. Kun muutat yhtä asiaa, joudut päivittämään jokaisen tiedoston erikseen.
3. Ulkoinen CSS
Ulkoinen CSS sijaitsee erillisessä tiedostossa, joka on linkitetty HTML-sivuihisi. Tämä on vakiotapa kaikille oikeille sivustoille. Määrittelet kaikki tyylisi kerran yhdessä tiedostossa, ja jokainen sivu, joka linkittää siihen, perii nuo tyylit. Kun muutat värin tai fontin yhdessä paikassa, se päivittyy heti kaikkialle. Se on siistimpi, latautuu nopeammin ja on paljon helpompi ylläpitää. Lähes jokainen hyvin rakennettu sivusto käyttää perustanaan ulkoista CSS:ää.
Mitä CSS ohjaa sivustollasi
CSS koskettaa lähes jokaista sivustosi visuaalista puolta. Tässä tärkeimmät alueet, joita se hoitaa.
Värit ja taustat
Jokainen sivustosi väri, kuten tekstin väri, taustaväri, painikkeen väri ja reunuksen väri, asetetaan CSS:llä. Brändisi värit saadaan käyttöön yhtenäisesti koko sivustolla määrittelemällä ne kerran CSS:ssä ja käyttämällä niitä kaikkialla.
Typografia
Sivustosi käyttämä fontti, otsikoiden ja leipätekstin koko, rivien väli ja se, onko teksti lihavoitua vai kursivoitua: kaikki tämä on CSS:ää. Hyvä typografia tekee sisällöstä helpompaa lukea ja vahvistaa brändisi identiteettiä.
Asettelu ja välit
Miten sarakkeet on järjestetty, kuinka paljon tilaa osioiden välissä on, kuinka leveä sisältöalue on ja missä sivupalkki näkyy: CSS ohjaa kaikkea tätä. Asettelusäännöt määrittävät jokaisen sivun kokonaisrakenteen HTML:n tarjoaman lisäksi.
Responsiivinen toiminta
CSS saa myös responsiivisen suunnittelun toimimaan. CSS:n media queryt kertovat selaimelle, että se soveltaa eri tyylejä näytön koon mukaan. Työpöydällä sisältö voi näkyä kolmessa sarakkeessa. Puhelimella CSS järjestää nämä sarakkeet pinoon allekkain, jotta kaikki mahtuu pienemmälle näytölle.
Animaatiot ja tehosteet
Painikkeiden hover-efektit, pehmeät siirtymät osioiden välillä ja sisällön häivytys näkyviin vierittäessä: nämä ovat kaikki CSS:ää. Ne tuovat kokemukseen liikettä ja viimeistelyä ilman JavaScriptiä.
Mitä tämä tarkoittaa sivustollesi brändin omistajana
Sinun ei tarvitse kirjoittaa CSS:ää, jotta sivustosi olisi hyvin suunniteltu. Sivustonrakentajat hoitavat sen puolestasi. Kun valitset pohjan, brändivärisi ja fonttisi, alusta muuttaa nämä valinnat taustalla CSS-säännöiksi. Jokainen muutos, jonka teet visuaalisessa editorissa, tuottaa CSS:ää, jonka selain lukee ja ottaa käyttöön.
Sinulle tärkeää on, että alustasi tuottama CSS on siistiä ja tehokasta. Raskas tai turhan laaja CSS hidastaa sivujesi latautumista. Hyvin kirjoitettu CSS pitää sivustosi nopeana ja yhtenäisenä jokaisella sivulla. WEMASY-sivustonrakentaja tuottaa optimoitua CSS:ää automaattisesti, joten suunnitteluvalintasi toimivat siististi ilman, että sivuillesi tulee turhaa painoa. Jos haluat ymmärtää, miten tämä liittyy suorituskykyyn, lue mikä on sivuston nopeus ja miksi sillä on väliä.
Usein kysytyt kysymykset
Pitääkö minun opetella CSS:ää rakentaakseni sivuston?
Ei. Sivustonrakentajalla hallitset sivustosi ulkoasua visuaalisella editorilla. Alusta kirjoittaa CSS:n puolestasi. CSS:n perusteiden tunteminen on hyödyllistä, jos haluat ymmärtää, miksi asiat näyttävät siltä kuin näyttävät, mutta sinun ei tarvitse kirjoittaa riviäkään sitä rakentaaksesi ammattimaisen sivuston WEMASY-sivustonrakentajalla.
Mitä eroa on CSS:llä ja HTML:llä?
HTML määrittää verkkosivun rakenteen eli sen, mitä kukin sisältö on. CSS määrittää, miltä se näyttää. HTML luo otsikon. CSS tekee otsikosta tietyn värisen, kokoisen ja fonttisen. Ne toimivat yhdessä: HTML tarjoaa elementit ja CSS tyylittelee ne.
Voiko CSS vaikuttaa sivuston nopeuteen?
Kyllä. Suuret ja tehottomat CSS-tiedostot lisäävät painoa jokaiseen sivun lataukseen. Optimoimaton CSS voi myös estää selainta piirtämästä sivua, kunnes se on lukenut kaikki tyylit, mikä viivästyttää sitä, kuinka nopeasti kävijät näkevät sisältösi. Siisti ja minimaalinen CSS latautuu nopeammin. Siksi hyvin koodatulle alustalle rakentamisella on merkitystä sivuston nopeudelle.
Mikä on CSS-kehys (framework)?
CSS-kehys on valmiiksi kirjoitettu kokoelma CSS-sääntöjä, joita kehittäjät käyttävät lähtökohtana sen sijaan, että kirjoittaisivat kaiken tyhjästä. Se nopeuttaa kehitystä ja tarjoaa valmiiksi yhtenäiset, testatut tyylit. Useimmat sivustonrakentajat käyttävät sisäisesti CSS-kehystä, joten niiden tuottamat pohjat ovat jo hyvin jäsenneltyjä ja luotettavia.
Voiko CSS:llä saada sivuston näyttämään hyvältä sekä työpöydällä että mobiilissa?
Kyllä, ja tämä on itse asiassa yksi CSS:n tärkeimmistä tehtävistä. Media queryjen avulla CSS soveltaa eri tyylejä näytön koon mukaan. Leveällä työpöytänäytöllä sisältö voi näkyä useassa sarakkeessa ja isoilla kuvilla. Puhelimella samat sarakkeet pinoutuvat allekkain, fonttikoot mukautuvat ja välit tiivistyvät pienemmälle näytölle sopiviksi. Näin responsiivinen suunnittelu toimii, ja kaikki hoituu CSS:llä ilman, että sivustostasi tarvitaan erillistä mobiiliversiota.
Mitä tapahtuu, jos CSS ei lataudu sivulle?
Jos CSS-tiedosto ei lataudu, sivu näkyy silti, mutta ilman tyylejä. Näet pelkkää tekstiä ja kuvia ilman värejä, fontteja tai asettelua. Kaikki on pinottu allekkain siinä järjestyksessä, jossa se esiintyy HTML:ssä. Se näyttää rikkinäiseltä, mutta sisältö on teknisesti edelleen paikalla. Tämä on harvinaista hyvin ylläpidetyillä alustoilla, mutta se muistuttaa hyvin siitä, kuinka paljon visuaalista työtä CSS tekee hiljaa jokaisella sivulla.