Mikä on CSS?

CSS (Cascading Style Sheets) on tyylikieli, joka määrittelee verkkosivun ulkoasun ja taiton erillään HTML:stä. CSS:n käyttö mahdollistaa verkkosivujen tarkemman muotoilun, joustavuuden ja yhtenäisen ulkonäön eri laitteilla.

Olet tähän mennessä nähnyt melko vanhanaikaisen ja ruman näköistä HTML:ää. CSS:llä sivusto saadaan näyttämään juuri niin upealta kuin mihin mielikuvituksesi ja CSS-taitosi riittää.

Tässä on esimerkki napista joka on stailattu CSS:llä:

.button {
  display: inline-block;
  border: none;
  border-radius: 20px;
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}   
/* Hover styles */
.button:hover {
  background-color: #3e8e41;
  box-shadow: 0 12px 20px rgba(0, 0, 0, 0.4);
}   
/* Active styles */
.button:active {
  background-color: #3e8e41;
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.4);
  transform: translateY(2px);
}

<a href="#" class="button">Klikkaa mua!</a>

CSS:n Historia

CSS:n kehitys alkoi jo vuonna 1994, kun Håkon Wium Lie ja Bert Bos kehittivät ensimmäisen version tyylikielistä nimeltä Cascading HTML Style Sheets (CHSS). Tämä oli ensimmäinen yritys erottaa verkkosivujen sisältö ja ulkoasu toisistaan.

Seuraavana vuonna 1995 tuli CSS1, joka oli ensimmäinen standardoitu CSS-versio. CSS1 määritteli perusominaisuudet, kuten värin, fontin ja taustan määrittelyn. CSS2 julkaistiin vuonna 1998 ja se toi mukanaan muun muassa media queryt, jotka mahdollistavat sivujen muotoilun eri näyttölaitteille sopivaksi.

CSS3 on viimeisin standardoitu versio ja se sisältää paljon uusia ominaisuuksia, kuten monimutkaisia taustakuvioita, animaatioita ja liukuvärejä. CSS3 on jaettu eri moduuleihin, kuten Selectors, Box Model, Backgrounds and Borders ja Typography.

CSS:n kehitys on ollut nopeaa, ja uusia ominaisuuksia lisätään jatkuvasti. CSS:n tärkeys verkkosivujen muotoilussa on kasvanut merkittävästi, ja se on nykyään välttämätön osa modernia web-kehitystä.