CSS-opas, CSS - Pseudo-esimerkkejä

:active

CSS-ohje jolla voidaan korostaa kohdetta kun sitä klikataan hiirellä tai painetaan kosketusnäytöllä.



Esimerkin koodaukset:


  CSS:

  p:active, h2:active, a:active, div:active{
    background-color: yellow;
  }
  div {
    background-color: RGB(236, 255, 179);
    width: 100px;
    border: 1px solid green;
    padding: 10px;
    margin: 20px;
    text-align: center;
  }
 
  HTML:

  <h2>OTSIKKO (klikkaa)</h2>
  <p>Tekstiä (klikkaa)</p>
  <a href="https://www.nasa.gov/"  target="_blank"> Nasa </a>
  <a href="http://www.disney.com" target="_blank"> Disney </a>
  <a href="http://www.wikipedia.org" target="_blank"> Wikipedia </a>
  <div> Klikkaa </div>

input:checked / option:checked

Esimerkki lomakkeissa käytetyistä valintaruuduista.

Kahvi
Tee
Voileipä
Viineri 

  CSS:

  input:checked {
    height: 10px;
    width: 20px;
  }
  .annos{
    color: RED;
  }

  
  HTML:

  <div class="annos">
   <form action="">
    <input type="radio" checked="checked" value="kahvi" name="juoma"> Kahvi <br>
    <input type="radio" value="tee" name="juoma"> Tee <br>
    <input type="checkbox" checked="checked" value="leipä"> Voileipä <br>
    <input type="checkbox" value="pulla"> Viineri 
   </form>
  </div>

Lomakeissa käytetty valintakenttä, leveyden muotoilu


  CSS:

  option:checked {
    height: 20px;
    width: 100px;
  }
 
  HTML:

  <select>
   <option value="volvo"> Volvo </option>
   <option value="saab">  Saab  </option>
   <option value="opel">  Opel  </option>
   <option value="audi">  Audi  </option>
  </select>

:enabled / :disabled

Lomakekentään voidaan kirjoittaa tai estää kirjoitus sekä asettaa kentälle taustaväri:

Etunimi:
Sukunimi:
Yritys: 

  CSS:

  input[type=text]:enabled {
    background: #ffff00;
  }
  input[type=text]:disabled {
    background: #dddddd;
  }
 
  HTML:

  <form action="">
    Etunimi:  <input type="text" value="Matti"><br>
    Sukunimi: <input type="text" value="Meikäläinen"><br>
    Yritys:   <input type="text" disabled="disabled" value="Nokia">
  </form>

:empty

HTML-elementti jossa ei ole sisältöä, esimerkissä p-elementti.

Tekstiä

Jotain muuta tekstiä


Esimerkin koodaus:


  CSS-ohje (ei hyvä vaihtoehto):

  p:empty {
    width: 100px;
    height: 20px;
    background: #ff0000;
  } 
 
  HTML-koodaus:

  <p>Tekstiä</p>
  <p"> </p>
  <p>Jotain muuta tekstiä</p>
  
  
  TOIMII MYÖS NÄINKIN:
  CSS-ohje (paras vaihtoehto):

  #tyhja:empty {
    width: 100px;
    height: 20px;
    background: #ff0000;
  } 
 
  HTML-koodaus:

  <p>Tekstiä</p>
  <p id="tyhja"></p>
  <p>Jotain muuta tekstiä</p>


:first-child

Muotoilee HTML-elementtien jälkeen ensimmäisinä olevat elementit jos ne ovat CSS-ohjeessa määriteltyjä elementtejä.

Esimerkki. CSS-ohje kohdistuu molempien div:ien ensimmäisiin p-elementteihin:

Tämä on 1. p-elementti.

Joku otsikko

Tässä on 1. p-elementti div-elementissä.

Tämä on div:n 2. p-elementti.

Tämä p-elementti on div:n ulkopuolella.



  CSS-ohje: 
  (huono tapa, muotoilisi kaikki ensimmäiset p-elementit)

  p:first-child {
    background-color: yellow;
  } 
 

 CSS-ohje (paras tapa):

  #korosta:first-child {
    background-color: yellow;
  } 
 
  HTML-koodaus:
  
  <div style="color:blue">
   <p id="korosta"> Tämä on 1. p-elementti. </p>
   <h2> Joku otsikko </h2>
   <p id="korosta"> Tämä on 2. p-elementti. </p>

   <div>
     <p id="korosta"> Tässä on 1. p-elementti div-elementissä. </p>
     <p id="korosta"> Tämä on div:ssä 2. p-elementti.</p>
   </div>
  
   <p>Tämä p-elementti on div:n ulkopuolella mutta body-elementissä.</p>
  </div>


