Style-elementti

style-elementin avulla voit kirjoittaa CSS:ää suoraan HTML-sivun sisälle. Huomaa, että style-elementin sisällä noudatamme CSS-kielen syntaksia (valitsimet, aaltosulkeet ja niin edelleen).

Tämän elementin tulisi sijaita head-elementin sisällä, mutta tämä ei ole pakollista - style-elementin voi sijoittaa myös body-elementin sisälle ja se toimii.

style-elementin käyttöä ei tulisi liioitella - sen sijasta kannattaa useimmiten käyttää erillistä CSS-tiedostoa.

Esimerkki

Kirjoitetaan CSS HTML-koodin sisälle käyttämällä style-elementtiä:

html<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tämä on sivun otsikko</title>
    <style>
      p {
        color: red; 
      }
     </style>
  </head>
  <body>
    <h1>Tämä on otsikko, joka on vakio (musta) väri.</h1>
    <p>Tämä on kappale punaisella värillä.</p>
  </body>
</html>

Katso myös

  • link-elementti,
    joka yhdistää CSS-tiedostot
  • style-attribuutti,
    joka asettaa tyylit tietylle elementille