stevenpollack/demo.css

## demo.css
/* basic selection: all <p> tags */
p {
  color: red;
}

/* descendent selector:
  all <li> tags that are children of <ul> tags
*/
ul li {
  font-size: 24 px;
}

/* pseudo-selector:
  only select <a> when mouse is hovering
*/
a:hover {
  text-decoration: underline;
  color: darkred;
}
/* attribute selector:
  select all <input> tags with "type" attribute set to "submit"
*/
input[type=submit] {
  width: 120px;
  font-size: 30px;
}

/* selecting classes:
  only select <li> tags from the <ul> tags that are "nav" instances
*/
ul.nav li {
  padding: 15px 0 0 0;
}

/* 2 ways to apply CSS:
1. inside <head><style>...</style></head>. E.g.,
  <head>
    <style type="text/css">
      a {
        color: red;
      }
    </style>
  </head>
2. as an attribute of a <link> tag. E.g,
  <head>
    <link href="external.css" rel="stylesheet" type="text/css">
  </head>
*/

/* adding a background image:
  set the first tile somewhere with background-position
  handle repetitions with background-repeat

  This can be rewritten with short-hand one-line syntax
*/
body {
  background-color: #5f5f5f;
  background-image: url(images/turkey-day.png);
  background-position: (top|center|bottom) (left|center|right);
  background-repeat: (repeat|repeat-x|repeat-y|no-repeat);
}

/* modifying fonts/text:
  1. multi-word fonts are quoted.
  2. sans-serif refers to a generic sans-serif font
  3. can use percentages or ems instead of pxs for font-size
*/
body {
  font-family: Helvetica, "Times New Roman", sans-serif;
  font-size: 26px;
  font-weight: bold;
  line-height: 16px;
}

/* modifying the box-model:
  margin------------+
  | border--------+ |
  | | padding---+ | |
  | | | content | | |
  | | +---------+ | |
  | +-------------+ |
  +-----------------+

boxSize = content area width +
  padding-left + padding-right +
  border-left + border-right +
  margin-left + margin-right
*/

/* change the padding: */
h2 {
  padding-top: 6px;
  padding-right: 3px;
  padding-bottom: 0;
  padding-left: 0;
}
/* EQUIVALENTLY, we can specify values going clock-wise: */
h2 {
  padding: 6px 3px 0 0;
}

/* padding and margins have the same long- and short-hand syntax...

- USE PADDING when you want to control the SIZE OF THE BOX w/o adjusting the SIZE OF THE CONTENT inside the box
- USE MARGIN when you want to add space BETWEEN TWO BOXES

*/

/* change the border (2 ways): */
h2 {
  border-width: 6px;
  border-style: solid;
  border-color: black;
}
/* short-hand syntax...
NOTE, we could've worked with `border-bottom: 6px solid black;` as well
*/
h2 {
  border: 6px solid black;
}
/*
change block-level list item into inline-level
*/
ul li {
  display: inline;
}