:first-of-type

Muotoilee jonkin HTML-elementin jälkeen ensimmäisen CSS-ohjeessa määritellyn tyyppisen elementin.

Esimerkki. CSS-ohje kohdistuu div:n ensimmäiseen p-elementtiin:

Teksti 1.

Teksti 2.

Teksti 3.

Teksti 4.



  CSS-ohje (paras tapa):

  #puke:first-of-type {
    background: red;
    color: yellow;
  } 
 
  HTML-koodaus:
  
  <div style="color:blue">
   <p id="puke">Teksti 1.</p>
   <p id="puke">Teksti 2.</p>
   <p id="puke">Teksti 3.</p>
   <p id="puke">Teksti 4.</p>
  </div>


:focus

Muotoilee klikatun eli valitun HTML-elementin, soveltuu lomake-kenttille (form-elementeissä).

Esimerkki. Lomake-kenttä jonka klikkaaminen vaihtaa kentän värin, kokeile klikkaamalla:




  Yleinen CSS-ohje, ohje kaikille www-sivun lomakentille:

  input:focus {
    background-color: cyan;
  } 
  
  
  Esimerkissä käytetty CSS-ohje, id-nimellä merkityille:

  #kentta:focus {
  background-color: cyan;
  }
 
  HTML-koodaus esimerkin kentille:
  (yleisesti ei tarvita id:n avulla liittämistä)
  
  <form>
   Etunimi: <input id="kentta" type="text" name="enimi"><br>
   Sukunimi: <input id="kentta" type="text" name="snimi">
  </form>


Esimerkissä kenttään klikkaus suurentaa kentän leveyttä:

Etsi: 

  Yleinen CSS-ohje, ohje www-sivun kaikille lomakentille:

  input[type=text] {
    width: 100px;
    -webkit-transition: width .35s ease-in-out;
    transition: width .35s ease-in-out;
  }
  input[type=text]:focus {
    width: 250px;
  } 
  
  
  Esimerkissä käytetty CSS-ohje, id-nimellä merkitylle kentälle:

  #kentta1[type=text] {
  width: 100px;
    -webkit-transition: width .35s ease-in-out;
    transition: width .35s ease-in-out;
  }
  #kentta1[type=text]:focus {
    width: 250px;
  }
 
  HTML-koodaus:
  (yleisesti ei tarvita id:n avulla liittämistä)
 
  Etsi: <input id="kentta1" type="text" name="search">


:hover

Tämän CSS-ohjeen avulla voidaan muotoilla useita eri HTML-elementtejä, linkkien muotoilut löytyy tästä oppaasta Teksti-Linkit kohdasta.

Esimerkkissä, hover-ohjeet otsikolle, kuvalle ja tekstille:



Esimerkin koodaus:


  CSS-ohjeet:

  img{
    border: 1px solid gray;
  }
  img:hover {
    border: 3px solid cyan;
  }
  p:hover{
    color: RED;
  }
  h2:hover{
    color:BLUE;
  }
  .kikka:hover{
    color: YELLOW;
  }
  #kursivoi:hover{
   color: RGB(153, 50, 204);
   font-style: italic;
  } 
 
  HTML-koodaus:

  <2> Otsikkolle hover-ohje </h2> 
  <img src="tikru.jpg" width="30%">
  <p> Muotoilu p-elementille </p>
  <h3 class="kikka"> Keltaiseksi vaihtuva otsikko </h3>
  <h3 id="kursivoi"> Kursivoiduksi muuttuva </h3>


:in-range

CSS-ohjeen avulla voidaan muotoilla numero-kenttä.

Esimerkkissä viivan muotoilu:

Esimerkin koodaus:


  YLEINEN CSS-ohje:

  input:in-range {
    border: 2px solid RED;
  } 
 
  ESIMERKIN CSS-ohje:
  
  #ikakentta:in-range {
    border: 2px solid RED;
  }
  
  HTML-koodaus:

  <input id="ikakentta" type="number" min="5" max="10" value="7">


