Asiayhteyden mukaan muuttuvat tyylit

Tässä kappaleessa on käytetty asiayhteyden mukaan muuttuvaa korostusta. Tyylitiedostoon on määritelty tyyli, jonka mukaan strong-elementin sijaitessa p-elementin sisällä se esitetään eri tavalla kuin muussa yhteydessä.

Korostus toisen tason otsikossa on kokonaan eri näköinen.

XHTML-koodi

<p>
Tässä kappaleessa on käytetty asiayhteyden mukaan muuttuvaa <strong>korostusta</strong>. 
Tyylitiedostoon on määritelty tyyli, jonka mukaan strong-elementin sijaitessa p-elementin sisällä
se esitetään eri tavalla kuin muussa yhteydessä.
</p>

<h2><strong>Korostus</strong> toisen tason otsikossa on kokonaan eri näköinen.</h2>

CSS (asiayhteys.css)

strong {
  background-color: white; 
  color: silver;
  font-weight: bolder;
}

p strong {
  background-color: white; 
  color: red;
}