CSS Text Style
Font
	font-family:	Arial;	p {	The font-family property should hold several font names as a "fallback" system. If the browser does not support the first font, it tries the next font, and so on.
		"Arial Black";	font-family: Verdana, Geneva, sans-serif;	If the name of a font family is more than one word, it must be in quotation marks, like: "Times New Roman".
		"Comic Sans MS";	}	More than one font family is specified in a comma-separated list
		"Courier New";		On computer screens, sans-serif fonts (such as Arial, Verdana) are considered easier to read than serif fonts.
		Georgia;
		"Lucida Console";
		Palatino;
		Tahoma;
		"Times New Roman";
		"Trebuchet MS";
		Verdana;
	font-size:	12 pt;	absolute measurement units	The font-size property sets the size of the text.
		1em;		If you do not specify a font size, the default size for normal text 16px (16px=1em).
		20px;
		0.1in		Setting the text size with pixels gives you full control over the text size:
		0.2cm		If you use pixels (px), you can still use the zoom tool to resize the entire page.
		6mm;
				Set Font Size With Em
		xx-small;	relative measurement units	To allow users to resize the text (in the browser menu), many developers use em instead of pixels.
		x-small;		The em size unit is recommended by the W3C.
		small;		1em is equal to the current font size. The default text size in browsers is 16px. So, the default size of 1em is 16px.
		medium;		The size can be calculated from pixels to em using this formula: pixels/16=em
		large;
		x-large;		The font-size value can be an absolute, or relative size.
		x-large;		Absolute size:
		xx-large;		Sets the text to a specified size
				Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
		150%;		Absolute size is useful when the physical size of the output is known
		1.5em;		Absolute size is useful when the physical size of the output is known
				Relative size:
				Sets the size relative to surrounding elements
	font-style:	normal;	default	Allows a user to change the text size in browsers
		italic;		Sets the size relative to surrounding elements
		oblique;
	font-weight:	nomal;	default
		bold;
		100;
		……
		900;
	font-variant:	normal;	default
		small-caps;
	Shortcut	font:	font: bold italic 160% arial ;
			font:160% "times new roman";	(1) no comma is allowed;  space (not comma) is needed among different properties.  If more than one font families are used, comma is used to seperated them.
			font: 15px arial, sans-serif;	(2) must be in this sequence.  Correct sequence:  (a) properties like font-style and font-weit (seperated by spaces); (b) font-size; (c) font-family, seperated by comma, if more than one are used.
			font:italic bold 12px/30px Georgia, serif;
Text
	color:	color: blue;
				The color property is used to set the color of the text.
				With CSS, a color is most often specified by:
				1. a color name - like "red"
				2. a HEX value - like "#ff0000"
				3. an RGB value - like "rgb(255,0,0)"
	text-align:	left;	default
		center;		text-align can only align block level elements, such as <p> and <div>.
		right;
		jutisfy;
				When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
	text-indent:	20pt;
		30px;
		2em;
		9mm;
	text-decoration:	none;	default
		underline;
		line-through;		It is not recommended to underline text that is not a link, as this often confuses the reader.
		overline;
		blink;	removed from newer html
	text-transform:	uppercase;
		lowercase;		All UPPERCASE
		capitalize;		all lower case
				Only The First Letter Of A Worh Are Capitalize.
	word-spacing:	2mm;
		-6px		The word-spacing property is used to specify the space between the words in a text.
	letter-spacing:	3px;
		-2px;		he letter-spacing property is used to specify the space between the characters in a text.
	vertical-align:	baseline;	default
		top;		The vertical-align property sets the vertical alignment of an element.		JavaScript syntax:	object.style.verticalAlign="top"
		bottom;		The top of the element is aligned with the top of the tallest element on the line
		text-top;		The bottom of the element is aligned with the lowest element on the line
		text-bottom;		The top of the element is aligned with the top of the parent element's font
		middle;		The bottom of the element is aligned with the bottom of the parent element's font
		super;		The element is placed in the middle of the parent element
		sub;		Aligns the element as if it was superscript
		length;		Aligns the element as if it was subscript
		initial;		Raises or lower an element by the specified length. Negative values are allowed
		inherit;		Sets this property to its default value.
		%;		Inherits this property from its parent element.
		0px;		Raises or lower an element in a percent of the "line-height" property. Negative values are allowed
		10px;		the same effect as "baseline; initial; top;"
		-8px;
		1cm;
		-2cm;
	line-height:	1.1;	default  (110%)
		0.8;	80%	The line-height property is used to specify the space between lines:
		1.8;	180%	The default line height in most browsers is about 110% to 120%.
		9mm;
		160%
Imagin centering
	text-align:	center;		<div style="text-align:center"><img src="6.jpg" width=""></div>
Video centering	text-align:	center;
				<div style="text-align:center "><video width="530" autoplay loop ><source src="slide_show.mp4" type="video/mp4"></video></div>
				Note: both <img> and <video> are inline elements (NOT block elements!), so then must be insert in <div>…</div> for centering
				A good approach is to add class="center" in each element to be centered, such as in <p>, <div>, and then use
				<head>
				<style>
				.center{
				text-align: center;
				}
				</style>
				</head>
				<body>
				<p class="center"> …… </p>
				<div class="center"> ……</div>
	None-css Styling	subscript	a<sub>1</sub>	a1
		superscript	a<sup>2</sup>
		emphasis	<em>text</em>
		strong	<strong>text</strong>
		blink	<blink>text</blink>
		<font>	not allowed in XHTML strict
		<i>	"
		<b>	"
		<center>	"