CSS-opas, CSS - Mitä CSS tekee ?

CSS - www-sivujen muotoiluun ja toimintojen rakentamiseen

CSS on laaja kokoelma muotoilu-ohjeita joiden avulla voidaan sijoittaa www-sivun sisältö halutuille paikoille, vaikuttaa sisällön väreihin ja kokoon, rakentaan www-sivun käyttäjän toiminnasta rippuvia muutoksia sekä paljon muutakin.



CSS-ohjeen liittäminen HTML-elementteihin

CSS-ohjeet voi sijaita:

CSS-ohje näyttää esimerkiksi seuraavalta, ohje p- teksti-elementille: 

    p {
      text-align: center;  
      font-size: 12 pix; 
      color: blue;
    }



CSS-muotoilun liittäminen elementtiin

CSS-muotoilu voidaan liittää koskemaan elementtiä paikallisesti tai html-tiedoston head-osassa style-elementissä.


Paikallinen CSS-ohje

Paikallinen CSS-ohje sopii yksittäisen kohdan ja muutaman muotoilun tekemiseen.
Esimerkissä CSS-muotoillaan paikallisesti yksi p-elementti ja sen tekstinväri: 


  <p style="color:DarkViolet">Tämän tekstin väri on tummavioletti.<p>

Tämän tekstin väri on tummavioletti.


Paikallinen kahden ominaisuuden muotoilu:


  <p style="color:red; font-size: 20px">
   Punainen teksti kooltaan 20 pikseliä.
  <p>

Punainen teksti kooltaan 20 pikseliä.



CSS-ohje html-tiedoston alussa

Esimerkissä CSS-muotoillaan paikallisesti yksi p-elementti ja sen tekstinväri: 


  <!DOCTYPE html>
   <<html>
   <head>    
    <meta charset="UTF-8">
    <style>
     p {
      text-align: center;  
      color: blue;
     } 
    </style>
   </head>
   <body>
    <p>Tämän tekstin väri on sininen ja keskitetty.</p>
   </body>
   </html>

Tämän tekstin väri on sininen ja keskitetty.



CSS-tiedoston liittäminen www-sivua muotoilemaan

Muotoilu-ohjeet sijoitetaan yleensä erilliseen tiedostoon. Usein tiedosto nimetään style-nimiseksi sekä tiedoston pääte on css, esimerkiksi style.css. Samaan html-tiedostoon voidaan kohdistaa useasta CSS-tiedostosta CSS-ohjeita, ohjeita voidaan linkittää myös muualta.

Esimerkissä (alla) CSS-muotoilut on sijoitettuna erilliseen tiedostoon joka liitetään html-tiedostoon link-elementillä:


  <!DOCTYPE html>
   <<html>
   <head>    
     <meta charset="UTF-8">
     <link rel=”stylesheet” type=”text/css” href=”styleA.css”>
   </head>
   <body>
    <p>Keskitetty sininen teksti ja taustaväri tekstille.</p>
   </body>
   </html>

Ja styleA.css tiedosto olisi seuraava:


   p {
    text-align: center;  
    color: #8000FF;
    background-color: aqua;
   }

Keskitetty sininen teksti ja taustaväri tekstille.


CSS-ohjeiden käyttäminen

Seuraavassa lyhyesti muutamia olennaisia vinkkejä CSS-ohjeiden käyttämiseen.


Kommentointi eli muistiinpano CSS-tiedostossa

CSS-tiedoston ohjeisiin voi kirjoittaa muistiinpanoja jotka eivät vaikuta www-sivun toimintaan seuraavasti:


   p {                      /*teksti-elementti*/ 
    text-align: center;     /*tekstin sijainti - keskitetty*/
    color: #8000FF;         /*tekstinväri heksalukuna*/
    background-color: aqua; /*tekstin taustaväri*/
   }

CSS-ohjeen vaikutuksen kohdistaminen

CSS-ohje kohdistuu kaikkiin samoihin html-elementteihin mikäli ohjeen tunnistetta (id) ei löydy:


  CSS-ohje:
  
   p {                      /*teksti-elementti*/ 
       text-align: center;  
       color: blue;
   }

  HTML-elementit joihin ohje kohdistetaan:

  <p> Tässä on tekstiä johon css-kohdistuu. </p>
  <p id="korostus"> Myös tähän tekstiin kohdistuus sama ohje. </p>
  <p> Ja myös tähänkin tekstiin. </p>

Tässä on tekstiä johon css-kohdistuu.