:invalid

CSS-ohjeen avulla voidaan "ilmoittaa" esimerkiksi virheestä email-soitteesta.

Esimerkki:



Esimerkin koodaus:


  ESIMERKIN CSS-ohje:
  
  input:invalid {
    border: 2px solid red;
  }
  
  HTML-koodaus:

  <input type="email" value="supportEmail">


:last-child ja :last-of-type

CSS-ohjeilla :last-child ja :last-of-type voidaan muotoilla viimeinen ohjeessa annettu elementti.


  Yleinen CSS-ohje, muotoilisi myös kaikki www-sivulla div-elementeissä
  olevat viimeiset p-elementit:
  
  p:last-child {
  color: #ff0000;
  font-size: 120%;
  }
  
  HTML-koodaus:

  <p>Teksti 1, p-elementti.</p>
  <p>Teksti 2, p-elementti.</p>
  <p>Teksti 3, p-elementti.</p>
  <p>Teksti 4, p-elementti.</p>


Esimerkki:

Teksti 1, p-elementti.

Teksti 2, p-elementti.

Teksti 3, p-elementti.

Teksti 4, p-elementti.


Esimerkin koodaus:


  CSS-ohje:
  
  .omavari{
    color: blue;
  }
  .omateksti:last-child {
    color: #ff0000;
    font-size: 120%;
  }
  
  HTML-koodaus:

  <p class="omavari omateksti">>Teksti 1, p-elementti.</p>
  <p class="omavari omateksti">>Teksti 2, p-elementti.</p>
  <p class="omavari omateksti">>Teksti 3, p-elementti.</p>
  <p class="omavari omateksti">>Teksti 4, p-elementti.</p>


:not(selector)

CSS-ohje jonka avulla voidaan muotoilla kaikki ne elementit joita ei ole asetuksen sulkujen sisällä selector-tekstin paikalla mainittu.

Esimerkissä CSS-ohje muotoilee ne teksti-elementit jotka eivät ole p-elementtejä:



Esimerkin koodaus:


  CSS-ohje:

  p {
    color: BLUE;
  }
  :not(p) {
    color: RED;
  }  
 
  HTML-koodaus:

  <h2> Otsikko h2-elementillä </h2>

  <p> Tekstiä p-elementillä. </p>
  <p> Tämäkin p-elmentillä. </p>

  <div> Täällä on teksti div-elementissä. </div>

  <a href="" target="_blank"> Teksti a-elementissä </a>


:nth-child(X)

CSS-ohje jossa määritellään elementti ja HTML-koodauksen alusta laskien elementti jota muotoilu koskee, eli X-kirjaimen kohdalla on numero.

Esimerkissä CSS-ohje muotoilee p-elementin joka on kolmas p-elementti body-elementissä (muotoiltu p-elementti on neljäs teksti-elementti !!):



Esimerkin koodaus:


  CSS-ohje:

  p:nth-child(4) {
    background: rgb(0, 102, 102);
    color: rgb(153, 255, 255);
  }   
 
  HTML-koodaus:

  <h3> Tietyn p-elementin ohje </h3>

  <p> Tekstiä p-elementillä. </p>
  <p> Tekstiä p-elementillä. </p>
  <p> Tekstiä p-elementillä. </p>
  <p> Tekstiä p-elementillä. </p>


:nth-last-child(X)

CSS-ohje jossa määritellään elementti ja HTML-koodauksen lopusta laskien elementti jota muotoilu koskee, eli X-kirjaimen kohdalla on numero.
Numeron paikalla voi olla "muutakin", esimerkit alempana.

Esimerkissä CSS-ohje muotoilee ul-elementin viimeisen li-elementti:



Esimerkin koodaus:


  CSS-ohje:

  li:nth-last-child(1) {
    background: rgb(153, 255, 255);
    color: rgb(0, 102, 102);
  }
  ul.Lista{
    color: RED;
  }   
 
  HTML-koodaus:

  <h3> Listan viimeinen eri tavalla </h3>

  <ul class="Lista">
   <li> Mars </li>
   <li> Venus </li>
   <li> Uranus <</li>
   <li> Pluto </li>
  </ul>


CSS-ohje muotoilee parittomia (odd) ja parillisia (even) p-elementtejä HTML-koodauksen lopusta alkaen, esimerkki:



