/* määrätään body- ja html-elementeille 
musta taustaväri ja valkoinen tekstin väri */
body, html { 
  background: black;
  color: white;
}

/* määrätään kaikille elementeille
valkoinen tausta ja musta tekstin väri */
* { 
  background-color: white; 
  color: black; 
}

/* määrätään h1-elementille väriksi cyan */
h1 { 
  color: cyan; 
}

/* strong-elementin väri on cyan, jos
strong-elementti sijaitsee ul-elementin jälkeläisenä */
ul strong { 
  color: cyan; 
}

/*
jos strong elementti on li-elementin lapsi, joka
taas on ul-elementin lapsi, niin strong-elementin 
väri on punainen
*/
ul > li > strong {
  color: red; 
}

/* ensimmäisen li-elementin
väri on harmaa */
li:first-child { 
  color: silver; 
}

/*
jos löytyy kaksi peräkkäistä 
p-elementtiä, niin jälkimmäisen
väri on oranssi
*/
p + p { 
  color: orange; 
}

/*
p-elementti, jonka id
on tarkein ympäröidään
punaisella rajalla
*/
p#tarkein { 
  border: 3px solid red; 
}

/* lisätään jokaista p-elementtiä
ennen teksti "Lue tarkkaan "
*/
p:before { 
  content: "Lue tarkkaan "; 
  color: silver; 
}

/* lisätään jokaisen p-elementin
perään teksti " - Kappale loppuu"
*/
p:after { 
  content: " - Kappale loppuu "; 
  color: blue; 
}

/*
suurennetaan p-elementtien
sisällä olevan tekstin ensimmäisen
kirjaimen kokoa
*/
p:first-letter { 
  font-size: 2em; 
}

/*
määrätään p-elementin ensimmäinen
tekstirivi kapitaaleiksi
*/
p:first-line { 
  text-transform: uppercase; 
}

/*
jos kuvalla on määriteltynä
title-attribuutti, niin lisätään
kuvalle punainen raja
*/
img[title] { 
  border: 3px solid red; 
  padding: 1em; 
}

/*
jos linkki viittaa
osoitteeseen "/www/", niin
kasvatetaan linkkitekstin kokoa
*/
a[href="/www/"] { 
  font-size: 1.2em; 
}