/* By selecting the root tag 'html', can apply a global style */
html {
	background-color: #F2F2E1;
}
/* Due to the cascading nature of stylesheets, this color will get overwritten if a more specific element is selected and given a 'background-color' style of its own */

/* Applying a style only to the first paragraph of the body */
body p:first-of-type {
	font-family: "Georgia"; /* Changing the font */
  color: #3A4F11;
}

/* While 'emphasis' inline tags only italicize the text by default, they're meant to be primarily semantic, meaning the actual style can be adjusted by the developer; such as if I also want to bold text within the tags. */
em {
	color: #3A4F11;
  font-weight: bold;
}

/* Changing the font style for all list items globally on the page */
/* Selecting specific tags to apply styles to all instances of that tag */
li {
	font-family: "Arial";
}

li {
	font-family: monospace; 
}
/* Due to the cascading nature of CSS, the first 'li' declaration block is overwritten with the second, and the resulting font is 'monospace'. */

/* Using '>', I can select only direct descendents of parent containers such as 'div' */
div > ol {
	background-color: #C7C7A9;
}

div > ul {
	background-color: #BFC7A9
}

ul > ol {
	background-color: #DBDBAF;
}

ul > ul {
	background-color: #DBDBAF;
}

/* I can also use classes as selectors too, and they would override general tag selectors. */
.list-wrapper {
	padding-top: 5px;
  padding-bottom: 10px;
  padding-left: 5px;
}

/* More specific selectors can be used as well; order-based selection is a type of 'pseudo-class'. This one only styles the odd children of the parent 'list-wrapper' class, which takes the form of the <h3> elements. */
/* However, for reasons I don't understand, adding an internal stylesheet conflicts with this ruleset, making the color not show up. */
.list-wrapper:nth-child(odd) {
	background-color: #ADAD72;
}