CSS

1
CSS Cascading Style Sheets
2
Style Sheet

• A style sheet is made up of style rules that tell
  a browser how to present a document.

3
Why CSS

• CSS enables you to separate the presentation of
  the page from its structure
• Increased Performance
• Easy Document Maintenance
• More Flexibility
• Increase Accessibility

4
Embedded Style

• Added directly into a html document
• Located in the ltheadgt section

5
Embedded Style Directions

• enter a tag you want to define characteristics
  for, such as h1
• a semi-colon () must separate each
  characteristic.
• list the characteristics you want the tag to use.
  
• This will affect all the information that uses
  the h1 tag on your web page.

6
Style Structure
Declaration Block
body background-color FFCCFF
Selector
Value
Property
7
Inline or Local Style

• In the ltbodygt of your document
• Just effects a paragraph, sentence or word.

ltp STYLE"color red gtThis paragraph is styled
in red. lt/pgt
8
Problem with Inline and Embedded Styles

• Only applies to a single html document
• Problems with consistency between web pages from
  the web site

9
Better solutionExternal Style sheet

• Creates repetition - one of the elements of
  design
• a consistent look and feel to your site
• One place to make changes
• It is a text file with the extension .css

10
Style Sheet Summary

• External Style Sheet- linked to it
• Embedded Style Sheet
• - appears in the Head section
• Inline Style Sheet- appears in the Body section

11
The Cascade

• External Style Sheet
• is overridden by
• Embedded Style Sheet
• which is overridden by
• Inline Style Sheet

12
Inheritance
13
Inheritance
14
Inheritance
15
Inheritance
16
Inheritance
17
Summary

• 3 types of styles
• External (link to ) overridden by
• Embedded ( ltheadgt) overridden by
• Inline (ltbodygt)
• Inheritance
• The children will inherit the properties of the
  parent