Esimerkin koodaus:


  CSS-ohje:

  p:nth-last-child(odd) {
    color: RED;
    background: rgb(230, 240, 255);
  }
  p:nth-last-child(even) {
    color: BLUE;
    background: rgb(255, 230, 255);
  }   
 
  HTML-koodaus:

  <h3> Parittomat ja parilliset muotoillaan </h3>

  <p> HTML-koodauksen lopusta 4. p-elementti </p>
  <p> HTML-koodauksen lopusta 3. p-elementti </p>
  <p> HTML-koodauksen lopusta 2. p-elementti </p>
  <p> HTML-koodauksen lopusta 1. p-elementti </p>


CSS-ohje muotoilee joka kolmannen p-elementin HTML-koodauksen lopusta alkaen, esimerkki:



Esimerkin CSS-ohje (tekstit p-elementeissä):


  CSS-ohje:

  p:nth-last-child(3n+0) {
    color: BLUE;
    background: rgb(255, 230, 255);
  }


:nth-last-of-type(X) ja :nth-of-type(X)

CSS-ohje :nth-last-of-type(X) jossa määritellään elementin tyyppi ja HTML-koodauksen lopusta laskien elementti jota muotoilu koskee, eli X-kirjaimen kohdalla on numero.
CSS-ohje :nth-of-type(X) toimii muutoin samalla tavalla, mutta elementin sijainti ilmoitetaan HTML-koodauksen alusta laskien.

Esimerkissä CSS-ohje muotoilee ul-elementin viimeisen li-elementti:



Esimerkin koodaus:


  CSS-ohje:

  p:nth-last-of-type(2){
    color: BLUE;
    background: rgb(255, 230, 255);
  }
  p:nth-of-type(2){
    color:red;
  }  
 
  HTML-koodaus:

  <h3> Koodauksen lopusta (2.) ja annetun tyypin elementti </h3>

  <p> HTML-koodauksen lopusta 4. p-elementti </p>
  <p> HTML-koodauksen lopusta 3. p-elementti </p>
  <p> HTML-koodauksen lopusta 2. p-elementti </p>
  <p> HTML-koodauksen lopusta 1. p-elementti </p>

Myös tässä CSS-ohjeessa voi käyttää asetuksia odd ja even.


:only-of-type

CSS-ohje muotoilee ensimmäisen annetun elementin jonkin toisen elementin sisältä.

Esimerkissä CSS-ohje muotoilee p-elementin ensimmäisen div-elementin sisältä:



Esimerkin koodaus:


  CSS-ohje:

  p:only-of-type {
    color: BLUE;
    background: rgb(255, 230, 255);
  }  
 
  HTML-koodaus:

  <h3> Ensimäinen jonkin muun elementin sisällä </h3>

  <div>
   <p> Tekstiä p-elementissä 1. div-elementissä </p>
  </div>
  <div>  
   <p> Tekstiä p-elementissä 2. div-elementissä </p>
   <p> Tekstiä p-elementissä 2. div-elementissä </p>
  </div>

:only-child

CSS-ohje muotoilee jonkin elementin sisällä olevan elementin jos CSS-ohjeen elementti on ainoana elementtinä.

Esimerkissä CSS-ohje muotoilee ensimmäisessä div-elementissä ainoana olevan p-elementin. Seuraavassa, alemmassa div-elementissä on p-elementin lisäksi span-elementti joten CSS-ohje ei muotoile sitä:



Esimerkin koodaus:


  CSS-ohje:

  p:only-child  {
    color: BLUE;
    background: rgb(255, 230, 255);
  }  
 
  HTML-koodaus:

  <h3> Elementin sisältä jos CSS-ohjeen elementti ainoana </h3>

  <div>
   <p> Yksi p-elementti 1. div-elementissä </p>
  </div>
  <div>  
   <span> Tekstiä span-elementissä 2. div-elementissä </span>
   <p> Tekstiä p-elementissä 2. div-elementissä </p>
  </div>

:optional

CSS-ohje vaihtoehtoiselle lomakekentälle. Ohjeella voi ilmaista esimerkiksi lomakekentän jota ei ole pakko täyttää.



