CSS parametrit

Tehtävänä oli listata omasta mielestään tärkeimmät CSS parametrit ja kertoa myös, miten ne toimivat ja mitä ne tekevät.

1. Taustan värin määrittäminen

Taustan väri määritetään yksinkertaisella komennolla, joka laitetaan CSS-tiedoston body-kohtaan.
Esimerkiksi näin:

body {
background-color: green;
}

2. Leveys ja korkeus

Esimerkiksi kuvan leveyttä ja korkeutta voi tällä komennolla muuttaa haluamaansa kokoon.
Esimerkiksi näin:

img {
width: 150px;
height: 230px; }

3. Tekstin väri

Koko tiedoston väriä voi muokata tai halutessaan vain yhden osion tekstin väriä kerrallaan. Kun halutaan muokata koko tiedoston tekstin väriä, käytetään osiona * merkkiä. Yksilöllisesti muokatessa käytetään vain nimettyjä osioita.
Esimerkiksi näin:

h1 {
color: white;
}

Nyt vain h1-nimisen osion tekstin väri muuttuu valkoiseksi.

4. Tekstin tyyli

Tekstin voi esimerkiksi asettaa vinoksi tätä komentoa käyttäen.
Esimerkiksi näin:

font-style: italic;

Nyt tekstin tyyli on asetettu hieman vinoksi.


5. Tekstin koko

Tekstin kokoa voi muuttaa nopeasti ja yksinkertaista komentoa käyttäen.
Esimerkiksi näin:

p {
font-size: 30px;
}

6. Linkkien väri

Myös linkkien värejä voi muuttaa haluamansa värisiksi. Väriksi kuitenkin kannattaa valita sellainen, että se erottuu selvästi taustan väristä ja muusta tekstistä.
Esimerksi näin:

a {
color: yellow;
}

7. Taustakuvan asettaminen

Taustalle voi myös laittaa kuvan pelkän värin sijasta.
Esimerkiksi näin:

body {
background-image: url("kuva.jpg");
}

Mukaan kannattaa myös laittaa komento, jonka avulla taustakuva pysyy yhtenä eikä tule monena tiedostoon.

body {
background-repeat: no-repeat;
}

8. Tekstin asettaminen sivun keskelle

Kun tekstin haluaa sijoittaa keskelle sivua, käytetään text-align -komentoa.
Esimerkiksi näin:

* {
text-align: center;
}

9. Marginaalit

Tiedoston marginaaleja voi säätää esimerkiksi näin:

p {
margin-left: 150px;
}

10. Kirjaimien välit

Myös tekstin kirjaimien välejä voi sääätää haluamaansa suuruteen tai pienuuteen.
Esimerkiksi näin:

p {
letter-spacing: 2px;
}