CSS-ohjelmointi – Tekstin muokkaus

CSS-kieli ei nyt ihan ohjelmointi ole vaan sen avulla muokataan sivuston ulkonäköä. CSS-koodia voidaan kirjoittaa kolmella eri tavalla, joka näytetään seuraavaksi

# Tapa 1
<p style="color:red">Tämä teksti on punainen</p>

# Tapa 2
<style>
p { color:red; }
</style>
<p>Tämä teksti on punainen</p>

# Tapa 3
<link rel="stylesheet" href="style.css">
<p>Tämä teksti on punainen</p>

style.css:

p { color:red; }

Kolme eri tapaa riippuen käyttötarkoituksesta mikä on järkevin. Tai sitten yhdistellään, että käytetään joka tapaa tai vaikka vaan kahta. Mutta jotta koodi on selkolukuisin, tapa 3 on se paras tapa.

CSS-koodi tagien yhteydessä

Helpoin tapa kirjoittaa CSS-koodia on laittaa koodi HTML-tagin style-attribuutin sisälle, jolloin koodi on vain siihen objektiin sidottu.

Style-tagi HEAD-osiossa

CSS-koodi voidaan kirjoittaa style-tagiin, joka sijoitetaan HTML-sivun HEAD-osioon. Jolloin koodi vaikuttaa esimerkiksi kaikkiin P-tageihin tekstissä.

Erillinen CSS-tiedosto

Viimeisenä käsitellään tämä paras tapa eli CSS-koodi on omassa tiedostossaan ja siihen viitataan HTML-tiedoston HEAD-osiossa LINK-tagilla.

Lisää CSS-koodauksesta löydät esimerkiksi W3schools:n sivuilta.