Esimerkin koodaus:


  CSS-ohje:

  input:optional {
    background-color: RGB(230,255,242);
  }  
 
  HTML-koodaus:

  <h3> Optional-muotoiltu ja requide lomake-kentät </h3>

  <p> Lomake-kenttä jolla optional-asetus: <br>
  <input></p>

  <p> Lomake-kenttä jonka "täyttäminen on vaadittu": <br>
  <input required></p>

:out-of-range ja :in-range

CSS-ohjeella out-of-range voidaan ilmoittaa input-kentään annetun arvon olevan yli sallitun rajan ja in-range-ohjeella annetun arvon olevan sallituissa rajoissa. Näiden ohjeiden avulla voi toteuttaa pientä vuorovaikutusta lomakkeisiin käyttämällä niitä yhdessä. esimerkiksi vihreällä rajojen sisällä pysymisen ja punaisella ylityksen.



Esimerkin koodaus, vasemmassa sallittu numero on 5 - 10, oikealla tavallinen input-kenttä:


  CSS-ohje:

  input:out-of-range {
    border: 1px solid RED;
    background-color: RGB(255, 255, 204);
  }  
 
  HTML-koodaus:

  <h3> CSS-ohjeen avulla ilmaistaa sallitun raja-arvon ylitys </h3>

  <p> Kokeile molempien kenttien toimintaa: </p>
  <input type="number" min="5" max="10" value="17">
  <input type="number" min="1" max="5">

:read-only ja :read-write

CSS-ohjeella voidaan yhdessä input-elementin tehtävällä HTML-asetuksella input-elementissä readonly asettaa lomakekenttä sellaiseksi ettei siihen voi kirjoittaa.
Asetuksella read-write tehdään CSS-ohje kentälle johon voi kirjoittaa sekä lukea. Huomaa, Firefox selaimelle oltava oma ohje (input:-moz-read-write {tähän muotoilut}).



Esimerkin koodaus:


  CSS-ohje:

  input:-moz-read-only 
    background-color: yellow;
    border: 1px solid RED;
  }
  input:read-only {
    background-color: yellow;
    border: 1px solid RED;
  }  
 
  HTML-koodaus:

  <h3> Lomake-kenttä lukittu luku-tilaan </h3>

  <p> Lomake-kenttään <ins>voi kirjoittaa ja kirjoittaa </ins>:<br>
  <input value="Sukunimi"></p>

  <p>Lomake-kentään <ins>ei voi kirjoittaa, voi kukea </ins>:<br>
  <input readonly value="Etunimi"></p>

  <p><b>Huom !</b> Firefox-selaimelle oltava oma CSS-ohjeet ! </p>

:reguired

CSS-ohjeella voidaan ilmoittaa lomake-kenttä jonka täyttäminen on tärkeää. Huomaa, CSS-ohjeessa sekä HTML-koodauksessa oltava required-asetus.



Esimerkin koodaus:


  CSS-ohje:

  input:required {
    background-color: yellow;
  }
  
  
  HTML-koodaus:

  <h3> Tärkeän lomake-kentän korostaminen </h3>

  <p>Tavallinen lomakekenttä:<br>
  <input></p>

  <p>Tärkeä lomake-kenttä:<br>
  <input required></p>

:root

CSS-ohje asettaa HTML-koodauksissa pää-elementtinä olevalle muotoilut.



Esimerkin koodaus:


  CSS-ohje:

  :root {
    background: Lavender;
  }
  
  
  HTML-koodaus:

  <h3> Ylimmän tason elementin muotoilu </h3>

  <body>
   <h3> Pää-elementille muotoiluohje </h3>

   <p>Tässä esimerkissä body-elementti on HTML-koodissa "uloin" elementti.</p>
  </body>

:target

CSS-ohjeella voidaan linkin kohde elementti muotoilla, linkin klikkaaminen suorittaa CSS-muotoilun kohde elementille.



Esimerkin koodaus:


  CSS-ohje:

  :target {
    border: 2px solid INDIGO;
    background-color: RGB(244, 230, 255);
	color: RGB(230, 0, 92);
    padding:5px;
  }
  
  
  HTML-koodaus:

  <h3> Kohteen muotoilu linkkiä klikatessa </h3>

  <p><a href="#linkki1"> Linkki 1 </a></p>
  <p><a href="#linkki2"> Linkki 2 </a></p>

  <p id="linkki1"><b> Linkkiin 1 liittyvää tekstiä </b></p>
  <p id="linkki2"><b> Linkkiin 2 liittyvää tekstiä </b></p>

