1. Cascading Style Sheets
CSS

2. Introduction To CSS
CSS works by allowing your associate rules with the elements that appear in document.
Each style rule in a style sheet has two main parts
The selector, which indicates which element or elements the declaration applies to.
The declaration, which sets out how the elements should be styled.

3. Introduction To CSS
The declaration is also split into two parts, separated by a colon:
A property, which is the property of the selected element(s) that you want to affect.
A value, which is a specification for this property; in this case it is the Arial typeface.

4. Adding Style to a Document
Linking to a Style Sheet (External CSS)
Can set style for many documents with one style sheet.
Style information cached by the browser.
The common style sheet document extension is .css, for Cascading Style Sheets.
Syntax
<link rel=“stylesheet “ href=“main.css” type=“text/css”>
rel attribute is used to indicate the relationship for the link element.
href attribute is used to indicate the URL of the style sheet to use.
type attribute is used to indicate the linked style sheet is a cascading style sheet (CSS).

5. Adding Style to a Document
Embedding and Importing Style Sheets
Can easily control style document by document.
No additional page requests for style information.
Syntax
<style>
/*style rules here*/
h1{backgroud-color:red;}
</style>

6. Adding Style to a Document
Using Inline Style
Can easily control style to a single character instance.
Overrides any external or document styles.
Syntax
<h1 style=“font-size: 48pt; font-family: Arial; color: green;”>CSS1 Inline</h1>
style attribute is used to add style information directly in a tag.

7. Understanding Block and Inline Elements
Block-level elements appear on the screen as line break before and after them.
For example the <p>, <h1>, <h2>, <h3>, <h4>, <ul>, <ol>, <hr>, and <hr>elements are all block level elements.
Inline elements, on the other hand, can appear within sentences and do not have to appear on a new line of their own
For example the <b>, <i>, <u>, <sub>, and <li> elements are all inline elements.

8. Grouping Elements with <div> and <span>
The <div> and <span> elements allow you to group together several elements to create sections or subsections of a page.
They are commonly used with CSS to allow you to attach a style to a section of a page.
<div> is the block-level element
<span> is the inline-level element

9. Selectors Universal Selector The Type Selector
The universal selector is an asterisk; it matches all element types in the document.
*{background-color:”red”;}
The Type Selector
The type selector matches all of the elements specified in the comma-delimited list. It allows you to apply the same rules to several elements.
h1,p,b{font-family:”arial”;}

10. Selectors The Class Selector
The class selector allows you to match a rule with an element carrying a class attribute whose value you specify in the class selector.
<p class="BackgroundNote">This paragraph contains an aside.</p>
.BackgroundNote {font-size:”24px”;}
Creating a selector that selects only the <p> elements that carry a class attribute with a value of BackgroundNote
p.BackgroundNote {font-size:”24px”;}

11. Selectors
ID selector
The id selector works just like a class selector, but works on the value of id attributes.
<p id=“abstact”>Hello world</p>
p.#abstract {font-size:”24px”;}