CSS

CSS is the presentation language. HTML and CSS are two of the core technologies for building web pages. HTML for structured content and CSS for layout and presentation.

CSS uses selectors for binding style properties to elements. Sass is a CSS extension, a CSS pre-processor.

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

selector declaration (property:value)
chain of contextual selectors: #content ul li a { color:#000; }

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