:valid

CSS-ohjeella voidaan ilmaista jos email on lomakekenttään annettu oikealla tavalla. Esimerkissä punainen jos virheellinen (invalid) ja vihreä jos oikein (valid).
Muista ! input-elementissä oltava type="email" asetus !



Esimerkin koodaus:


  CSS-ohje:

  input:valid {
    background-color: RGB(194, 240, 194);
  }
  input:invalid {
    border: 2px solid red;
    background-color: RGB(255, 153, 153);
  }
  
  
  HTML-koodaus:

  <h3> Ohje oikean tyyppiselle email:lle </h3>

  <input type="email" value="etuosa@loppuosa.com">

  <p>CSS-ohje ilmaisee jos email:n on oikealla tavalla annettu.</p>

::after ja ::before

Asetuksen after avulla voidaan esimerkiksi HTML-elementillä toteutetun tekstin perään liittää CSS-ohjeessa annettu teksti. Asetuksella before lisäys tehtäisiin eteen.



Esimerkin koodaus, jokaiselle teksti-elementille oltava oma CSS-ohje:


  CSS-ohje:

  p::after {
    content: "Ankka";
  }
  span::after { 
    content: "Ankka";
  }
  div::before { 
    content: "Hannu Hanhi ";
  }
  
  
  HTML-koodaus:

  <h3> Jokaiselle elementille tehtävä oma CSS-ohje </h3>

  <p> Aku </p>
  <p> Roope </p>
  <span> Iines </span>
  <div> ei ole Ankka </div>

::first-letter

Asetuksella first-letter voidaan muotoilla teksti-elementtien ensimmäinen kirjain.



Esimerkin koodaus:


  CSS-ohje:

  p::first-letter {
    font-size: 150%;
    color: #8A2BE2;
  }
  div::first-letter {
    font-size: 150%;
    color: #8A2BE2;
  font-style: italic;
  }
  .oma::first-letter {
    font-size: 150%;
    color: #8A2BE2;
  }
  
  
  HTML-koodaus:

  <h3> Ensimäisen kirjaimen CSS-ohje </h3>

  <p> Ohjeella muotoillaan ensimmäinen kirjain. </p>
  <p> Tämä ja edellinen teksti on p-elementssä. </p>
  <div> Tässä div-elementti jolla ei ole class- tai id-tunnisteista ohjetta. </div>
  <div class="oma"> CSS-ohje liitetty class-tunnisteella. </div>

::first-line

Asetuksella first-line muotoillaan ensimmäinen tekstirivi.



Esimerkin koodaus:


  CSS-ohje:

  p::first-line {
    background-color: yellow;
  }
  #rivi {
    background-color:RGB(230, 255, 255);
    width: 50%;
    border: 1px solid green;
    padding: 10px;
    margin: 10px;
  }  
  
  
  HTML-koodaus:

  <h3> Ensimmäisen rivin CSS-ohje </h3>

  <p> Tämä CSS-ohje muotoilee p-elementin ensimmäisen rivin. Ohjeen muotoilu 
   vaikuttaa siis riviin joka mahtuu selaimen näytölle. Vaikutusta voi 
   kokeilla pienentämällä selaimen kokoa näytöllä. </p>

  <div id="rivi">
    <p> Tässä CSS-ohje muotoilee ensimmäisen tekstirivin tekstistä 
	    joka on sijoitettuna div-elementin sisään. </p>
  </div>

::selection

Asetuksella selection muotoillaan hiirellä valittu teksti. Huomaa! Mozilla Firefox:lla oma ohje !
Kokeile valitsemalla tekstejä hiirellä.



Esimerkin koodaus:


  CSS-ohje:

  ::-moz-selection {
    color: BLUE;
    background: yellow;
  }
  ::selection {
    color: BLUE;
    background: yellow;
  }
    h3::selection {
    color: RED;
    background: yellow;
  }
  .oma::selection {
    color: YELLOW;
    background: black;
  }  
  
  
  HTML-koodaus:

  <h3> Hiirellä valitun tekstin korostaminen </h3>

  <p>Tekstiä p-elementillä.</p>
  <div>Tämä teksti on div-elementissä.</div>

  <p class="oma"> Tässä p-elementissä oma CSS-ohje.
      Mozilla tarvitsee omansa !!
  </p>

Design and edit © player