Kaskadoituvat tyylitiedostot

Kaskadiarkkitehtuurin perusteet

Kaskadiarkkitehtuuri (CSS) on tyyliohjeiden kieli, jota käytetään verkkosivujen ulkoasun määrittämiseen. CSS mahdollistaa sivujen ulkoasun erottamisen niiden rakenteesta, mikä helpottaa sivujen ylläpitoa ja muokkaamista.

CSS koostuu valitsimista ja säännöistä. Valitsimia käytetään määrittämään, mihin osaan sivua sääntöjä halutaan soveltaa, kun taas säännöt määrittelevät, miten kyseinen osa sivua tulisi näyttää.

Alla on esimerkki yksinkertaisesta CSS-säännöstä:

h1 {
  color: blue;
}

Tässä säännössä määritellään, että kaikki h1-elementit sivulla tulisi näyttää sinisinä.

Esimerkki CSS-valitsimista

  • Elementtivalitsin: Valitsee kaikki tietyn HTML-elementin, esim. p { color: red; }
  • Id-valitsin: Valitsee HTML-elementin, jolla on tietty id-attribuutti, esim. #main { font-size: 16px; }
  • Luokkavalitsin: Valitsee HTML-elementin, jolla on tietty class-attribuutti, esim. .highlight { background-color: yellow; }

Opi lisää kaskadiarkkitehtuurista täältä.