/* 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; 
}


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; 
}