CSS-tyylien määrittelytavat

1. External CSS (ulkoiset tyylit)

External CSS tarkoittaa sitä, että tyylit kirjoitetaan erilliseen tiedostoon, jonka tiedostopääte on .css. Tämä tiedosto liitetään HTML-dokumenttiin link -elementillä head -osassa.
Tämä on suositeltu tapa suurissa projekteissa, koska se erottaa rakenteen ja ulkoasun.

Esimerkki:

<head>
  <link rel="stylesheet" href="tyylit.css">
</head>

2. Internal CSS (sisäiset tyylit)

Internal CSS tarkoittaa, että tyylit kirjoitetaan suoraan HTML-dokumentin head -osioon käyttämällä <style>-tageja. Tämä sopii, kun halutaan muotoilla vain kyseistä yhtä sivua.

Esimerkki:

<head>
  <style>
    body { background-color: lightblue; }
  </style>
</head>

3. Inline CSS (rivinsisäiset tyylit)

Inline CSS määritetään suoraan HTML-elementin sisällä käyttäen style-attribuuttia. Tätä tapaa käytetään yleensä vain yksinkertaisissa muotoiluissa tai nopeissa testauksissa.
Se ei ole suositeltu laajassa käytössä, koska se vaikeuttaa ylläpitoa.

Esimerkki:

Tämä on punainen kappale

Yhteenveto

• External CSS: Tyylit erillisessä tiedostossa, hyvä laajoihin projekteihin.
• Internal CSS: Tyylit määritellään suoraan HTML-tiedoston <head>-osassa.
• Inline CSS: Tyylit suoraan HTML-elementissä, sopii vain poikkeustilanteisiin.

tämä on poikkeus