1. Cascading Style Sheets I Embedded Style Sheets

2. Page Design ICSS 2Instructor: Sean Griffin What is a Style Sheet? A style sheet is a text file that contains one or more rules that determine – through properties and values – how the elements on your Web page should be displayed.

3. Page Design ICSS 3Instructor: Sean Griffin What Can They Control? Font size, color, kerning, leading, alignment Size & position of layers Border size, color & style (e.g., dotted / dashed) Page breaks for printing Background images List formatting and much, much more!

4. Page Design ICSS 4Instructor: Sean Griffin What Browswers Support Them? Most browsers support CSS 2 – a guideline from our friends at the W3C. No browser fully supports all of CSS 2.

5. Page Design ICSS 5Instructor: Sean Griffin Anatomy of a CSS Rule Each style rule in a style sheet has two main parts: –Selectors: determines which elements are affected (Example: the tag) –Declarations: consists of one or more property/value pairs. Declarations are enclosed within curly brackets. (Example: {color:green})

6. Page Design ICSS 6Instructor: Sean Griffin Embedded Styles Embedded styles are placed within the head tag and contain all of the following: – element: this is a container for CSS rules –The type attribute: refers to MIME type which tells the browser which style sheet syntax to use. –CSS rule: the select and declaration

7. Page Design ICSS 7Instructor: Sean Griffin Example 1 Changes all tags to green.

8. Page Design ICSS 8Instructor: Sean Griffin Example 2 Changes all tags to green and their backgrounds to red.

9. Page Design ICSS 9Instructor: Sean Griffin Example 3 Changes all tags so they have a solid red 4 pixel border.

10. Page Design ICSS 10Instructor: Sean Griffin Example 4 Changes all tag text to blue.

11. Page Design ICSS 11Instructor: Sean Griffin Example 5 Changes the page background to an image.

12. Page Design ICSS 12Instructor: Sean Griffin Example 6 Changes all paragraphs to green text.

13. Page Design ICSS 13Instructor: Sean Griffin Example 7 Changes all tags to red and all paragraphs to green text.

14. Page Design ICSS 14Instructor: Sean Griffin Example 8 Changes all body text to blue, all tags to red and images will have a orange 4 pixel dashed border.

15. Page Design ICSS 15Instructor: Sean Griffin Example 9 Changes the body to a green background, all body text to blue, all tags to red and images will have a orange 4 pixel dashed border.

16. Page Design ICSS 16Instructor: Sean Griffin Example 10 Changes all paragraphs to 12pt blue Verdana text.