CSS johdanto

Johdanto CSS:ään


Mikä on CSS?

  • CSS tulee sanoista Cascading Style Sheets
  • Tyylit määrittävät kuinka HTML elementit esitetään
  • Tyylit tallennetaan normaalisti tyylitiedostoihin
  • Tyyli lisättiin HTML 4.0:aan olemassa olevien ongelmien ratkaisemiseksi
  • Ulkoiset tyylitiedostot säästävät paljon työtä
  • Ulkoiset tyylitiedostot tallennetaan CSS-tiedostoina
  • Useat tyylimäärittelyt limittyvät yhdeksi

CSS demo

CSS:ää käyttäen, sama HTML-dokumentti voidaan esittää useaa eri tyylitiedostoa käyttäen.

Esimerkki


Tyylit ratkaisevat yleisen ongelman

HTML-tagit suunniteltiin alunperin määrittämään dokumentin sisältöä. Niiden oli määrä kertoa "tämä on otsikko", "tämä on kappale" ja "tämä on taulukko" tyylisiä määrittelyjä sopivia tageja käyttäen. Selaimen oli määrä huolehtia dokumentin ulkoasusta ilman että muotoilutageja tarvittaisiin.

Kun kaksi valtaselainta - Netscape ja Internet Explorer - jatkoivat uusien HTML tagien ja attribuuttien lisäämistä (kuten <font>-tagi ja color-attribuutti) alkuperäiseen HTML-määritykseen, tuli yhä vaikeammaksi luoda Web-sivuja joissa HTML-dokumenttien sisältö oli selkeästi erotettu niiden ulkoasusta.

Ongelman ratkaisemiseksi World Wide Web Konsortiumi (W3C) loi tyylit uutena ominaisuutena HTML 4.0:aan.  

Lähes kaikki selaimet tukevat nykyisin tyylien käyttöä.


Tyylitiedostot säästävät paljon työtä

Tyylitiedostot määrittävät kuinka HTML-elementit tulee esittää, aivan kuten <font>-tagi ja color-attribuutti HTML 3.2:ssa. Tyylit tallennetaan normaalisti ulkoisena .css-päätteisenä tiedostona. Ulkoinen tyylitiedosto mahdollistaa kaikkien sivuston Web-sivujen ulkoasun muuttamisen niin, että tarvitsee editoida ainoastaan yhtä CSS-dokumenttia!

CSS on läpimurto Web-suunnittelussa koska se mahdollistaa useiden Web-sivujen ulkoasun hallitsemisen yhdellä tiedostolla. HTML-elementeille voidaan määritellä tyyli ja asettaa se koskemaan niin montaa Web-sivua kuin halutaan. Kun tyyliä halutaan muuttaa, tarvitsee editoida ainoastaan tyylitiedostoa ja kaikkien sivujen ulkoasu muuttuu kerralla.


Useat tyylitiedostot limittyvät yhdeksi

Tyylitiedostot mahdollistavat tyylien määrittämisen usealla eri tavalla. Tyyli voidaan määrittää yksittäisen HTML-elementin sisällä, <head>-elementin sisällä kaikille sivulla oleville elementeille tai ulkoisessa tyylitiedostossa. Sama HTML-sivu voi jopa käyttää useampaa kuin yhtä ulkoista tyylitiedostoa. 

Limitysjärjestys

Mitä määritystä käytetään, jos tyylejä on määritelty samalle HTML-elementille useampi kuin yksi?




Voidaan sanoa, että tyylit "limittyvät" uudeksi "virtuaaliseksi tyylitiedostoksi".
Limityksessä käytetään seuraavia prioriteetteja (4 on korkein):

  1. Selaimen oletustyyli
  2. Ulkoinen tyylitiedosto
  3. <head>-tagissa annetut tyylimääritykset
  4. inline-tyyli (HTML-elementissä)

Korkeammalla prioriteetilla olevat tyylit ylittävät matalamman prioriteetin määritykset.