/* inheritence & specificity:
  w, x, y, z

  - w: # of inline styles
  - x: # of id selectors
  - y: # of class selectors
  - z: # of element selectors

  when two styles, s1 & s2, compete,
  the style with the high digit to
  the left wins (unless !important is
  present):
*/
p { color: #fff; }         /* 0,0,0,1 */
.my-class { color: #fff; } /* 0,0,1,0 */
#id1 { color: #fff; }      /* 0,1,0,0 */
<p style=...>...</p>       /* 1,0,0,0 */
/* hence inline > id > class > element */

/* compare 0,0,2,1 vs. 0,0,2,2: */
.intro p.article { color: #fff; }
.intro ul li.active { color: #fff; }
/* style2 wins over style1 since its last
  digit is higher than style1's...
  However, any style with 0,x,0,0 will
  beat both out.
*/
	/* basic selection: all <p> tags */
	p {
	color: red;
	}

	/* descendent selector:
	all <li> tags that are children of <ul> tags
	*/
	ul li {
	font-size: 24 px;
	}

	/* pseudo-selector:
	only select <a> when mouse is hovering
	*/
	a:hover {
	text-decoration: underline;
	color: darkred;
	}
	/* attribute selector:
	select all <input> tags with "type" attribute set to "submit"
	*/
	input[type=submit] {
	width: 120px;
	font-size: 30px;
	}

	/* selecting classes:
	only select <li> tags from the <ul> tags that are "nav" instances
	*/
	ul.nav li {
	padding: 15px 0 0 0;
	}

	/* 2 ways to apply CSS:
	1. inside <head><style>...</style></head>. E.g.,
	<head>
	<style type="text/css">
	a {
	color: red;
	}
	</style>
	</head>
	2. as an attribute of a <link> tag. E.g,
	<head>
	<link href="external.css" rel="stylesheet" type="text/css">
	</head>
	*/

	/* adding a background image:
	set the first tile somewhere with background-position
	handle repetitions with background-repeat

	This can be rewritten with short-hand one-line syntax
	*/
	body {
	background-color: #5f5f5f;
	background-image: url(images/turkey-day.png);
	background-position: (top\|center\|bottom) (left\|center\|right);
	background-repeat: (repeat\|repeat-x\|repeat-y\|no-repeat);
	}

	/* modifying fonts/text:
	1. multi-word fonts are quoted.
	2. sans-serif refers to a generic sans-serif font
	3. can use percentages or ems instead of pxs for font-size
	*/
	body {
	font-family: Helvetica, "Times New Roman", sans-serif;
	font-size: 26px;
	font-weight: bold;
	line-height: 16px;
	}

	/* modifying the box-model:
	margin------------+
	\| border--------+ \|
	\| \| padding---+ \| \|
	\| \| \| content \| \| \|
	\| \| +---------+ \| \|
	\| +-------------+ \|
	+-----------------+

	boxSize = content area width +
	padding-left + padding-right +
	border-left + border-right +
	margin-left + margin-right
	*/

	/* change the padding: */
	h2 {
	padding-top: 6px;
	padding-right: 3px;
	padding-bottom: 0;
	padding-left: 0;
	}
	/* EQUIVALENTLY, we can specify values going clock-wise: */
	h2 {
	padding: 6px 3px 0 0;
	}

	/* padding and margins have the same long- and short-hand syntax...

	- USE PADDING when you want to control the SIZE OF THE BOX w/o adjusting the SIZE OF THE CONTENT inside the box
	- USE MARGIN when you want to add space BETWEEN TWO BOXES

	*/

	/* change the border (2 ways): */
	h2 {
	border-width: 6px;
	border-style: solid;
	border-color: black;
	}
	/* short-hand syntax...
	NOTE, we could've worked with `border-bottom: 6px solid black;` as well
	*/
	h2 {
	border: 6px solid black;
	}
	/*
	change block-level list item into inline-level
	*/
	ul li {
	display: inline;
	}

	/* inheritence & specificity:
	w, x, y, z

	- w: # of inline styles
	- x: # of id selectors
	- y: # of class selectors
	- z: # of element selectors

	when two styles, s1 & s2, compete,
	the style with the high digit to
	the left wins (unless !important is
	present):
	*/
	p { color: #fff; } /* 0,0,0,1 */
	.my-class { color: #fff; } /* 0,0,1,0 */
	#id1 { color: #fff; } /* 0,1,0,0 */
	<p style=...>...</p> /* 1,0,0,0 */
	/* hence inline > id > class > element */

	/* compare 0,0,2,1 vs. 0,0,2,2: */
	.intro p.article { color: #fff; }
	.intro ul li.active { color: #fff; }
	/* style2 wins over style1 since its last
	digit is higher than style1's...
	However, any style with 0,x,0,0 will
	beat both out.
	*/