CSS parametrit

Font-Family

Font-family:ä käytetään Fontin perheen määrittämiseen (esim. Arial, Verdana, Times)

Esimerkki paramentin käytöstä p- kappaletagin kanssa:

p {font-family: Arial,Helvetica,sans-serif;}

Color

Määrittää tekstin värin H1 teksteissä.

Esimerkki kuinka tätä käytetään:

h1 {color: #00ff00;}

Font-Size

Määrittää tekstin koon. Käytetään näin koodissa:
h1 {font-size: 250%;}

size

kuvaa laatikon orientaatiota ja syvyyttä. joko relative tai absolute. absoluuttisessa laatikon koko on kiinteä ja relative:ssa laatikko mukautuu sivun median mukaiseksi.

Background-color

Määrittää taustanvärin jollekin alueelle tai tekstille. Käytetään "style" koodin sisällä.

h1 {background-color: #00ff00;}

Text-align

Align koodia käytetään tekstin sijainnin määrittämiseen. Sen voi asettaa esim. vasempaan reunaan tai keskelle

 h1 {text-align: center;}

Text-decoration

Määrittää tekstin "koristelun", esim. yliviivaus:

h1 {text-decoration: overline;}

Text-shadow

Lisää tekstille varjon. Näin käytät sitä CSS koodissa:

h1 {text-shadow: 2px 2px #ff0000;}

box-shadow

Box-shadow-parametrillä voit lisätä valittuun elementtiin varjon, jonka kokoa ja väriä voit muuttaa.

Animation

Tällä koodilla voit tehdä esim liikkuvan laatikon:

div {-webkit-animation: mymove 5s infinite; /* Chrome, Safari, Opera     */animation: mymove 5s infinite;}

Outline

Tällä koodilla lisätään tekstille reunat. Esimerkki koodin käytöstä:

p {outline: #00FF00 dotted thick;}

Background-Image

Tällä voit asettaa sivun (tai tekstin) taustalle kuvan. Näin käytät sitä:

body {background-image: url('image.gif');background-color: #cccccc;}

Transform

Tämä voi kääntää tekstin kuvan tai muun objektin sivun sisällä. Esimerkki käytöstä: 
div {width: 200px;height: 100px;background-color: yellow; /* Rotate div*/

-ms-transform: rotate(7deg); /* IE 9 */-webkit-transform: rotate(7deg); /* Chrome, Safari, Opera */ transform: rotate(7deg);}

Height ja Width

Näitä yhdessä käyttäen voidaan muuttaa objektin leveyttä ja korkeutta. Näin käytät sitä:

p.ex {height: 100px;width: 100px;}

Column

 Asettelee pitkät tekstit omiin osiinsa.

<div class="newspaper">liirum laarum diiba daaba x100</div>

Background-size

Käytetään objektin taustan koon määrittämiseen.

 div {background-size: 80px 60px;}

Transition 

Saa laatikon liikkumaan kun nostat hiiren sen päälle. Näin käytät sitä:

div {width: 100px;height: 100px;background: red;transition: width 2s;-webkittransition:width 2s; /* Safari 3.1 to 6.0 */} div:hover {width: 300px;}

Border-left-color

Asettaa tekstin tai muun objektin vasemman reunan värin.

p  {border-style: solid;border-left-color: #ff0000;}                  

Z-Index

Asettaa kuvan vaikkapa tekstin taakse, tällä koodilla:

img {position: absolute; left: 0px; top: 0px; z-index: -1;}

Line-height

Asettaa tekstin linjan koon, näinn käytät sitä:

p.small {line-height: 70%;}

Text-decoration-color

Asettaa tekstin koristelun värin. Eli esim. yliviivauksen värin. Näin käytät sitä:

p {text-decoration: underline;-moz-text-decoration-color: red; /* Code for Firefox */text-                               decoration-color: red;}