1. The.htm/.html Mystery When saving the template files in Internet Explorer, they will be named.htm by default. To be consistent with how the code was written in the template, you must rename the file extension:.html or else the links in your navigation bar will not work. Our current recommendation is to save the files from Mozilla Firefox in order to avoid this issue. Firefox saves the files as.html by default.

2. Troubleshooting If have problems with naming or re-naming the file extension (ex..txt,.doc,.htm,.html, etc.): Open up Control Panel in your PC. Within Control Panel search for “Folder Options”. Open it and click on the View tab and un- check the box for “Hide extensions for known file types”.

3. CSS Basics LIS Webteam October 15, 2010

4. Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like tables to set aside parts of a page Cascading Style Sheets designed to solve a number of problems

5. Why CSS 1.Separate style from structure, this lets programs and devices read HTML for what it is 2.Cascading feature allows designers multiple levels of control 3.Global style changes that took tedious work to do in HTML now takes seconds in CSS

6. What can you do with CSS Colors, backgrounds Fonts Spacing Page positioning

7. CSS Basic structure selector { property : value; } Examples h1 { color : red; } p { background-color : #00FFFF; } a { font-size : 3em; color : red; }

8. Cascades 3 levels of CSS Checked in this order, each overrides the previous 1.External style sheet – applies to many pages 2.Internal style sheet – applies to all of 1 page 3.Inline style – applies to single HTML element

9. 3 levels of CSS External Style Sheet Ex.: eportfolio.css

10. 3 levels of CSS Internal Style Sheet Placed near the beginning of an html document between the tags, and enclosed by the tags.

11. 3 levels of CSS Internal Style Sheet Example p {color: white; } body {background-color: blue; } White text on a blue background! The “Internal Style Sheet”

12. How code from the last slide would appear in your browser:

13. 3 levels of CSS Inline Style Overrides the rules in the external and internal style sheets. Goes right in the HTML tag as an attribute. Ex.: <p style = “background = red;”>blah blah blah

14. That would look something like:

15. The CSS Box Model Content Padding Margin Border

16. Page Layout Block 1 Block 2 Block 3 Block 4

17. Time to Practice Work through the handout exercises Play around with CSS RGB Calculator!

18. Where to go for more LIS Webteam w3schools.com

19. Good Luck, Have Fun