Päivitetty: 10.03.2003.

CSS:n käyttö

CSS on tyylikieli jonka tarkoitus on kuvata HTML, xHTML ja XML -dokumenttien ulkoasua. CSS:n käyttö on varsin helppoa, kuten tulet kohta havaitsemaan.


CSS:n käyttö

Tyylikieli

CSS -säännöt kuvaavat elementin ulkoasua. Kun käytät CSS-sääntöjä niiden tulisi korvata HTML:n vanhentuneet muotoilumääritteet. Käytä (x)HTML-kieltä vain luodaksesi dokumentille fyysinen rakenne eli otsikot, kappaleet, listat, taulukot jne. Se miltä ne näyttävät kerrotaan vain ja ainuastaan CSS:n avulla.

Tee kaikki ulkoasumäärittelyt käyttämällä CSS-sääntöjä!

Erityisesti sinun tulisi luopua <FONT> -elementin käytöstä. Font -elementillä muotoilut dokumentin ovat raskaita ja vaikeasti päivitettävissä. Lisäksi kyseinen elementti on poistettu virallisesta W3C:n XHTML -suosituksesta.

Vältä myös <BODY> -elementin attribuutit kuten link, alink ja vlink, bgimage ja bgcolor. Samoin <P> ja <DIV> -elementtien aling- attribuutit on syytä korvat CSS:llä.

<< Alkuun


Ensimmäinen CSS-määritys:

Seuraavaksi perinteinen 'Hello World' -esimerkki, jossa pienehkö HTML-dokumentti muotoillaan CSS:n avulla. Voit käyttää alla olevaa esimerkkiä pohjana kun harjoittelet CSS:n käyttöä. Ensin pelkkä HTML-dokumentti ilman CSS-muotoiluja (Esim0):

<html>
 <head>
  <title>Hello World!</title>
  <!-- CSS tulee tähän -->
</head>
<body>
 <h1>Hello World!</h1>
<p>Tämä on pienehkö HTML-dokumentti,
   joka esittelee CSS:n käyttöä. CSS:n käyttö on:</p>
 <ul>
  <li>helppoa</li>
  <li>hauskaa</li>
  <li>hyödyllistä</li>
 </ul>
 <p>CSS:n avulla voidaan tehdä samat muotoilut 
    kuin perinteisellä HTML-koodilla. Mutta voit 
    tehdä myös paljon muuta.</p>
 <h4>Käytä HTML-dokumentin ulkoasun 
    kuvaamiseen vain CSS-sääntöjä!</h4>
</body>
</html>

Katso Esim0.

Lisätään dokumenttiin CSS-koodia: (Esim1)

<title>Hello World!</title>
 <style type="text/css">
  <!--
   body { font-family: Arial, Helvetica, sans-serif;
          color: #000000;
          background-color: #FFFFFF;
          margin-left: 15%;
          margin-right: 15%;
        }

     h1 { font-family: "Times New Roman", Times, serif;
          color: #990000;
          margin-left: -5%;
        }

     h4 { border: 2px solid red;
          background-color: beige;
          padding: 5px;
          text-align: center;
        }
     
     ul { list-style: upper-roman inside; }
  -->
  </style>
</head>

Katso Esim1.

Ja sitten selitykset:

body {

font-family: Arial, Helvetica, sans-serif
/* Kirjaisin Arial jos ei ole niin Helvetica tai jokin sans-serif tyylinen fonti */
color: #000000;
/* Musta väri. Eli kaikki esitetään mustalla ellei toisin määrätä */
background-color: #FFFFFF;
/* Taustaväri on valkoinen */
margin-left: 15%; margin-right: 15%; }
/* Vasen ja oikea marginaali 15%.
Dokumentti on tällöin skaalatutuva eli marginaalin koko riippuu näytön resoluutiosta */

h1 {

font-family: "Times New Roman", Times, serif;
/* Fontti Times New Roman jos ei ole niin Times tai jokin serif tyylinen fontti */
color: #990000;
/* Elementin väri on #990000 eli punaruskea */
margin-left: -5%;}
/* Marginaali -5% lisätään, tai tässä tapauksessa vähennetään body:n arvosta. Eli 15% + -5% = 10% */

h4 {

border: 2px solid red;
/* Punainen 2pikselin paksuisen reunus */
background-color: beige;
/* Taustaväri on beige */
padding: 5px; }
/* Reunuksen ja sisällön välinen tila 5pikseliä */

ul {

list-style: upper-roman inside; }
/* Tämä on pikakirjoita joka määrää lista tyyliksi 'upper-roman' ja merkin sijainnin sisäpuolelle */

Ja tämä oli vasta esimakua tulevasta. Mutta ehkä sait käsityksen siitä miten CSS toimii ja mitä sillä voi tehdä.

<< Alkuun


© Petteri Perälä 1999 - 2003.
E-mail: [ petepe@mbnet.fi ].

Valid CSS! Valid HTML 4.01!