CSS Demo

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. STYLE DEFINITION inside .htm <style type="text/css"> <!-- .style1 { font-size: 16px; color: #FF0000; } .style2 { font-family: Geneva, Arial, Helvetica, sans-serif; font-size: 24px; color: #00FFFF; } --> </style> USAGE <p class="style1">Firstline</p> <p class="style2">Secondline </p> Example (embedded) 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 <link href=“../monimedia/webphotoalbum.css" rel="stylesheet" type="text/css"> • USE styles <p class="teststyle">Firstline</p> <p class="style2">Secondline</p> 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