Miten luoda CSS

Miten lisätä tyyliarvo

Kun selain lukee tyyliarvon, se muotoilee HTML-dokumentin sen mukaisesti. Tyyliarvon lisäämistä varten on kolme tapaa:

Ulkoinen tyyliarvo

Kun tyylejä tarvitaan monilla sivuilla, ulkoinen tyyliarvo on täydellinen valinta. Ulkoisen tyyliarvon käytössä voit muuttaa yhden tiedoston avulla koko verkkosivuston ulkoasua. Jokainen sivu liittyy tyyliarvoon <link>-tagin avulla otsikossa:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Selain lukee tyylejä tiedostosta mystyle.css ja muotoilee sen mukaan dokumentin.

Ulkoinen tyyliarvo voidaan muokata millä tahansa tekstieditorilla. Tiedosto ei saa sisältää minkäänlaisia HTML-merkkejä. Tyyliarvo tulisi tallentaa .css-päätteenä. Tässä on esimerkki tyyliarvotiedostosta:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Älä jätä välilyöntiä ominaisuuden arvon ja yksikön välille. Jos käytät "margin-left: 20 px" sen sijaan, että "margin-left: 20px", se toimii vain IE 6:ssa, mutta ei Mozilla/Firefoxissa tai Netscape:ssa.

Sisäinen tyyliarvo

Kun yksittäiselle dokumentille tarvitaan erityisiä tyylejä, tulisi käyttää sisäistä tyylejä. Voit määritellä sisäisen tyyliarvon <style>-tagin avulla dokumentin otsikossa, kuten näin:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Sisäiset tyylit

Koska esitys ja sisältö sekoitetaan yhteen, sisäiset tyylit menettävät monia tyylejä hyödyllisiä ominaisuuksia. Käytä tätä menetelmää varoen, esimerkiksi kun tyylejä tarvitaan vain yhdessä elementissä.

Käyttääksesi sisäisiä tyylejä, sinun täytyy käyttää tyylejä (style) -ominaisuutta vastaavissa elementissä. Style -ominaisuus voi sisältää mitä tahansa CSS-ominaisuuksia. Tämä esimerkki näyttää, miten voit muuttaa kappaleen väriä ja vasenta ulkoreunaa:

<p> style="color: sienna; margin-left: 20px">
Tämä on kappale
</p>

Monikertainen tyyli

Jos jotkut ominaisuudet on määritetty eri tyyliohjelmissa samalla valitsimella, ominaisuusarvot otetaan tarkemmasta tyyliohjelmasta.

Esimerkiksi, ulkoisessa tyyliohjelmassa on kolme h3-valitsinta:

h3 {
  color: red;
  text-align: left;
  font-size: 8pt;
  }

Sisäinen tyyliohjelma omaa kaksi h3-valitsinta:

h3 {
  text-align: right; 
  font-size: 20pt;
  }

Jos tällä sivulla on sekä sisäinen että ulkoinen tyyliohjelma, h3-selaimen saama tyyli on:

color: red; 
text-align: right; 
font-size: 20pt;

Väriominaisuus perittyy ulkoisesta tyyliohjelmasta, mutta tekstin järjestys (text-alignment) ja fonttikoko (font-size) korvataan sisäisen tyyliohjelman säännöillä.