1. Cascading Style Sheets
Understanding styles

2. CSS applies style formatting to your page in one of three ways:
The term cascading describe the capability of a local style to override a general style.
CSS applies style formatting to your page in one of three ways:
Via an external, linked styled sheet
Via an embedded style
Via inline style rules
External Style Sheets =files containing the CSS rules; they link one or more Web pages. One benefit to linking to an external style sheet –you can customize and change the appearance of all pages easily from one file. They are recommended.
Embedded Styles are those typically written into the actual file at the top of the web page within a <style>…</style> tag pair. (however, they can be placed anywhere on the page)
Inline Styles are inserted within HTML tags using the style attribute- a technique known as inline styles ( the most local-> has the ultimate control)
These two last categories are also called internal styles

3. External style sheets –can use 2 methods:
The link method: a line of code is added outside of the <style> tags:
<link href=‘mainstyle.css” rel=“style sheet” type=“text/css”>
The import method writes code within the style tags, as follows:
<style type=“text/css”>
<!—
@import url (“newstyles.css”); 
</style>
The <style> tag for a Cascading Style Sheet identifies the type attribute as text/css.

4. Embedded styles Sample: <style type="text/css"> <!-- a:link {
color: #FF3300; }
a:visited {
color: #993300;
a:hover {
color: #FF9900;

5. Inline styles: Sample:
<div id=“Layer1” style=“position :absolute; visibility: inherit; left: 314px;……..>
</div>

6. Working with Internal Styles
There are 3 different selector types( kinds of elements defined by styles) that can be used :
Class: allows you to create classes that are not tied to any particular elements. You can apply a single class to many different elements. Classes are indicated by their initial period
Tag: allows you to specify an HTML tag as the element that will be redefined by the style
Advanced: allows you to create styles that are used for specific tag combinations (contextual selectors). It enables you to create IDs, which are similar to classes but they can only be used once per page as a way of defining or uniquely identifying a particular element. =>IDs are often used for scripting purposes and are indicated by #

7. Converting Internal Styles to External Styles
Gives consistency from page to page
The internal styles ( especially those with the same name) should be deleted before attaching an external style sheet, to avoid conflict, reduce the amount of code and reduce possibility of error and confusion:
In the list of rules on the CSS Styles panel, select <style> and delete it

8. Linking to an Existing External Style Sheet
How to do it:
Attach the .css file in the styles panel
The link option is selected by default when it is the first time attaching a style sheet
Given the cascading nature of style sheets, the second style sheet has priority and overrides any conflicting styles in the first sheet. Likewise, a third style sheet overrides any conflicts in the first and second sheets.

9. Creating External Styles
Creating Styles for Tag Combinations

10. Editing an Existing Style
Web pages tell the browser which external style sheets to use for instructions on how to display the formatting.
The styles are applied to the elements by the browser at the time that a file is seen by visitor.
Any modifications are automatically reflected in every page that is attached to the edited style sheet at the time it is viewed.
Because formatting values are contained in the style sheet, those values need to be modified in only that one location to affect all pages linked to the style sheet. This is useful because the appearance of an element such as text can be changed in several pages or entire site very quickly.

11. Working with Style Precedence
The origin which is the source of style , is evaluated first:
Browser defaults (lowest priority)
Styles created by user
Styles specified by the web page ( highest priority)
The order of styles concerns where styles are located:
External CSS styles
Internal CSS styles
Inline CSS styles
Local HTML formatting ( the formatting which is closest to the text; highest priority-overrides any other options set in the styles above if there are conflicts)-no used anymore by Dreamweaver because the <font> tag is deprecated (marked for deletion) in HTML 4.0

12. Creating a basic CSS Layout
CSS can be used in combination with, or as an alternative to, creating layouts with tables.
The benefits:
The ease and speed with which a CSS-based site can be updated
A consistent appearance
Less code
Faster download time
Increased accessibility
Flexibility
Efficiency
(content—separated from the design and attributes that define appearance)