CSS

CSS is a core web language. HTML for structured content and CSS for layout and presentation.

  selector {
	    property:value; 
  }

Sass

Sass is a CSS extension, a CSS pre-processor.

h1 { color:#000; } the heading is black
h6 { color:#666; } subheadings are gray
p  { color:#000; } paragraphs are black

chain of contextual selectors: #content ul li a { color:blue; }

CSS selectors

x + y is an adjacent selector. 
it will select only the element that is immediately preceded by the former element. 

x > y is a direct child selector. 

a[class="bc"] { color:green; } is known as an attributes selector. 
this will only select the anchor tags that have a class="bc" attribute. 

E > F   an F element child of an E element (child combinator)
E + F      an F element immediately preceded by an E element (adjacent sibling combinator)

nav ul#social		{ margin:0.8em; padding:0; list-style:none; }
ul#social li		{ float:left; margin:0; padding:0; display:inline; } 
ul#social li a		{ background:#fff; text-decoration:none; display:inline-block; }

ul.pipe			{ margin:10px 0; padding:3px 0; list-style:none; }
ul.pipe li		{ margin:0 3px; padding:0; display:inline; }
ul.pipe li:first-child	{ margin:0; }
ul.pipe li a		{ color:#000; margin:0; padding:3px; text-decoration:none; }
ul.pipe li a:hover	{ background:#ddd; color:#000; }

//box model fix with the box-sizing property https://css-tricks.com/box-sizing/
* {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

#bac { background:#ccc url('/img/cool.png') 0 0 no-repeat fixed; }

background-color: #ccc;
background-image: url('/img/cool.png');
background-position: 0 0;
background-repeat: no-repeat;
background-attachment: fixed;

background-position: 0 0; if only one keyword, then second value is "center"
background-position: left top;
background-position: 0% 0%; this is default value

.bac { background:#fff url('/img/grad.png') 0 0 repeat-x; }
.bac { background:transparent url('/img/grad.png') center bottom repeat-y fixed; }