CSS Types
External <head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Internal <head>
<style>
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-left: 40px;
} 
</style>
</head>
Inline <h1 style="color:blue;margin-left:30px;">This is a heading.</h1>
Cascading Order 1. Inline style (inside an HTML element)
2. External and internal style sheets (in the head section)
3. Browser default
CSS Syntax Selector + Declaration 1 + Declaration 2 + …
h1 {color:blue; font-size:12px;}       >  selector {property1:value1; property2:value2;…}
Selector CSS selectors are used to "find" (or select) HTML elements based on their element name, id, class, attribute, and more.
h1, h2, h3 { h1, h2, and h3 are parallel <h1>…………</h1>
<h2>…………</h2>
<h3>…………</h3>
id selector #special p { p is under id = "special" <div id = "special"> The id selector uses the id attribute of an HTML element to select a specific element.
   <p>  ………..</p> The id of an element should be unique within a page, so the id selector is used to select one unique element!
   <p>  ………..</p> To select an element with a specific id, write a hash (#) character, followed by the id of the element.
</div>
class selector p.number1 { class = "number1" is under p there is no space between p and . The class selector selects elements with a specific class attribute.
<p>……<span class = "number1">…   </span>…</p> To select elements with a specific class, write a period (.) character, followed by the name of the class.
One page can haveas many classes as needed.
<p class="center large">This paragraph refers to two classes.</p> HTML elements can also refer to more than one class.
group selectors h1, h2, p { To group selectors, separate each selector with a comma.
    text-align: center;
    color: red;
}
CSS Combinators A CSS selector can contain more than one simple selector. Between the simple selectors, we can include a combinator.
descendant selector div p  all <p> elements inside <div> elements are selected A combinator is something that explains the relationship between the selectors.
child selector div > p The child selector selects all elements that are the immediate children of a specified element. There are four different combinators in CSS3:
general sibling selector div ~ p The general sibling selector selects all elements that are siblings of a specified element. descendant selector (space)
adjacent sibling selector div + p The adjacent sibling selector selects all elements that are the adjacent siblings of a specified element. child selector (>)
sibling elements must have the same parent element, and "adjacent" means "immediately following". adjacent sibling selector (+)
general sibling selector (~)
A CSS comment starts with /* and ends with */. Comments can also span multiple lines:
CSS Comments p {
    color: red;
    /* This is a single-line comment */
    text-align: center;
}
/* This is
a multi-line
comment */