====== CSS integration ======
  * in head tag
    * only usable in the single page containing the code
  * inline
  * external link file
  * import

====== CSS components ======
  * style
  * placement
  * cascading method

====== CSS language structure ======

terms and concepts

  * syntax: <code css>Name {attr1:value1;attr2:value2;attr3:value3;}
/* comment */
</code> 
  * name type (selector type)
    * class : embed into any tag (must be started with ".") <code css> .myText{}</code>
    * tag : for html predefined tag (must be a html tag name) <code css>h1{} </code>
    * advanced : for id, pseudo-class selector (must begin with "#") <code css> a:link{}</code>

Learn css property by demo:
  * [[http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none|display: inline; block; list-item; none;]]
  * display: none/inline/block/inline-block example: https://stackoverflow.com/questions/3099030/displayinline-vs-displayblock
    * examples of block level elements include: div, h1, p, and hr 
    * (takes the entire row(100%)of the screen ,it is always 100%of the screen size)
    * examples of inline level elements include: a, span, strong, em, b, and i, canvas
====== The Selectors ======
  - Class
    * Easy to use and wide applicable
    * use it when it will be applied very general
  - tag
    * redefine the default properties of html
  - ID (pseudo-class)
    * use it when it will be applied only to one element or one location, with special purpose; (like navigation bar, content area)
    * for structure setup

====== Benefit of CSS in external file ======
  * make editing separated and easy
  * make it dynamically switchable
  * make style reusable crossing multiple pages

====== Common Question and Misunderstanding ======

  * Div Tag vs Table tag
    * table are always aligned, and placed horizontally and vertically
    * div can be positioned any where in the web with its attributes



====== Advanced - CSS Workflow ======

  - [[http://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet|reset CSS script?]] <code css> *{  
    margin:0;
    padding:0;
    border-width:0;
 }
</code>
  - CSS with "[[https://addons.mozilla.org/en-us/firefox/addon/web-developer/|Web Developer Toolbar]]"

====== Example and ready-to-use ======

pre-defined color table in CSS: http://www.w3schools.com/cssref/css_colornames.asp

===== css override example =====

  * clear background-color set by other css <code css>
.main-header-bar {
background-color: transparent !important ;
}
</code>

===== form style =====

  * input style <code css>
input[type="text"]
 {
 width:150px;
 display:block;
 margin-bottom:10px;
 background-color:yellow;
 }
/* class "in" special change overide */
input[type="text"].in {
background-color:red;
}
/* under id "col-4", class "in" special change override*/
.col-4 input[type="text"].in {
width: 150px !important; 
}

 input[type="button"]
 {
 width:120px;
 margin-left:35px;
 display:block;
 }
</code>



===== table style =====

Here is a interactive style play tool: http://www.somacon.com/p141.php

  * border <code css>table, th, td
{
border: 1px solid black;
}
/* or */
table{
border-collapse:collapse;
empty-cells:show;
}
td{
	border-width: 1px;
	padding: 1px;
	border-style: inset;
	border-color: gray;
}
</code>

ref: http://www.smashingmagazine.com/2008/08/13/top-10-css-table-designs/

  * show empty cell <code css>
table{
border-collapse:separate;
empty-cells:show;
}
</code>

===== flex layout for elements =====

  * https://css-tricks.com/almanac/properties/j/justify-content/
  * https://www.w3docs.com/learn-css/the-ultimate-guide-to-flexbox.html
  * https://stackoverflow.com/questions/29546550/flexbox-4-items-per-row
  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox
  * https://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements?noredirect=1&lq=1
  * https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items

===== Page Layout =====

  * top bottom main + panel <code html>
<head>
<?php include("e_header.htm"); ?>
<?php include("e_javascript.htm"); ?>
</head>
<body>
<div id="wrap">
	<div id="header">
		<?php include("e_menu.htm"); ?>
	</div>
	<div id="main">
	</div>
	<div id="sidebar">
	</div>
	<div id="footer">
		<? include("e_footer.htm"); ?>
	</div>
</div>
</body>
</code> <code html>
<link rel=StyleSheet href="style.css" type="text/css" media=screen>
</code> <code css>
body,
html {
	margin:0;
	padding:0;
	color:#000;
	background:#FFFFFF;
}
p{
	font-size:14px;
}

/* layout */
#wrap {
	width:750px;
	margin:0 auto;
	background:#FFF;
}
#header {
	padding:50px 10px;
	color:#FFF;
	background:#FFF;
	background-image:url('image/banner.png') ;
	background-repeat:no-repeat;
	background-position:right;
}
#main {
	float:left;
	width:480px;
	padding:10px;
	background:#fff;
}
#sidebar {
	float:right;
	width:210px;/*230*/
	padding:10px;
	background:#fff;
	border-width:2px;
	border-style:solid;

}
#footer {
	clear:both;
	padding:5px 10px;
	background:#ddd;
}
#footer p {
	margin:0;
}
* html #footer {
	height:1px;
}

/* element */
h1 {
	margin:0;
}
h2 {
	margin:0 0 1em;
}

#nav {
	padding:5px 10px;
	background:#ddd;
}
#nav ul {
	margin:0;
	padding:0;
	list-style:none;
}
#nav li {
	display:inline;
	margin:0;
	padding:0;
}

/*My Style*/

TD{font-family: Arial; font-size: 8pt;}
</code>

===== text background color bar strike through =====

  * gradient method
    * gradient tool: https://cssgradient.io/
    * <code>
// gradient with half transparent way to half BG
<p><span='colorHalfBG'>Text</span></p>
span.colorHalfBG{
  padding-left: 5px;
  padding-right: 5px;
  background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%);
}
</code>
  * :before in absolute position to draw a block behind method
    * ref: https://codepen.io/OxyDesign/pen/eHAac
    * <code>
.colorHalfBG:before {
  display: block;
  content:'';
  position:absolute;
  width:100%;
  bottom:0;
  left:0;
  background:#f66;
  z-index:-1;
  height:50%;
}
</code>
===== Real CSS tricks =====

  * google doodle animation : http://devlup.com/javascript/jim-henson-puppetry-doodle-how-did-they-do/2574/
  * map demo : http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/

====== CSS template ======

**Table Style**
  * [[http://stefanoverna.com/blog/2009/01/create-astonishing-ical-like-calendars-with-jquery.html|iCal table style]]
  * [[http://www.duoh.com/csstutorials/csstables/|clean blue light style table]]


====== CSS3 ======

===== css3 animation =====

  * animation video 1-3:
    * https://www.youtube.com/watch?v=f1WMjDx4snI