How to introduce CSS and its selector

How CSS is introduced
first: In the head <style></style> embedded
The second kind: In head <link href= "Index.css" rel= "stylesheet" > linked (Loading CSS First, then loading HTML) recommended
The third type: In the head <style> @import "index.css";</style>> import (load HTML first, then load CSS)
Fourth: Directly in the HTML tag <div style= "width:50%; height:60px; background-color:orangered" > does not recommend this way </div> inline 

CSS Selector
1. Base selector
* Universal element Selector, matches any element * {margin:0; padding:0;}
e Tag Selector, matching all elements using the E tag p {color:green;}
The . Info and E.info class selectors match all elements of the class attribute that contain info. info {background: #ff0;} P.info {background:red}
#info和E #info ID selector, match all elements of the id attribute equal to footer #info {background: #333} p#info {Background:blue}

2, combination selector (here the e,f can be a selector in the base selector)
e,f Multi-element selector, matching all e elements with f elements, E and F separated by commas div,p {color: #f00}
e F descendant selector, matching all of the E-element descendants (sons, grandchildren ...). The f element, between E and F, is separated by a space of Li a {font-weight:bold;}
e>f child element selector, matches all elements of E element (son only) between F,e and F with > separate div > P {color: #ccc}
e+f adjacent element selectors, matching all sibling elements immediately following the E element F,e and F with a plus sign separating Div + p {color:000}

3. Attribute selector
E[att] matches all E elements that have the ATT attribute, regardless of its value. (Note: E can be omitted here, such as "[cheacked]". to the same. ) P[title] {color: #f00;}
E[att=val] match all att attributes equal to "Val" E element div[class= "error"] {color: #f00;}
E[att~=val] matches all ATT attributes with multiple space-delimited values, one with a value equal to "Val" for the E element td[class~= "name"] {color: #f00;}
E[attr^=val] matches the attribute value to specify the value at the beginning of each element div[class^= "test"]{background: #ffff00;}
E[attr$=val] matches the attribute value to specify each element at the end of the value div[class$= "test"]{background: #ffff00;}
E[attr*=val] Matches each element of the attribute value that contains the specified value div[class*= "Test"]{background: #ffff00;}

4. Pseudo-Class
Anchor Pseudo-class: Designed to control the display effect of links
a:link {color: #FF0000}/* Link not visited * /
a:visited {color: #00FF00}/* Visited link */
a:hover {color: #FF00FF}/* Mouse over link */
a:active {color: #0000FF}/* Selected link */format: Tag: Pseudo-class name {CSS code;}

before after pseudo-class
p:before Insert content before each <p> element's content p:before{content: "Hello"; color:red}
p:after Insert content before each <p> element content p:after{contents: "Hello"; color:red}

How to introduce CSS and its selector