Myös tähän tekstiin kohdistuus sama ohje

Ja myös tähänkin tekstiin.


Paikallinen CSS-ohje

Paikallisella CSS-ohjeella voidaan muotoilla jokin osa toisella tavalla, esimerkissä code- ja span-elementit:


  CSS-ohje:
  
   p {                      
       text-align: center;  
       color: blue;
   }

   
  HTML-elementit joihin CSS-ohje kohdistetaan:

  <p> Esimerkissä on paikallisesti muotoiltu 
      <code style="color:red">p-elementtejä</code>, 
       tällä rivillä code-elementillä. </p>
  <p id="korostus"> Tämäkin on 
       <span style="color:green"> p-elementti</span>, 
        tässä span-elementillä !! </p>
  <p> Tässä p-elementissä ei ole paikallista muotoilu-ohjetta. lt/p>

Esimerkissä on paikallisesti muotoiltu p-elementtejä, tällä rivillä code-elementillä.

Tämäkin on p-elementti, tässä span-elementillä !!

Tässä p-elementissä ei ole paikallista muotoilu-ohjetta.


Elementin valitsin, id

CSS-ohje voidaan nimetä ja html-koodauksessa tällä nimellä tunnistettavat muotoillaan ohjeella, id-tunniste:


  CSS-ohje:
  
  #puna {
    text-align: center;  
    color: red;
  } 

  
  HTML-elementti joihin CSS-ohje kohdistetaan:

  <p id="puna"> Otsikko punaisella, id-valitsemen avulla </p> 
      
  <p> Tällä p-elementillä ei ole muotoilu-ohjetta. </p>

Otsikko punaisella, id-valitsemen avulla

Tällä p-elementillä ei ole muotoilu-ohjetta.

HUOM! JavaScript koodauksissa ja niiden CSS-muotoiluissa HTML-elementeissä ei voi olla käyttää kahta id-tunnistetta !


Elementin valitsin, class

Luokka-määritelmällä eli class-määritelmällä voidaan elementtiin tai useaan elementtiin kohdistaa sama muotoilu-ohje.

Huom! class-ohjeilla muotoillaan vain sellaisia elementtien ominaisuuksia jotka ovat yhteisiä elementeille. Esimerkiksi kuvalle ei voi class-ohjeessa asettaa väriä, tekstille voi asettaa värin.

Esimerkki. Muotoilumäärittelyssä p.keskus muotoillaan p-elementti ja annetaan muotoilulle nimi.
Huomaa, muotoilu ei koske h2-elementtiä !


  CSS-ohje:
  
  p.keskus {
    text-align: center;  
    color: red;
  }  

  
  HTML-elementti joihin CSS-ohje kohdistetaan:

  <h2 class="keskus"> Otsikko teksti </h2> 
      
  <p class="keskus"> Tällä p-elementillä on class-muotoiluohje. </p>

Otsikko teksti

Tällä p-elementillä on class-muotoiluohje.


Ohje kohdistetaan useaan elementtiin, class

Kun HTML-elementit ovat samantyyppisiä, esimerkiksi otsikot ja teksti voidaan class-määritelmällä kohdistaa sama CSS-muotoiluohje.

Esimerkki. Muotoilumäärittely .keskitys jolla muotoillaan h2- ja p-elementit.


  CSS-ohje:
  
  .keskitys {
     text-align: center;  
     color: green;
  }   

  
  HTML-elementti joihin ohje kohdistetuun:

  <h2 class="keskitys"> Otsikko teksti  </h2> 
      
  <p class="keskitys"> Tällä p-elementillä on class-muotoiluohje. </p>

Otsikko teksti

Tällä p-elementillä on class-muotoiluohje.


Jos usealla samantyyppisellä HTML-elementillä on samanlaiset CSS-muotoilu-ohjeet, voidaan toimia seuraavasti:


  SEURAAVILLA SAMANLAISET CSS-OHJEET:
  
   h1 {
     text-align:center;
     color:#9400D3;
   }
   h2 {
     text-align:center;
     color: #9400D3;
   }
   p {
     text-align:center;
     color: #9400D3;
   }
   
   
   CSS-OHJEET VOIDAAN TEHDÄ MYÖS NÄIN:
   
   h1, h2, p {
     text-align:center;
     color:#9400D3;
   }


