/*
ONLY css is permitted in a .css file
NO html allowed whatsoever

note how even this comment is in CSS format

CSS Rule:
selector{ property:value; }

*/
body{
	font-family:verdana, serif;
	background-color:#6D748C;
}

p{
	background-color:#BB7365;	
	color:#DEADA1;
	padding:5px;
}

li{
	
	background-color:#DEADA1; /* a red/orange-ish list item */
	padding:5px;
	margin:3px;
}
h1{
	font-family:arial;	
	color:#DEADA1;
}

/* now an <a> tag pseudoclassing example */
/*first, rules for all a tags...*/
a{
	font-family:arial;
	font-weight:bold;
}

/*
pseudoclassing allows application
of style based on the state of the tag, eg:

 selector:pseudoclass{ property:value; }
 
*/
/*
The order of these 4 pseudclasses is important
A useful mnemonic:
LoVe and HAte
Link Visited Hover Active
https://meyerweb.com/eric/css/link-specificity.html
*/
/* link has never been clicked*/
a:link{
	background-color:#3C4663;
	color:#FF8362;
}
/* link has been clicked previously */
a:visited{
	background-color:#FF8362;
	color:#3C4663;			
}
/* link is in mouseover state */
a:hover{
	background-color:#3C4663;
	color:white;
}
/* link is being clicked right now!! */
a:active{
	background-color:white;
	color:#3C4663;			
}

/*
class slectors are defined by the developer
.classname{ property:value; }
*/
.classy_styles{
	background-color:#DEADA1;
	color:#fafafa;
	font-weight:bold;
	font-style:italic;
}
.serif_font{
	font-family:"georgia", serif;
}
/*
here, we psuedoclass a .class selector
*/
.relative_links:link{
	background-color:inherit;
	color:#3C4663;	
	/* show the hyperlink underline as normal */
	text-decoration:underline;
}
.relative_links:visited{
	background-color:inherit;
	color:#3C4663;		
	text-decoration:underline;	
}
.relative_links:hover{
	background-color:#DEADA1;
	/* hide the underline on mouseover */
	text-decoration:none;
}


/*
note each #id you define can be used no more than ONCE per HTML page
*/
#unique_style{
	background-color:white;
}

#another_unique_style{
	background-color:black;
	color:white;
}