1. CSS Demo

2. Questions How many of you –knows how to code html? –have used dreamweaver or some other graphical html editor? –have used css styles?

3. Example (embedded) STYLE DEFINITION inside.htm <!--.style1 { font-size: 16px; color: #FF0000; }.style2 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 24px; color: #00FFFF; } --> USAGE Firstline Secondline RESULT

4. Example (stylesheet) FILE webphotoalbum.css.teststyle { font-family: Georgia, "Times New Roman", Times, serif; font-size: 24px; font-style: italic; color: #0000FF; }.style2 { font-family: Arial, Helvetica, sans-serif; font-size: 9px; color: #FFFF99; } Link.css file USE styles Firstline Secondline RESULT

5. Questions Which method would you use? –Any particular reason for that?

6. My first style sheet Open Dreamweaver Create new site (site – manage sites) Create a new file to your site (index.htm) Open style definitions (Windows – CSS styles) –Find and press New CSS Style button (up & right by default) Give name to your style Define in: New Style Sheet File Save your file with descriptive name Define your new style Use your new style in a document Define a new style and use it in the document

7. Cool text effects Press new CSS style button –Selector Type: Advanced… –Selector (if you use multiple, keep the next order) a:link a:visited a:hover a:active Define your hover –Simple changes are the best –Effect must not affect other object etc. in the screen! Save your files and test

8. Multiple text effects Create a new page with three different links Create a new CSS style sheet –Select a:hover but Change its name to a.first:hover Select font size 22 other definitions are free –Create a new style inside the previous style sheet Again select a:hover  change name to a.second:hover Use again font size 22 –Define your hover styles –Create a.first:link style –Create a.second:link style Use font size 14 in both link styles We have a problem  Can you identify it? How to fix it?

9. Important things Use properties inspector only to assign created styles –Do not create styles using properties inspector! Why? Again styles should affect only to the item itself