CSS-kielen perusteet

Olemme jo käsitelleet HTML-kielen perustageja, ja nyt on aika tehdä kauneutta. Olisi hienoa pystyä vaihtamaan tekstin väriä, sen kokoa, taustaa ja paljon muuta. Tämä tehdään CSS-kielellä.

Yleensä CSS-komennot (tyylit) säilytetään erillisessä tiedostossa, joka liitetään erityisellä tagilla kaikkiin sivuston HTML-sivuihimme.

Tämän lähestymistavan etuna on, että CSS-tiedosto on yksi, mutta HTML-tiedostoja voi olla minkä tahansa määrä, vaikka tuhat. Jos teemme muutoksen yhdessä paikassa CSS-tiedostoa, esimerkiksi muutamme kaikki kappaleet punaiseksi, nämä muutokset otetaan käyttöön kaikilla tuhannella HTML-sivulla, johon CSS-tiedostomme on liitetty. Erittäin kätevää ja nopeaa.

Tiedosto, jossa on tyylit, tulee olla päätteellä .css. Liittääksesi tällaisen tiedoston HTML-sivulle, head -tagin tulee sisältää seuraava rakenne:

html<link rel="stylesheet" href="fileName.css">

Seuraavassa esimerkissä HTML-tiedostoomme liitetään CSS-tiedosto styles.css:

html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>This is the title</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <p>
      This is a paragraph with text.
    </p>
  </body>
</html>