HTML-elementiin voidaan kohdistaa usea CSS-ohje, seuraavasti:


  CSS-OHJEET:
  
   .oranssi {
     color:orange;
   }
   .viher {
     color:green;
   }
   .oikea {
     text-align:right;
   }
   .vasen {
     text-align:left;
   }
   
   
   HTML-koodauksessa:
   
  <h2 class="oranssi vasen"> Otsikko teksti  </h2> 
      
  <p class="oikea viher"> Tällä p-elementillä on class-muotoiluohje. </p>

Otsikko teksti

Tällä p-elementillä on class-muotoiluohje.


HTML-elementin jälkeen (sisällä) olevien elementtien muotoilu (descendant selector)

Esimerkissä, div-elementin sisällä olevat p-elementteille asetetaan keltainen tausta.
Tämä ei ole suositeltava tapa.


  CSS-OHJE:
  
  div p {
    background-color: yellow;
  }
   
   
  HTML-koodauksessa:
   
  <div>
   <p>1. p-elementtiteksti div:ssä.</p>
   <p>2. p-elementtiteksti div:ssä.</p>
   <b><p>3. p-elementtiteksti div:ssä.</p></b>
  </div>

  <p>1. p-elementti teksti joka ei ole div:ssä.</p>
  <p>2. p-elementti teksti joka ei ole div:ssä.</p>

Suositeltava tapa:


  CSS-OHJE:
  
  .koroste p {
    background-color: yellow;
  }
   
   
  HTML-koodauksessa:
   
  <div class="koroste">
   <p> 1. p-elementtiteksti div:ssä. </p>
   <p> 2. p-elementtiteksti div:ssä. </p>
   <b><p> 3. p-elementtiteksti div:ssä. </p></b>
  </div>

  <p> 1. p-elementti teksti joka ei ole div:ssä. </p>
  <p> 2. p-elementti teksti joka ei ole div:ssä. </p>

Tulos www-sivulla:

1. p-elementtiteksti div:ssä.

2. p-elementtiteksti div:ssä.

3. p-elementtiteksti div:ssä.

1. p-elementti teksti joka ei ole div:ssä.

2. p-elementti teksti joka ei ole div:ssä.



HTML-elementin jälkeen (sisällä) olevien CSS-ohjeessa määritettyjen elementtien muotoilu (child selector)

Mikäli CSS-ohjeessa määritettyjä elementtejä on jonkin toisen elementin sisällä, niitä ei muotoilla.


  CSS-OHJE:
  
  .keltainen > p {
    background-color: yellow;
  }
     
  HTML-koodauksessa:
   
  <div class="keltainen">
    <p> 1. teksti. </p>
    <p> 2. teksti. </p>
    <b><p> 3. teksti. </p></b>   <!--ei muotoilla-->
    <p> 4. teksti. </p>
  </div>

  <p> 5. teksti.. </p>
  <p> 6. teksti.. </p>

Tulos www-sivulla

1. teksti.

2. teksti.

3. teksti.

4. teksti.

5. teksti..

6. teksti..



CSS-ohjeessa määritetyn elementtin ulkopuolelta heti seuraavan muotoilu (adjacent sibling selector)

CSS-ohjeessa määritettään elementti jonka ulkopuolelta muotoillaan CSS-ohjeessa määritetty elementti, vain esimmäinen muotoillaan.


  CSS-OHJE:
  
  .seuraava + p {
    background-color: yellow;
  }
   
  HTML-koodauksessa:
   
  <div class="seuraava">
    <p> 1. teksti div:ssä. </p>
    <p> 2. teksti div:ssä. </p>
  </div>

  <p> 3. teksti ei ole div:ssä. </p>
  <p> 4. teksti ei ole div:ssä. </p>

Tulos www-sivulla

1. teksti div:ssä.

2. teksti div:ssä.

3. teksti ei ole div:ssä.

4. teksti ei ole div:ssä.



CSS-ohjeessa määritetyn elementtin ulkopuolelta CSS-ohjeessa määriteltyjen muotoilu (general sibling selector)


  CSS-OHJE:
  
  .ulkopuolella ~ p {
    background-color: yellow;
  }
   
  HTML-koodauksessa:
   
  <p> 1.teksti. </p>

  <div class="ulkopuolella">
    <p> 2.teksti div:ssä. </p>
  </div>

  <p> 3.teksti div:n ulkopuolella. </p>
  <span> Tämä on span-elementissä tekstiä. </span>
  <p> 4.teksti div:n ulkopuolella. </p>

Tulos www.sivulla:

1.teksti.

2.teksti div:ssä.

3.teksti div:n ulkopuolella.

Tämä on span-elementissä tekstiä.

4.teksti div:n ulkopuolella.

Design, edit © player